/* ═══════════════════════════════════════════════════════════════════
   UNIFIED SUBPAGES — Masonry redesign theo handoff "Days of Dreamers"
   2026-07-06 · task REDESIGN-SUBPAGES (+FIX-CSS-SOURCE)
   ⚠️ NGUỒN CHÂN LÝ = astro_bookworm/public/css/ (chảy build→dist→root;
   copy_dist GHI ĐÈ root/css mỗi deploy — KHÔNG sửa root/css trực tiếp).
   GIỮ HỢP ĐỒNG DOM với /js/spa-router.js:
     .unified-subpages-wrapper > .subpage-box-container(.active-highlight)
       > .box-header.box-header-clickable + .box-content-wrapper
   Box active = title box + masonry CSS multi-column (columns:240px N).
   Box không active = card điều hướng (mobile); desktop ẩn (tab = chip bar).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper & box điều hướng (accordion) ── */
.unified-subpages-wrapper{display:flex;flex-wrap:wrap;gap:16px;width:100%;align-items:flex-start}
.subpage-box-container{background:#F2ECDD;border:1px solid #C9BBA0;border-radius:14px;overflow:hidden;flex:1 1 calc(25% - 16px);min-width:160px;display:flex;flex-direction:column;scroll-margin-top:130px;transition:background-color .25s ease,border-color .25s ease;cursor:pointer}
.subpage-box-container:not(.active-highlight):hover{background:#E9DFCC;border-color:#A8977A}
.box-header{margin-bottom:0!important;flex:1}
.box-header-clickable{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;cursor:pointer;padding:18px 20px;height:100%;min-height:140px;gap:.75rem}
.header-titles{flex:1;min-width:0}
.subpage-box-container .box-tag{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10px;letter-spacing:.24em;font-weight:600;text-transform:uppercase;color:#8A7B60;display:block;margin-bottom:8px}
.subpage-box-container .box-title{font-family:'Lora',Georgia,serif;font-weight:500;font-size:1.05rem;line-height:1.3;color:#3E362B;margin:0}
.subpage-box-container .box-subtitle{font-family:'Lora',Georgia,serif;font-size:.82rem;line-height:1.6;color:#5C5140;margin:.45rem 0 0}
.expand-indicator{flex-shrink:0;margin-top:auto;align-self:flex-end;display:flex;align-items:center;justify-content:center}
.expand-indicator svg{width:20px;height:20px;transform:rotate(-90deg);color:#8A7B60}
.box-content-wrapper{max-height:0;opacity:0;overflow:hidden;padding:0 20px}

/* ── Box active = title box (nền #F2ECDD) + nội dung masonry nổi trên nền trang ── */
.subpage-box-container.active-highlight{flex:1 1 100%;order:-1;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0;overflow:visible;cursor:default}
.subpage-box-container.active-highlight .box-header-clickable{flex-direction:column;gap:0;min-height:auto;height:auto;background:#F2ECDD;border:1px solid #C9BBA0;border-radius:14px;padding:18px 24px 20px;cursor:default}
.subpage-box-container.active-highlight .box-title{font-size:1.35rem}
#subpage-box-about.active-highlight .box-title{font-size:1.08rem}
.subpage-box-container.active-highlight .box-subtitle{font-size:.92rem}
.subpage-box-container.active-highlight .expand-indicator{display:none}
.subpage-box-container.active-highlight .box-content-wrapper{max-height:none;opacity:1;overflow:visible;padding:16px 0 0}

/* Desktop: chỉ hiện box active (tab nav = chip bar). Mobile/tablet: box còn lại = card điều hướng dưới nội dung */
@media(min-width:1025px){.unified-subpages-wrapper:has(.active-highlight)>.subpage-box-container:not(.active-highlight){display:none}}
@media(max-width:1024px){.unified-subpages-wrapper:has(.active-highlight) .subpage-box-container:not(.active-highlight){flex:0 0 calc(50% - 8px)}}
@media(max-width:640px){.unified-subpages-wrapper:has(.active-highlight) .subpage-box-container:not(.active-highlight){flex:0 0 100%}}

/* ── Masonry CSS multi-column (handoff: columns 240px, gap 16px) ── */
.usp-masonry{columns:240px 3;column-gap:16px}
.usp-masonry--2{columns:240px 2}
.usp-box{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin-bottom:16px;border-radius:14px;padding:18px 20px;box-sizing:border-box;background:#F2ECDD;border:1px solid #C9BBA0;display:block}
.usp-box--img{padding:0;overflow:hidden;line-height:0}
.usp-box--img img{width:100%;height:auto;display:block}
.usp-box--cover{background:#E9DFCC;padding:16px;text-align:center;line-height:0}
.usp-box--cover img{width:120px;height:auto;border-radius:4px;box-shadow:0 8px 18px rgba(60,48,30,.25);display:inline-block}
.usp-box--main{background:#F5F0E3;border:1.5px solid #A8977A;border-radius:16px}
.usp-box--sub{background:#E9DFCC;border:1px solid #C9BBA0}
.usp-box--outline{background:transparent;border:1px solid #CBBFA3;padding:16px 18px}
.usp-box--dark{background:#211B12;border:none}

/* Typo trong box */
.usp-eyebrow{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;color:#8A7B60;display:block;margin-bottom:8px}
.usp-box--dark .usp-eyebrow{color:#8F8266}
.usp-h{font-family:'Lora',Georgia,serif;font-size:17px;font-weight:500;color:#4E4232;margin:0;line-height:1.35}
.usp-h--lg{font-size:20px}
.usp-h--sm{font-size:15px;margin-top:2px}
.usp-genre{font-family:'Lora',Georgia,serif;font-size:12.5px;font-style:italic;color:#6B5A3E;margin:4px 0 10px}
.usp-body{font-family:'Lora',Georgia,serif;font-size:13.5px;line-height:1.7;color:#453B2D;margin:0}
.usp-body--sm{font-size:12.5px;margin-top:6px}
.usp-body strong{color:#3E362B}
.usp-box--dark .usp-quote{font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.4;font-style:italic;color:#EDE4CF;margin:0}
.usp-box--dark .usp-body{color:#B5A88D;font-size:13px;line-height:1.65}
.usp-dark-link{display:inline-block;margin-top:10px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:#EDE4CF;text-decoration:none;border-bottom:1px solid #6B5F48;padding-bottom:3px;cursor:pointer}
.usp-dark-big{font-family:'Lora',Georgia,serif;font-size:14px;color:#EDE4CF;word-break:break-all}
.usp-social-list{display:flex;flex-direction:column;gap:8px;font-size:14px}
.usp-social-list a{font-family:'Lora',Georgia,serif;color:#D8CDB8;text-decoration:none;border-bottom:1px solid #4A3F2C;padding-bottom:7px;transition:color .2s}
.usp-social-list a:last-child{border-bottom:none;padding-bottom:0}
.usp-social-list a:hover{color:#EDE4CF}

/* Bảng thông số 2 cột */
.usp-specs{display:grid;grid-template-columns:90px 1fr;row-gap:8px;font-size:13px}
.usp-specs .k{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:#8A7B60;align-self:center}
.usp-specs .v{font-family:'Lora',Georgia,serif;color:#453B2D}

/* Link mua/đăng ký + box sách outline + CTA */
.usp-buy{display:inline-block;margin-top:12px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:11px;letter-spacing:.1em;font-weight:600;color:#6B5A3E;text-decoration:none;border-bottom:1px solid #A8977A;padding-bottom:3px;transition:color .2s}
.usp-buy:hover{color:#4E4232}
a.usp-book-link{text-decoration:none;cursor:pointer;transition:background-color .25s ease}
a.usp-book-link:hover{background:#F2ECDD}
.usp-book-title{display:block;font-family:'Lora',Georgia,serif;font-size:17px;color:#4E4232;margin-top:8px}
a.usp-box--cta{background:#F2ECDD;border:1px solid #C9BBA0;padding:16px 18px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:#6B5A3E;text-decoration:none;cursor:pointer;transition:background-color .25s ease}
a.usp-box--cta:hover{background:#E9DFCC}

/* Form (input sáng theo handoff) */
.usp-form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.usp-field label{display:block;font-family:'Lora',Georgia,serif;font-size:14px;color:#4E4232;margin-bottom:6px}
.usp-req{color:#8C5A3C}
.qa-form-control,.contact-input{width:100%;box-sizing:border-box;background:#EDE5D2;border:1px solid #BFB093;border-radius:8px;padding:10px 12px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:13px;color:#443A2C;outline:none;resize:vertical;transition:border-color .2s}
.qa-form-control:focus,.contact-input:focus{border-color:#A8977A}
.qa-form-control::placeholder,.contact-input::placeholder{color:#A5977C}
.usp-submit{align-self:flex-start;cursor:pointer;background:#4E4232;color:#F2ECDD;border:none;border-radius:8px;padding:11px 22px;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:11px;letter-spacing:.14em;font-weight:600;text-transform:uppercase;transition:background-color .2s}
.usp-submit:hover{background:#5E5240}

/* Card trả lời Q&A (render động bởi JS) — card tối theo handoff */
.qa-reply-card{background:#211B12;border-radius:10px;padding:18px 20px;margin-bottom:14px}
.qa-reply-card:last-child{margin-bottom:0}
.qa-reply-meta{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8F8266;margin-bottom:10px}
.qa-reply-q{font-family:'Lora',Georgia,serif;font-size:15px;line-height:1.7;font-style:italic;color:#EDE4CF;margin:0}
.qa-reply-sep{border-top:1px solid #4A3F2C;margin:14px 0 12px}
.qa-reply-label{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:10px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:#8F8266;margin-bottom:8px}
.qa-reply-a{font-family:'Lora',Georgia,serif;font-size:14px;line-height:1.75;color:#C9BCA0;margin:0}

/* Section full-width dưới masonry (Kindle simulator) */
.usp-full{margin:2px 0 16px;background:#F5F0E3;border:1.5px solid #A8977A;border-radius:16px;padding:20px 22px;scroll-margin-top:130px}
.usp-full-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px}
@media(max-width:980px){.usp-full-grid{grid-template-columns:1fr}}

/* ── Kindle Simulator (giữ nguyên từ bản trước) ── */
.kindle-frame{background:var(--paper-warm);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 36px -16px #1a120a4d;margin-top:.4rem}
.kindle-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 1rem;background:var(--paper);border-bottom:1px solid var(--line)}
.kindle-bar-bottom{border-bottom:none;border-top:1px solid var(--line)}
.kindle-title{font-family:Be Vietnam Pro,system-ui,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.kindle-ctrl{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.kindle-themes{display:flex;align-items:center;gap:.4rem}
.kt{width:18px;height:18px;padding:0;border-radius:50%;border:1px solid rgba(53,42,34,.25);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.kt-light{background:#fff}
.kt-sepia{background:#efe3cb}
.kt-dark{background:#2b2620}
.kt:hover{transform:scale(1.12)}
.kt.active{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--clay-deep)}
.kindle-fonts{display:flex;align-items:center;gap:.3rem}
.kf{min-width:30px;height:27px;padding:0 .45rem;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.82rem;font-weight:600;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.kf:hover{background:var(--warm);border-color:var(--clay)}
.kindle-screen{padding:1.7rem 1.6rem;min-height:300px;transition:background-color .35s ease,color .35s ease}
.kindle-content{font-family:Lora,Georgia,serif;font-size:15px;line-height:1.85}
.kindle-content h4{font-family:Playfair Display,serif}
.kindle-nav{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.45rem .85rem;color:var(--clay-deep);cursor:pointer;white-space:nowrap;font-family:Be Vietnam Pro,system-ui,sans-serif;font-size:.72rem;font-weight:600;transition:background .15s ease,border-color .15s ease}
.kindle-nav:hover{background:var(--warm);border-color:var(--clay)}
.kindle-progress{font-family:Be Vietnam Pro,system-ui,sans-serif;font-size:.7rem;color:var(--ink-soft);white-space:nowrap}
html.dark-mode .kindle-frame{background:#241e1a;border-color:#f6efe21a}
html.dark-mode .kindle-bar{background:#1c1814;border-color:#f6efe214}
html.dark-mode .kindle-title,html.dark-mode .kindle-progress{color:#f6efe28c}
html.dark-mode .kf,html.dark-mode .kindle-nav{border-color:#f6efe229;color:var(--clay)}
html.dark-mode .kf:hover,html.dark-mode .kindle-nav:hover{background:#f6efe20f;border-color:var(--clay)}
html.dark-mode .kt{border-color:#f6efe240}

/* ── Dark mode cho hệ box mới ── */
html.dark-mode .subpage-box-container{background:#241e1a;border-color:#f6efe21f}
html.dark-mode .subpage-box-container:not(.active-highlight):hover{background:#2b231d;border-color:#5a4a3c}
html.dark-mode .subpage-box-container .box-tag{color:#8F8266}
html.dark-mode .subpage-box-container .box-title{color:#F3EBDC}
html.dark-mode .subpage-box-container .box-subtitle{color:#f6efe299}
html.dark-mode .expand-indicator svg{color:#8F8266}
html.dark-mode .subpage-box-container.active-highlight .box-header-clickable{background:#241e1a;border-color:#f6efe21f}
html.dark-mode .usp-box{background:#241e1a;border-color:#f6efe21f}
html.dark-mode .usp-box--main{background:#241e1a;border-color:#5a4a3c}
html.dark-mode .usp-box--sub{background:#2b231d;border-color:#f6efe21f}
html.dark-mode .usp-box--outline{background:transparent;border-color:#f6efe229}
html.dark-mode .usp-box--cover{background:#2b231d}
html.dark-mode .usp-box--dark{background:#211B12}
html.dark-mode .usp-eyebrow{color:#8F8266}
html.dark-mode .usp-h,html.dark-mode .usp-book-title{color:#F3EBDC}
html.dark-mode .usp-body{color:#f6efe2c7}
html.dark-mode .usp-body strong{color:#F3EBDC}
html.dark-mode .usp-box--dark .usp-body{color:#B5A88D}
html.dark-mode .usp-genre{color:#C9A98C}
html.dark-mode .usp-specs .k{color:#8F8266}
html.dark-mode .usp-specs .v{color:#f6efe2c7}
html.dark-mode .usp-buy{color:#C9A98C;border-color:#5a4a3c}
html.dark-mode .usp-buy:hover{color:#F3EBDC}
html.dark-mode a.usp-book-link:hover{background:#241e1a}
html.dark-mode a.usp-box--cta{background:#241e1a;border-color:#f6efe21f;color:#C9A98C}
html.dark-mode a.usp-box--cta:hover{background:#2b231d}
html.dark-mode .usp-field label{color:#f6efe2c7}
html.dark-mode .qa-form-control,html.dark-mode .contact-input{background:#1c1814;border-color:#5a4a3c;color:#F3EBDC}
html.dark-mode .qa-form-control::placeholder,html.dark-mode .contact-input::placeholder{color:#8F8266}
html.dark-mode .usp-submit{background:#5E5240}
html.dark-mode .usp-submit:hover{background:#6B5F48}
html.dark-mode .usp-full{background:#241e1a;border-color:#5a4a3c}