*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:hidden}body{font-family:Be Vietnam Pro,sans-serif;background:var(--paper);color:var(--ink);max-width:100%;margin:0 auto;overflow-x:hidden}.nav{background:transparent;position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:100%;z-index:100;display:flex;align-items:center;padding:0 16px;height:52px;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;border-bottom:1px solid transparent}.nav:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 70%,transparent 100%);pointer-events:none;transition:opacity .35s ease;z-index:-1}.nav.scrolled:before{opacity:0}.nav.scrolled{background:rgba(var(--paper-rgb),0.96);box-shadow:0 2px 14px rgba(0,0,0,0.06);border-bottom-color:var(--border)}.nav.scrolled .nav-logo span{color:var(--ink)}.nav.scrolled .nav-logo small{color:var(--ink-mid);font-weight:400}.nav.scrolled .nav-link{color:var(--text-dim)}.nav.scrolled .nav-link:hover{color:var(--ink)}.nav.scrolled .nav-link.active{color:var(--gold);border-bottom-color:var(--gold)}.nav.scrolled .nav-user-name{color:var(--ink)}.nav.scrolled .nav-user-name:hover{color:var(--gold)}.nav.scrolled .nav-btn-register{border-color:var(--gold);color:var(--gold)}.nav-logo{display:flex;align-items:center;gap:8px;position:relative}.nav-logo .seal{width:32px;height:32px;border:1.5px solid var(--gold-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold-light);font-family:"Noto Serif",serif;background:rgba(var(--ink-rgb),0.35);transition:border-color .35s ease,color .35s ease,background .35s ease}.nav.scrolled .nav-logo .seal{border-color:var(--gold);color:var(--gold);background:transparent}.nav-logo span{font-size:13px;font-weight:600;color:#fff;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.55);transition:text-shadow .35s ease}.nav-logo small{display:block;font-size:9px;color:var(--gold-lt2);font-weight:400;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.5);transition:color .35s ease,text-shadow .35s ease,font-weight .35s ease}.nav.scrolled .nav-logo span,.nav.scrolled .nav-logo small{text-shadow:none}.nav.scrolled .nav-logo small{color:var(--gold-light);font-weight:300}.hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:4px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));transition:filter .35s ease}.hamburger span{display:block;width:22px;height:2px;background:var(--gold-light);transition:background .35s ease,height .35s ease}.nav.scrolled .hamburger{filter:none}.nav.scrolled .hamburger span{background:var(--gold);height:1.5px}.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.nav-links,.nav-actions{display:none}.le-hoi-gallery{display:block;margin-top:20px}.lh-carousel{position:relative;display:flex;align-items:center;gap:10px}.lh-stage{flex:1;overflow:hidden;min-height:140px}.lh-card{border-radius:10px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);flex-shrink:0;width:100%}.lh-card[data-pos=prev],.lh-card[data-pos=next]{display:none}.lh-card[data-pos=active]{display:block;width:100%;opacity:1;filter:brightness(1);box-shadow:0 6px 20px #0006}.lh-img-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}.lh-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}.lh-img-caption{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:#0000008c;font-size:10px;color:#ffffffe0;font-family:"Noto Serif",serif;font-style:italic;text-align:center}.lh-arrow{width:28px;height:28px;flex-shrink:0;background:rgba(var(--gold-rgb),0.1);border:1px solid rgba(var(--gold-rgb),.35);color:var(--gold-light);border-radius:50%;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:sans-serif}.lh-arrow:active{background:rgba(var(--gold-rgb),0.28)}.lh-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}.lh-dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--gold-rgb),0.3);cursor:pointer;transition:background .2s,transform .2s}.lh-dot.active{background:var(--gold);transform:scale(1.35)}.khi-thieng-right{display:none}.khi-chieuthu-wrap{position:relative;margin:10px auto 0;max-width:360px;line-height:0}.khi-chieuthu-wrap svg{display:block;width:100%;height:auto}.khi-chieuthu-stats{position:absolute;inset:10%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px 8px;align-items:center;justify-items:center;line-height:1.1}.kct-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}.kct-num{font-family:"Noto Serif",serif;font-size:22px;font-weight:700;color:#5c3416;line-height:1;letter-spacing:-.01em}.kct-label{font-size:10px;color:#7a4d23;letter-spacing:.04em;font-weight:500}.khi-plaque,.khi-mobile-stats,.khi-mobile-stat,.khi-mobile-num,.khi-mobile-label{display:none}.menu-backdrop{position:fixed;inset:0;z-index:200;background:#0000;pointer-events:none;transition:background .3s ease}.menu-backdrop.open{background:#0000008c;pointer-events:all}.menu-drawer{position:fixed;top:0;bottom:0;background:var(--ink-deep);display:flex;flex-direction:column;z-index:201;transform:translate(110%);transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s ease;opacity:0;box-shadow:-8px 0 32px #00000080;pointer-events:none;overflow:hidden}.menu-drawer.open{transform:translate(0);opacity:1;pointer-events:all}.menu-drawer-inner{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.menu-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 16px;border-bottom:.5px solid rgba(var(--gold-rgb),.2);flex-shrink:0}.menu-header-logo{display:flex;align-items:center;gap:10px}.menu-header-seal{width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gold);font-family:"Noto Serif",serif}.menu-header-title{font-size:13px;font-weight:600;color:#fff;line-height:1.3}.menu-header-sub{font-size:9px;color:var(--gold-light);letter-spacing:.1em;text-transform:uppercase}.close-btn{background:#ffffff0f;border:.5px solid rgba(255,255,255,.15);color:#ffffffb3;width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.close-btn:active{background:#ffffff1f}.menu-section-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--gold-rgb),0.6);font-weight:600;padding:16px 20px 6px}.menu-items{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}.menu-item:active{background:rgba(var(--gold-rgb),0.1)}.menu-item-left{display:flex;align-items:center;gap:14px}.menu-item-icon{width:38px;height:38px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.menu-item.active-page .menu-item-icon{background:rgba(var(--gold-rgb),0.15);border-color:rgba(var(--gold-rgb),0.4)}.menu-item-text{font-size:15px;color:#fff;font-weight:500}.menu-item.active-page .menu-item-text{color:var(--gold-light)}.menu-item-sub{font-size:11px;color:#ffffff59;margin-top:1px}.menu-item-arrow{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#fff3;font-size:16px;flex-shrink:0}.menu-divider{height:.5px;background:#ffffff0f;margin:4px 20px}.menu-cta{padding:16px 20px;border-top:.5px solid rgba(255,255,255,.06);display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-shrink:0}.menu-cta button{padding:12px;font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:opacity .15s;-webkit-tap-highlight-color:transparent}.menu-cta button:active{opacity:.8}.btn-login{background:var(--gold);border:1px solid var(--gold);color:var(--ink);font-weight:700}.btn-register{background:transparent;border:1.5px solid var(--gold-light);color:var(--gold-light);font-weight:600}.hero{position:relative;height:580px;overflow:hidden;background:var(--ink)}.hero-illustration{position:absolute;inset:0;width:100%;height:100%}.hero-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--ink-rgb),.4) 0%,rgba(var(--ink-rgb),.28) 20%,rgba(var(--ink-rgb),.15) 42%,rgba(var(--ink-rgb),.05) 62%,transparent 85%)}.hero-content{position:absolute;inset:0;padding:72px 20px 32px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:18px}.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),0.33);border:.5px solid rgba(var(--gold-rgb),.45);padding:6px 14px;border-radius:20px;font-size:11px;color:var(--gold-light);letter-spacing:.08em;margin:0}.hero-badge-dot{width:5px;height:5px;background:var(--gold);border-radius:50%}.hero-poem{font-family:"Noto Serif",serif;color:#fff;line-height:1.95;text-align:center;width:100%;margin:0}.hero-poem .poem-line{display:block;font-size:13px;font-style:italic;text-shadow:0 1px 3px rgba(0,0,0,.55)}.hero-ornament{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:220px;color:rgba(var(--gold-rgb),0.8);margin:-2px 0 2px}.hero-ornament .ho-tri{font-size:7px;line-height:1;transform:translateY(-.5px)}.hero-ornament .ho-flower{font-size:14px;line-height:1;color:var(--gold-light);transform:translateY(-1px)}.hero-ornament .ho-line{flex:1;height:.5px;background:currentColor;opacity:.7;max-width:55px}.hero-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.hero-btns button{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 10px;font-size:13px;font-weight:500;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;letter-spacing:.04em;transition:transform .15s,color .2s;color:#fffffff2;background:transparent;border:none;overflow:visible}.hero-btns button .btn-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#ffffffd9;pointer-events:none}.hero-btns button:hover,.hero-btns button:hover .btn-frame{color:#fff}.hero-btns button:active{transform:scale(.97)}.btn-primary,.btn-secondary{background-color:transparent}.section{padding:36px 20px}.khi-thieng{padding-bottom:16px}.section+.section{border-top:none}.section-label{display:flex;align-items:center;gap:10px;margin-bottom:6px}.section-label-line{flex:1;height:.5px;background:var(--clay-light);opacity:.4}.section-label-text{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600}.section-title{font-family:"Noto Serif",serif;font-size:24px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:14px;text-align:center}.section-title em{font-style:italic;color:var(--clay)}.khi-thieng{background:var(--paper)}.khi-thieng-ornament{display:none}.khi-thieng p{font-family:"Noto Serif",serif;font-size:14.5px;line-height:1.9;color:var(--ink-mid);text-align:justify}.khi-thieng p+p{margin-top:12px}.read-more{position:relative;display:inline-flex;align-items:center;gap:10px;margin:14px auto 0;padding:12px 28px;cursor:pointer;background:transparent;border:none;font-family:"Noto Serif",serif;font-size:13px;font-weight:600;font-style:italic;color:var(--clay);letter-spacing:.02em;overflow:visible;transition:color .25s,transform .15s;-webkit-tap-highlight-color:transparent}.read-more .rm-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:rgba(var(--clay-rgb),0.55);pointer-events:none;transition:color .25s}.read-more .rm-arrow{font-family:Be Vietnam Pro,sans-serif;font-size:15px;font-style:normal;font-weight:400;line-height:1;transform:translateY(-1px);transition:transform .25s}.read-more:hover{color:var(--ink)}.read-more:hover .rm-frame{color:var(--clay)}.read-more:hover .rm-arrow{transform:translate(2px,-1px)}.read-more:active{transform:scale(.97)}.read-more-wrap{display:flex;justify-content:center;margin-top:18px}.read-more-arrow{display:none}.di-san-grid{display:flex;flex-direction:column;gap:14px;margin-top:20px}.di-san-card{border-radius:14px;overflow:hidden;border:.5px solid rgba(var(--clay-rgb),.2);background:#fff;display:flex;height:124px}.di-san-card-img{width:124px;flex-shrink:0;overflow:hidden}.di-san-card-body{padding:12px 16px 14px;display:flex;flex-direction:column;justify-content:space-between}.di-san-card-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600}.di-san-card-title{font-family:"Noto Serif",serif;font-size:15px;font-weight:600;color:var(--ink);margin-top:4px}.di-san-card-desc{font-size:12px;color:var(--stone);line-height:1.5;margin-top:4px}.di-san-card-link{font-size:11px;color:var(--clay);font-weight:600;letter-spacing:.04em;cursor:pointer}.le-hoi{background:var(--ink);color:#fff}.le-hoi .section-title{color:#fff}.le-hoi .section-label-text{color:var(--gold-light)}.le-hoi .section-label-line{background:var(--gold)}.le-hoi-date{display:flex;align-items:center;gap:16px;background:rgba(var(--gold-rgb),0.12);border:.5px solid rgba(var(--gold-rgb),.3);border-radius:12px;padding:14px 16px;margin-bottom:20px}.le-hoi-date-box{text-align:center;min-width:52px}.le-hoi-date-num{font-family:"Noto Serif",serif;font-size:32px;font-weight:700;color:var(--gold);line-height:1}.le-hoi-date-label{font-size:11px;color:var(--gold-light);opacity:.8}.le-hoi-date-divider{width:.5px;height:44px;background:rgba(var(--gold-rgb),0.3)}.le-hoi-date-info{font-size:13px;color:#ffffffd9;line-height:1.6}.le-hoi-date-info strong{color:var(--gold-light);display:block;font-size:14px;margin-bottom:2px}.le-hoi-desc{font-size:14px;line-height:1.8;color:#ffffffbf;font-family:"Noto Serif",serif;font-style:italic;margin-bottom:16px}.le-hoi-rituals{display:flex;flex-direction:column;gap:10px}.ritual-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.08);border-radius:10px}.ritual-num{width:24px;height:24px;background:rgba(var(--gold-rgb),0.2);border:.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--gold);font-weight:600;flex-shrink:0;margin-top:1px}.ritual-text{font-size:13px;color:#fffc;line-height:1.6}.ritual-text strong{color:#fff;display:block;margin-bottom:1px}.timeline{position:relative;padding:36px 20px}.timeline-line{position:absolute;left:36px;top:100px;bottom:36px;width:1px;background:linear-gradient(to bottom,var(--gold),var(--clay),rgba(var(--clay-rgb),.2))}.timeline-items{display:flex;flex-direction:column}.timeline-item{display:flex;gap:20px;padding-bottom:28px;position:relative}.timeline-dot-col{width:32px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}.timeline-dot{width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--paper);margin-top:4px;flex-shrink:0}.timeline-dot.major{width:18px;height:18px;background:var(--clay);box-shadow:0 0 0 3px #8b431333}.timeline-body{flex:1}.timeline-era{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:4px}.timeline-event-title{font-family:"Noto Serif",serif;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}.timeline-event-desc{font-size:13px;color:var(--stone);line-height:1.65}.timeline-img-placeholder{width:100%;aspect-ratio:16 / 5;border-radius:10px;border:.5px solid rgba(var(--clay-rgb),.2);margin-top:10px;overflow:hidden;display:block}.timeline-img-placeholder svg{width:100%;height:100%;display:block}.timeline-img-placeholder:hover:after{content:"🖼 Xem thư viện ảnh";position:absolute;inset:0;background:rgba(var(--ink-rgb),0.72);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--gold-light);font-family:Be Vietnam Pro,sans-serif;letter-spacing:.04em;border-radius:10px}.gallery-page{min-height:100vh;background:var(--ink);display:flex;flex-direction:column}.gallery-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#000000a0;border-bottom:.5px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:10}.gallery-back{display:flex;align-items:center;gap:8px;background:#ffffff12;border:.5px solid rgba(255,255,255,.15);color:#fffc;font-size:13px;font-weight:500;padding:7px 14px;border-radius:20px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:background .15s}.gallery-back:active{background:#ffffff24}.gallery-era-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);font-weight:600}.gallery-header{padding:20px 20px 14px;border-bottom:.5px solid rgba(255,255,255,.06)}.gallery-title{font-family:"Noto Serif",serif;font-size:18px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}.gallery-desc{font-size:12px;color:#fff6;line-height:1.5}.gallery-counter-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#ffffff08;border-bottom:.5px solid rgba(255,255,255,.05)}.gallery-counter{font-size:12px;color:rgba(var(--gold-rgb),0.8);font-weight:600;letter-spacing:.04em}.gallery-counter-total{color:#ffffff4d;font-weight:400}.gallery-main{position:relative;background:#000}.gallery-main-img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:var(--ink-deep)}.gallery-main-svg{width:100%;display:block}.gallery-nav-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}.gallery-nav-btn{width:36px;height:36px;background:#00000080;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:50%;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:all;font-family:sans-serif;transition:background .15s}.gallery-nav-btn:active{background:rgba(var(--gold-rgb),0.4)}.gallery-caption{padding:9px 16px;background:#000000a6;font-size:12px;color:#ffffffbf;font-family:"Noto Serif",serif;font-style:italic;text-align:center;min-height:36px}.gallery-thumbs-wrap{background:#0000004d;border-top:.5px solid rgba(255,255,255,.06);border-bottom:.5px solid rgba(255,255,255,.06)}.gallery-thumbs-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#ffffff4d;padding:8px 16px 4px}.gallery-thumbs{display:flex;gap:6px;overflow-x:auto;padding:6px 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.gallery-thumbs::-webkit-scrollbar{display:none}.gallery-thumb{width:64px;height:46px;flex-shrink:0;border-radius:5px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .2s,opacity .2s;opacity:.5;position:relative}.gallery-thumb.active{border-color:var(--gold);opacity:1}.gallery-thumb:active{opacity:.75}.gallery-thumb svg,.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}.gallery-thumb-num{position:absolute;bottom:2px;right:3px;font-size:9px;color:#fff9;background:#00000080;padding:1px 3px;border-radius:3px;line-height:1.2}.gallery-upload-cta{margin:14px 16px;padding:14px;background:rgba(var(--gold-rgb),0.06);border:.5px dashed rgba(var(--gold-rgb),.25);border-radius:10px;text-align:center}.gallery-upload-cta-text{font-size:12px;color:#ffffff61;margin-bottom:8px;line-height:1.5}.gallery-upload-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),0.12);border:.5px solid rgba(var(--gold-rgb),.35);color:var(--gold-light);font-size:12px;font-weight:600;padding:7px 14px;border-radius:16px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif}.lightbox{display:none;position:fixed;inset:0;z-index:500;background:#000000f5;flex-direction:column}.lightbox.open{display:flex}.lightbox-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;flex-shrink:0;background:#0006}.lightbox-counter{font-size:13px;color:#ffffff8c;font-family:Be Vietnam Pro,sans-serif}.lightbox-counter strong{color:#fff}.lightbox-close{width:36px;height:36px;background:#ffffff14;border:.5px solid rgba(255,255,255,.15);color:#fff;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:sans-serif;line-height:1;transition:background .15s}.lightbox-close:active{background:#ffffff2e}.lightbox-viewer{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:0 52px}.lightbox-img-wrap{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;cursor:zoom-in;transition:transform .3s ease}.lightbox-img-wrap.zoomed{cursor:zoom-out;transform:scale(1.8)}.lightbox-img-wrap svg,.lightbox-img-wrap img{max-width:100%;max-height:calc(100vh - 160px);display:block;border-radius:8px;object-fit:contain}.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:#ffffff14;border:.5px solid rgba(255,255,255,.15);color:#fff;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:sans-serif;transition:background .15s;z-index:2}.lightbox-arrow:active{background:rgba(var(--gold-rgb),0.3)}.lightbox-arrow-left{left:8px}.lightbox-arrow-right{right:8px}.lightbox-bottom{flex-shrink:0;background:#00000080;padding:12px 20px 16px}.lightbox-caption{font-family:"Noto Serif",serif;font-style:italic;font-size:13px;color:#ffffffbf;text-align:center;margin-bottom:10px;line-height:1.5}.lightbox-actions{display:flex;align-items:center;justify-content:center;gap:10px}.lightbox-action-btn{display:flex;align-items:center;gap:5px;background:#ffffff12;border:.5px solid rgba(255,255,255,.12);color:#ffffffa6;font-size:12px;font-weight:500;padding:7px 14px;border-radius:20px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:background .15s}.lightbox-action-btn:active{background:rgba(var(--gold-rgb),0.15);color:var(--gold-light)}.lightbox-thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 20px 4px;scrollbar-width:none;flex-shrink:0}.lightbox-thumbs::-webkit-scrollbar{display:none}.lightbox-thumb{width:48px;height:34px;flex-shrink:0;border-radius:4px;overflow:hidden;cursor:pointer;border:1.5px solid transparent;opacity:.45;transition:opacity .2s,border-color .2s}.lightbox-thumb.active{border-color:var(--gold);opacity:1}.lightbox-thumb svg,.lightbox-thumb img{width:100%;height:100%;display:block;object-fit:cover}@media(min-width:768px){.gallery-header{padding:24px 48px 18px}.gallery-nav{padding:14px 48px}.gallery-counter-bar{padding:8px 48px}.gallery-main-svg{aspect-ratio:16/9}.gallery-thumbs{padding:8px 48px 14px;gap:10px}.gallery-thumbs-label{padding:10px 48px 4px}.gallery-thumb{width:88px;height:62px}.gallery-caption{font-size:13px;padding:12px 48px}.gallery-upload-cta{margin:18px 48px}.lightbox-viewer{padding:0 64px}.lightbox-arrow{width:48px;height:48px;font-size:22px}.lightbox-arrow-left{left:10px}.lightbox-arrow-right{right:10px}.lightbox-img-wrap svg,.lightbox-img-wrap img{max-height:calc(100vh - 200px);border-radius:10px}.lightbox-thumb{width:60px;height:42px}.lightbox-caption{font-size:14px}}.vinh-danh{background:var(--cream)}.vinh-danh-tabs{display:flex;border:.5px solid rgba(var(--clay-rgb),.25);border-radius:10px;overflow:hidden;margin-bottom:20px}.home-vd-tab{flex:1;padding:9px 4px;font-size:12px;font-weight:600;text-align:center;cursor:pointer;background:transparent;border:none;color:#5c2e00;font-family:Be Vietnam Pro,sans-serif;transition:all .2s;letter-spacing:.02em}.home-vd-tab.active{background:var(--clay);color:#fff}.vinh-danh-list{display:flex;flex-direction:column;gap:10px}.vd-person{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:.5px solid rgba(var(--clay-rgb),.15);border-radius:10px}.vd-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}.vd-avatar.liet-sy{background:rgba(var(--vermillion-rgb),0.1);color:var(--vermillion)}.vd-avatar.thanh-tich{background:rgba(var(--gold-rgb),0.12);color:var(--gold)}.vd-avatar.dong-gop{background:rgba(var(--moss-rgb),0.12);color:var(--moss)}.vd-info{flex:1}.vd-name{font-size:14px;font-weight:500;color:var(--ink)}.vd-detail{font-size:12px;color:var(--stone);margin-top:2px}.vd-badge{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:500;white-space:nowrap}.badge-liet-sy{background:rgba(var(--vermillion-rgb),0.1);color:var(--vermillion)}.badge-thanh-tich{background:rgba(var(--gold-rgb),0.12);color:var(--clay)}.badge-dong-gop{background:rgba(var(--moss-rgb),0.12);color:var(--moss)}.vd-more-btn{margin-top:12px;padding:11px;width:100%;border:none;background:transparent;border-radius:0;font-size:13px;color:var(--clay);font-weight:600;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;text-align:center;opacity:.85;transition:opacity .15s}.vd-more-btn:hover{opacity:1}.cta-section{background:var(--ink);padding:36px 20px 48px;position:relative;overflow:hidden}.cta-ornament{position:absolute;top:-30px;right:-30px;width:140px;height:140px;border:1px solid rgba(var(--gold-rgb),.12);border-radius:50%}.cta-ornament2{position:absolute;top:-60px;right:-60px;width:200px;height:200px;border:.5px solid rgba(var(--gold-rgb),.07);border-radius:50%}.cta-title{font-family:"Noto Serif",serif;font-size:22px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:10px;text-align:center}.cta-title em{font-style:italic;color:var(--gold-light)}.cta-section .section-label-text{color:var(--gold-light)}.cta-desc{font-size:13px;color:#fff9;line-height:1.7;margin-bottom:24px;text-align:center}.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cta-card{background:#ffffff0d;border:.5px solid rgba(var(--gold-rgb),.25);border-radius:14px;padding:18px 14px;cursor:pointer;transition:background .2s}.cta-card:hover{background:rgba(var(--gold-rgb),0.1)}.cta-card-icon{font-size:22px;margin-bottom:10px}.cta-card-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px}.cta-card-desc{font-size:11px;color:#ffffff80;line-height:1.5}.footer{background:var(--ink-deep);padding:24px 20px;text-align:center}.footer-logo{font-family:"Noto Serif",serif;font-size:16px;color:var(--gold);margin-bottom:6px}.footer-sub{font-size:11px;color:var(--stone);margin-bottom:16px}.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}.footer-links a{font-size:11px;color:#fff6;text-decoration:none}.footer-links a:hover{color:var(--gold-light)}.footer-copy{font-size:10px;color:#fff3}.page{display:none;min-height:100vh;background:var(--paper)}.page.active{display:block}.page.active.page-enter{animation:pageEnter .26s cubic-bezier(.4,0,.2,1) both}.page.page-out{display:block!important;animation:pageLeave .16s ease both;pointer-events:none}@keyframes pageEnter{from{opacity:.15}to{opacity:1}}@keyframes pageLeave{from{opacity:1;transform:translateY(0)}to{opacity:.1;transform:translateY(-5px)}}.ls-hero{position:relative;height:340px;background:var(--ink);overflow:hidden;margin-top:0}.ls-hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#1a3a2a,#2c1810 60%,#4a2810)}.ls-hero-pattern{position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(45deg,var(--gold) 0px,var(--gold) 1px,transparent 1px,transparent 20px)}.ls-hero-ornament{position:absolute;top:16px;right:16px;font-family:"Noto Serif",serif;font-size:88px;color:rgba(var(--gold-rgb),0.07);line-height:1;-webkit-user-select:none;user-select:none}.ls-hero-content{position:absolute;bottom:0;left:0;right:0;padding:24px 20px}.ls-back-btn{display:inline-flex;align-items:center;gap:7px;background:#ffffff14;border:.5px solid rgba(255,255,255,.2);color:#fffc;font-size:13px;font-weight:500;padding:7px 14px;border-radius:20px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;margin-bottom:18px;-webkit-tap-highlight-color:transparent;transition:background .15s}.ls-back-btn:active{background:#ffffff26}.ls-hero-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:8px}.ls-hero-title{font-family:"Noto Serif",serif;font-size:28px;font-weight:700;color:#fff;line-height:1.2}.ls-hero-title em{color:var(--gold-light);font-style:italic}.ls-hero-sub{font-size:12px;color:#ffffff73;margin-top:6px}.ls-chapter{padding:32px 20px 0}.ls-chapter-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.ls-chapter-num{font-family:"Noto Serif",serif;font-size:52px;font-weight:700;color:#8b43131a;line-height:1;flex-shrink:0;margin-top:-8px}.ls-chapter-meta{flex:1}.ls-chapter-tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:5px}.ls-chapter-title{font-family:"Noto Serif",serif;font-size:18px;font-weight:700;color:var(--ink);line-height:1.3}.ls-chapter-title em{color:var(--clay);font-style:italic}.ls-chapter-line{height:2px;width:36px;background:var(--gold);border-radius:2px;margin-top:8px}.ls-body{font-family:"Noto Serif",serif;font-size:14.5px;line-height:1.9;color:var(--ink-mid);text-align:justify}.ls-body p{margin-bottom:14px}.ls-body p:last-child{margin-bottom:0}.ls-body strong{color:var(--ink);font-weight:600}.ls-sep{text-align:center;color:var(--gold);font-size:14px;letter-spacing:10px;padding:28px 0 0}.ls-quote{margin:28px 20px 0;padding:18px 18px 18px 20px;background:var(--cream);border-left:3px solid var(--gold);border-radius:0 12px 12px 0}.ls-quote-text{font-family:"Noto Serif",serif;font-size:14px;font-style:italic;line-height:1.8;color:var(--ink-mid)}.ls-sacphong{margin:32px 20px 0;background:var(--ink);border-radius:16px;padding:20px}.ls-sacphong-title{font-family:"Noto Serif",serif;font-size:14px;font-weight:600;color:var(--gold-light);margin-bottom:14px;text-align:center}.ls-sacphong-list{display:flex;flex-direction:column;gap:8px}.ls-sacphong-item{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#ffffff0a;border:.5px solid rgba(var(--gold-rgb),.2);border-radius:8px}.ls-sacphong-year{font-family:"Noto Serif",serif;font-size:12px;font-weight:600;color:var(--gold);min-width:38px;flex-shrink:0}.ls-sacphong-text{font-size:12px;color:#ffffffb3;line-height:1.5}.ls-source{margin:32px 20px 0;padding:16px 0 40px;border-top:.5px solid rgba(var(--clay-rgb),.15)}.ls-source-text{font-size:11px;color:var(--stone);line-height:1.7;font-style:italic;text-align:center}.vdp-hero{position:relative;height:280px;background:var(--ink);overflow:hidden}.vdp-hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#1a0e06,#2c1810 55%,#3d1f0a)}.vdp-hero-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0px,var(--gold) 1px,transparent 1px,transparent 22px)}.vdp-hero-ornament{position:absolute;top:12px;right:16px;font-size:96px;color:rgba(var(--gold-rgb),0.05);font-family:"Noto Serif",serif;-webkit-user-select:none;user-select:none;line-height:1}.vdp-hero-content{position:absolute;bottom:0;left:0;right:0;padding:24px 20px}.vdp-hero-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:8px}.vdp-hero-title{font-family:"Noto Serif",serif;font-size:30px;font-weight:700;color:var(--gold);line-height:1.2}.vdp-hero-title em{color:var(--gold);font-style:normal}.vdp-hero-sub{font-size:12px;color:#fff6;margin-top:8px;line-height:1.5}.vdp-stats{display:grid;grid-template-columns:repeat(3,1fr);background:rgba(var(--gold-rgb),0.06);border-top:.5px solid rgba(var(--clay-rgb),.15);border-bottom:.5px solid rgba(var(--clay-rgb),.15)}.vdp-stat{padding:14px 8px;text-align:center;border-right:.5px solid rgba(var(--clay-rgb),.1)}.vdp-stat:last-child{border-right:none}.vdp-stat-num{font-family:"Noto Serif",serif;font-size:24px;font-weight:700;color:var(--gold);line-height:1}.vdp-stat-label{font-size:10px;color:var(--stone);margin-top:4px;letter-spacing:.04em}.vdp-tabs{display:flex;background:#1a0f08;border-bottom:.5px solid rgba(255,255,255,.07);position:sticky;top:52px;z-index:9}.vdp-tab{flex:1;padding:13px 6px;text-align:center;font-size:12px;font-weight:600;color:#ffffff80;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-family:Be Vietnam Pro,sans-serif;letter-spacing:.02em;white-space:nowrap}.vdp-tab-body{padding:20px;display:none}.vdp-tab-body.active{display:block}.vdp-intro{padding:14px 16px;background:var(--cream);border:.5px solid rgba(var(--clay-rgb),.15);border-radius:12px;margin-bottom:16px;font-size:13px;color:var(--ink-mid);line-height:1.7;font-style:italic;font-family:"Noto Serif",serif}.vdp-card{display:flex;gap:14px;align-items:flex-start;padding:16px;background:#fff;border:.5px solid rgba(var(--clay-rgb),.12);border-radius:12px;margin-bottom:10px;transition:border-color .15s;box-shadow:0 1px 4px #0000000d}.vdp-card:hover{border-color:rgba(var(--gold-rgb),0.4)}.vdp-avatar-lg{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;font-family:"Noto Serif",serif}.vdp-avatar-ls{background:linear-gradient(135deg,#7a1818,#c0392b)}.vdp-avatar-tt{background:linear-gradient(135deg,#1a3a6a,#2980b9)}.vdp-avatar-dg{background:linear-gradient(135deg,#1a4a1a,#27ae60)}.vdp-card-info{flex:1}.vdp-card-name{font-size:14px;font-weight:700;color:var(--ink);font-family:"Noto Serif",serif;line-height:1.3;margin-bottom:3px}.vdp-card-detail{font-size:12px;color:var(--stone);line-height:1.5}.vdp-card-year{font-size:11px;color:var(--gold-light);margin-top:4px;font-weight:600}.vdp-card-badge{flex-shrink:0;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.03em;align-self:flex-start;margin-top:2px}.badge-ls{background:rgba(var(--vermillion-rgb),0.15);color:#e74c3c;border:.5px solid rgba(var(--vermillion-rgb),.3)}.badge-tt{background:#2980b926;color:#5dade2;border:.5px solid rgba(41,128,185,.3)}.badge-dg{background:#27ae6026;color:#58d68d;border:.5px solid rgba(39,174,96,.3)}@media(min-width:768px){.vdp-hero{height:380px}.vdp-hero-content{max-width:1280px;margin:0 auto;padding:0 48px 40px;position:relative;left:auto;transform:none;width:100%;box-sizing:border-box}.vdp-hero-title{font-size:42px}.vdp-stats{max-width:100%}.vdp-tabs{top:64px;background:#1a0f08}.vdp-tab-body{padding:28px 48px;max-width:900px;margin:0 auto}.vdp-tab{font-size:13px;padding:15px 10px}.vdp-card{padding:20px}.vdp-avatar-lg{width:56px;height:56px;font-size:18px}.vdp-card-name{font-size:15px}}.vd-page{background:var(--paper);min-height:100vh}.vd-hero{position:relative;min-height:280px;background:var(--ink);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}.vd-hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0d0804,#1e0f06 45%,#2c1810)}.vd-hero-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 1px,transparent 22px)}.vd-hero-ornament{position:absolute;top:0;right:0;width:200px;height:200px;opacity:.04;background:radial-gradient(circle,var(--gold) 0%,transparent 70%)}.vd-hero-content{position:relative;z-index:1;padding:24px 20px 28px}.vd-hero-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}.vd-hero-title{font-family:"Noto Serif",serif;font-size:32px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px}.vd-hero-title em{color:var(--gold-light);font-style:italic}.vd-hero-desc{font-size:13px;color:#ffffff73;line-height:1.6;max-width:480px}.vd-tabs{display:flex;background:var(--ink);border-bottom:.5px solid rgba(255,255,255,.08);position:sticky;top:52px;z-index:50;overflow-x:auto;scrollbar-width:none}.vd-tabs::-webkit-scrollbar{display:none}.vdp-tab{flex:1;min-width:100px;padding:13px 8px;text-align:center;font-size:12px;font-weight:600;color:#ffffff80;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-family:Be Vietnam Pro,sans-serif;white-space:nowrap;letter-spacing:.02em}.vdp-tab.active{color:var(--gold-light);border-bottom-color:var(--gold)}.vd-section{padding:24px 20px 40px}.vd-section-intro{margin-bottom:20px;padding:16px;border-radius:12px;background:rgba(var(--gold-rgb),0.07);border:.5px solid rgba(var(--gold-rgb),.2)}.vd-section-intro p{font-family:"Noto Serif",serif;font-size:13px;color:#fff9;line-height:1.8;margin:0;font-style:italic}.vd-section-intro strong{color:var(--gold-light);font-style:normal}.vd-count-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),0.12);border:.5px solid rgba(var(--gold-rgb),.3);color:var(--gold-light);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;margin-bottom:16px;letter-spacing:.04em}.vd-liet-sy-list{display:flex;flex-direction:column;gap:12px}.vd-liet-sy-card{background:var(--ink);border:.5px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;display:flex;align-items:stretch}.vd-liet-sy-accent{width:4px;flex-shrink:0;background:linear-gradient(to bottom,var(--gold),var(--clay))}.vd-liet-sy-body{padding:14px 14px 14px 16px;flex:1}.vd-liet-sy-name{font-family:"Noto Serif",serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}.vd-liet-sy-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.vd-meta-tag{font-size:10px;color:var(--gold-light);background:rgba(var(--gold-rgb),0.1);border:.5px solid rgba(var(--gold-rgb),.25);padding:2px 8px;border-radius:10px;letter-spacing:.04em;font-weight:600}.vd-liet-sy-desc{font-size:12px;color:#ffffff73;line-height:1.6}.vd-liet-sy-num{padding:14px 16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.vd-liet-sy-num span{font-family:"Noto Serif",serif;font-size:22px;font-weight:700;color:rgba(var(--gold-rgb),0.25)}.vd-person-grid{display:flex;flex-direction:column;gap:12px}.vd-person-card{background:var(--ink);border:.5px solid rgba(255,255,255,.08);border-radius:14px;padding:16px}.vd-person-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.vd-person-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--clay),var(--gold));display:flex;align-items:center;justify-content:center;font-family:"Noto Serif",serif;font-size:16px;font-weight:700;color:#fff}.vd-person-info{flex:1}.vd-person-name{font-family:"Noto Serif",serif;font-size:15px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px}.vd-person-title{font-size:11px;color:var(--gold-light);font-weight:600;letter-spacing:.04em}.vd-person-year{font-size:11px;color:#ffffff4d;margin-top:2px}.vd-person-achievement{font-size:13px;color:#fff9;line-height:1.6;padding-top:10px;border-top:.5px solid rgba(255,255,255,.06)}.vd-person-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.vd-tag{font-size:10px;color:#ffffff73;background:#ffffff0f;border-radius:8px;padding:3px 8px;letter-spacing:.03em}.vd-donate-list{display:flex;flex-direction:column;gap:10px}.vd-donate-card{background:var(--ink);border:.5px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px}.vd-donate-rank{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-family:"Noto Serif",serif}.vd-donate-rank.gold{background:rgba(var(--gold-rgb),0.15);color:var(--gold);border:1px solid rgba(var(--gold-rgb),.4)}.vd-donate-rank.silver{background:#b4b4b41a;color:silver;border:1px solid rgba(180,180,180,.3)}.vd-donate-rank.bronze{background:#8b5a2b26;color:#cd7f32;border:1px solid rgba(139,90,43,.3)}.vd-donate-rank.normal{background:#ffffff0d;color:#ffffff4d;border:1px solid rgba(255,255,255,.08)}.vd-donate-info{flex:1}.vd-donate-name{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}.vd-donate-desc{font-size:11px;color:#fff6;line-height:1.5}.vd-donate-amount{font-family:"Noto Serif",serif;font-size:13px;font-weight:700;color:var(--gold-light);text-align:right;flex-shrink:0}.vd-donate-amount small{display:block;font-size:10px;color:#ffffff4d;font-family:Be Vietnam Pro,sans-serif;font-weight:400}.vd-nominate-cta{margin-top:24px;padding:18px;background:rgba(var(--gold-rgb),0.06);border:.5px dashed rgba(var(--gold-rgb),.3);border-radius:14px;text-align:center}.vd-nominate-cta p{font-size:13px;color:#fff6;margin-bottom:12px;line-height:1.6}.vd-nominate-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),0.15);border:.5px solid rgba(var(--gold-rgb),.4);color:var(--gold-light);font-size:13px;font-weight:600;padding:10px 20px;border-radius:20px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif}@media(min-width:768px){.vd-hero{min-height:360px}.vd-hero-content{padding:0 48px 48px;max-width:1280px;margin:0 auto}.vd-hero-title{font-size:48px}.vd-tabs{top:64px}.vdp-tab{font-size:13px;padding:15px 20px}.vd-section{padding:32px 48px 56px;max-width:1280px;margin:0 auto}.vd-liet-sy-list,.vd-person-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.vd-donate-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}}.lhp-hero{position:relative;height:320px;background:var(--ink);overflow:hidden}.lhp-hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,#1a0f08,#2c1810,#4a2810)}.lhp-hero-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0px,var(--gold) 1px,transparent 1px,transparent 22px)}.lhp-hero-ornament{position:absolute;top:12px;right:16px;font-size:88px;color:rgba(var(--gold-rgb),0.06);font-family:"Noto Serif",serif;-webkit-user-select:none;user-select:none;line-height:1}.lhp-hero-content{position:absolute;bottom:0;left:0;right:0;padding:24px 20px}.lhp-hero-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:8px}.lhp-hero-title{font-family:"Noto Serif",serif;font-size:30px;font-weight:700;color:#fff;line-height:1.2}.lhp-hero-title em{color:var(--gold-light);font-style:italic}.lhp-hero-sub{font-size:12px;color:#ffffff73;margin-top:8px}.lhp-date-banner{background:rgba(var(--gold-rgb),0.12);border-top:.5px solid rgba(var(--gold-rgb),.25);border-bottom:.5px solid rgba(var(--gold-rgb),.25);padding:16px 20px;display:flex;align-items:center;gap:16px}.lhp-date-big{font-family:"Noto Serif",serif;font-size:44px;font-weight:700;color:var(--gold);line-height:1;flex-shrink:0}.lhp-date-info strong{display:block;font-size:14px;color:var(--gold-light);margin-bottom:3px}.lhp-date-info span{font-size:12px;color:#ffffff8c;line-height:1.5}.lhp-section{padding:28px 20px;border-bottom:.5px solid rgba(255,255,255,.06)}.lhp-section-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}.lhp-section-title{font-family:"Noto Serif",serif;font-size:20px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:12px}.lhp-section-title em{color:var(--gold-light);font-style:italic}.lhp-body{font-family:"Noto Serif",serif;font-size:14px;line-height:1.9;color:#ffffffb3;text-align:justify}.lhp-body p{margin-bottom:12px}.lhp-body p:last-child{margin-bottom:0}.lhp-body strong{color:var(--gold-light);font-weight:600}.lhp-steps{display:flex;flex-direction:column;gap:12px;margin-top:16px}.lhp-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.08);border-radius:12px}.lhp-step-num{width:32px;height:32px;flex-shrink:0;background:rgba(var(--gold-rgb),0.15);border:1px solid rgba(var(--gold-rgb),.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gold);font-family:"Noto Serif",serif}.lhp-step-body{flex:1}.lhp-step-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px}.lhp-step-desc{font-size:13px;color:#fff9;line-height:1.6}.lhp-items-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.lhp-item-card{background:#ffffff0a;border:.5px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 12px}.lhp-item-icon{font-size:22px;margin-bottom:8px}.lhp-item-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:3px}.lhp-item-desc{font-size:11px;color:#ffffff73;line-height:1.5}.lhp-quote{margin:0 20px;padding:18px 18px 18px 20px;background:rgba(var(--gold-rgb),0.08);border-left:3px solid var(--gold);border-radius:0 12px 12px 0}.lhp-quote-text{font-family:"Noto Serif",serif;font-size:14px;font-style:italic;line-height:1.8;color:#ffffffbf}.lhp-gallery{padding:20px}.lhp-gallery-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}.lhp-info-cards{display:flex;flex-direction:column;gap:10px;margin-top:14px}.lhp-info-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.08);border-radius:10px}.lhp-info-icon{font-size:20px;flex-shrink:0}.lhp-info-label{font-size:10px;color:rgba(var(--gold-rgb),0.7);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.lhp-info-value{font-size:13px;color:#fff;margin-top:2px}@media(min-width:768px){.lhp-hero{height:440px}.lhp-hero-content{max-width:1280px;margin:0 auto;position:relative;left:auto;transform:none;padding:0 48px 56px;width:100%;box-sizing:border-box}.lhp-hero-title{font-size:44px}.lhp-date-banner{padding:20px 48px}.lhp-section{padding:40px 48px;max-width:1280px;margin:0 auto}.lhp-quote{margin:0 48px}.lhp-gallery{padding:28px 48px}.lhp-steps{display:grid;grid-template-columns:1fr 1fr}.lhp-items-grid{grid-template-columns:repeat(4,1fr)}.lhp-info-cards{display:grid;grid-template-columns:repeat(3,1fr)}.lhp-body{font-size:15px}}.nav-user{display:none;align-items:center;gap:10px;position:relative}.nav-user.visible{display:flex}.nav-user-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);border:2px solid rgba(var(--gold-rgb),.5);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .15s;flex-shrink:0;font-family:Be Vietnam Pro,sans-serif;-webkit-user-select:none;user-select:none}.nav-user-avatar:hover{border-color:var(--gold)}.nav-user-name{font-size:13px;color:#ffffffd9;font-weight:500;cursor:pointer}.nav-user-name:hover{color:var(--gold-light)}.nav-user-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:200px;background:var(--ink-deep);border:.5px solid rgba(var(--gold-rgb),.25);border-radius:12px;box-shadow:0 8px 32px #00000080;overflow:hidden;z-index:200;animation:dropdownIn .15s ease}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.nav-user-dropdown.open{display:block}.nav-dropdown-header{padding:14px 16px 12px;border-bottom:.5px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}.nav-dropdown-avatar{width:36px;height:36px;border-radius:50%;background:var(--gold);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--ink);font-family:Be Vietnam Pro,sans-serif}.nav-dropdown-name{font-size:13px;font-weight:600;color:#fff;line-height:1.3}.nav-dropdown-sub{font-size:11px;color:#ffffff59;margin-top:1px}.nav-dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-size:13px;font-weight:500;color:#ffffffbf;font-family:Be Vietnam Pro,sans-serif;transition:background .12s;border:none;background:none;width:100%;text-align:left}.nav-dropdown-item:hover{background:#ffffff0d;color:#fff}.nav-dropdown-item.danger{color:rgba(var(--vermillion-rgb),0.8)}.nav-dropdown-item.danger:hover{background:rgba(var(--vermillion-rgb),0.08);color:var(--vermillion)}.nav-dropdown-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}.nav-dropdown-divider{height:.5px;background:#ffffff12;margin:2px 0}.nav-user-mobile{display:none;width:32px;height:32px;border-radius:50%;background:var(--gold);border:2px solid rgba(var(--gold-rgb),.5);align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;font-family:Be Vietnam Pro,sans-serif}.nav-user-mobile.visible{display:flex}.profile-page{min-height:100vh;background:var(--paper)}.profile-hero{background:var(--ink);padding:0;position:relative;overflow:hidden}.profile-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a0f08,#2c1810 60%,#3a1a0a)}.profile-hero-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0px,var(--gold) 1px,transparent 1px,transparent 22px)}.profile-hero-content{position:relative;z-index:1;padding:72px 20px 20px}.profile-avatar-wrap{display:flex;align-items:flex-end;gap:16px;padding-bottom:0}.profile-avatar{width:80px;height:80px;border-radius:50%;background:var(--gold);border:3px solid rgba(var(--gold-rgb),.6);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--ink);font-family:"Noto Serif",serif;flex-shrink:0;position:relative}.profile-avatar-edit{position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:var(--ink);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}.profile-info{flex:1;padding-bottom:4px}.profile-name{font-family:"Noto Serif",serif;font-size:20px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:3px}.profile-role{font-size:11px;color:var(--gold-light);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.profile-join{font-size:11px;color:#ffffff59;margin-top:3px}.profile-role-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;font-family:Be Vietnam Pro,sans-serif;margin-bottom:16px}.profile-role-badge.khach{background:#2980b914;border:.5px solid rgba(41,128,185,.3);color:#2980b9}.profile-role-badge.thanhvien{background:rgba(var(--gold-rgb),0.1);border:.5px solid rgba(var(--gold-rgb),.35);color:var(--clay)}.profile-community-card{margin-top:14px;background:linear-gradient(135deg,#fdf6e3,#faf0d7);border:1px solid rgba(var(--gold-rgb),.25);border-radius:14px;padding:18px 16px}.profile-community-title{font-family:"Noto Serif",serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}.profile-community-desc{font-size:12px;color:var(--stone);line-height:1.6;margin-bottom:14px}.profile-community-perks{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.profile-community-perk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-mid)}.profile-community-perk span{font-size:14px}.profile-community-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--clay),var(--gold));border:none;border-radius:10px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;font-family:Be Vietnam Pro,sans-serif}.profile-stats{display:flex;gap:0;border-top:.5px solid rgba(255,255,255,.08);margin-top:16px}.profile-stat{flex:1;padding:12px 8px;text-align:center;border-right:.5px solid rgba(255,255,255,.06)}.profile-stat:last-child{border-right:none}.profile-stat-num{font-family:"Noto Serif",serif;font-size:18px;font-weight:700;color:var(--gold);line-height:1}.profile-stat-label{font-size:10px;color:#ffffff59;margin-top:3px;letter-spacing:.04em}.profile-tabs{display:flex;background:var(--ink);border-bottom:.5px solid rgba(255,255,255,.08);position:sticky;top:52px;z-index:9}.profile-tabs-inner{display:flex;flex:1;width:100%}.profile-tab{flex:1;padding:12px 6px;text-align:center;font-size:12px;font-weight:500;color:#fff6;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-family:Be Vietnam Pro,sans-serif}.profile-tab.active{color:var(--gold-light);border-bottom-color:var(--gold)}.profile-body{padding:20px}.profile-info-card{background:#fff;border:.5px solid rgba(var(--clay-rgb),.12);border-radius:14px;padding:18px;margin-bottom:14px}.profile-info-card-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:14px}.profile-field{margin-bottom:14px}.profile-field:last-child{margin-bottom:0}.profile-field-label{font-size:11px;color:var(--stone);margin-bottom:4px}.profile-field-value{font-size:14px;color:var(--ink);font-weight:500}.profile-field-input{width:100%;padding:10px 12px;background:var(--paper);border:.5px solid rgba(var(--clay-rgb),.2);border-radius:8px;font-size:14px;color:var(--ink);font-family:Be Vietnam Pro,sans-serif;outline:none;transition:border-color .2s}.profile-field-input:focus{border-color:var(--clay)}.profile-edit-btn{display:flex;align-items:center;gap:6px;justify-content:center;width:100%;padding:11px;margin-top:14px;background:transparent;border:.5px solid rgba(var(--clay-rgb),.25);border-radius:8px;font-size:13px;font-weight:600;color:var(--clay);cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:background .15s}.profile-edit-btn:hover{background:#8b43130d}.profile-save-btn{width:100%;padding:12px;margin-top:10px;background:var(--clay);border:none;border-radius:8px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:opacity .15s}.profile-save-btn:active{opacity:.85}.profile-activity{display:flex;flex-direction:column;gap:10px}.profile-activity-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:#fff;border:.5px solid rgba(var(--clay-rgb),.1);border-radius:10px}.profile-activity-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}.profile-activity-text{flex:1}.profile-activity-title{font-size:13px;font-weight:500;color:var(--ink)}.profile-activity-time{font-size:11px;color:var(--stone);margin-top:2px}.profile-badges{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profile-badge{background:#fff;border:.5px solid rgba(var(--clay-rgb),.12);border-radius:12px;padding:14px;text-align:center}.profile-badge-icon{font-size:24px;margin-bottom:6px}.profile-badge-name{font-size:12px;font-weight:600;color:var(--ink)}.profile-badge-desc{font-size:10px;color:var(--stone);margin-top:2px}.profile-badge.locked{opacity:.4}.profile-setting-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:.5px solid rgba(var(--clay-rgb),.08)}.profile-setting-item:last-child{border-bottom:none}.profile-setting-label{font-size:14px;color:var(--ink)}.profile-setting-desc{font-size:11px;color:var(--stone);margin-top:2px}.profile-toggle{width:44px;height:24px;border-radius:12px;background:#8b431326;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}.profile-toggle.on{background:var(--clay)}.profile-toggle:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.profile-toggle.on:after{transform:translate(20px)}.profile-logout-btn{width:100%;padding:13px;margin-top:8px;background:rgba(var(--vermillion-rgb),0.08);border:.5px solid rgba(var(--vermillion-rgb),.25);border-radius:10px;font-size:14px;font-weight:600;color:var(--vermillion);cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:background .15s}.profile-logout-btn:active{background:rgba(var(--vermillion-rgb),0.15)}@media(min-width:768px){.profile-hero-content{max-width:1280px;margin:0 auto;padding:92px 48px 28px}.profile-avatar{width:100px;height:100px;font-size:36px}.profile-name{font-size:26px}.profile-tabs{top:64px}.profile-tabs-inner{max-width:1280px;margin:0 auto;padding:0 48px}.profile-tabs .profile-tab{font-size:13px;padding:14px 10px}.profile-body{padding:28px 48px;max-width:800px;margin:0 auto}.profile-badges{grid-template-columns:repeat(4,1fr)}.nav-user{display:none}.nav-user.visible{display:flex}}.auth-page{min-height:100vh;background:var(--ink);display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-bg-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(45deg,var(--gold) 0px,var(--gold) 1px,transparent 1px,transparent 24px);pointer-events:none}.auth-bg-circle{position:absolute;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.08);pointer-events:none}.auth-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:relative;z-index:1;border-bottom:.5px solid rgba(255,255,255,.06)}.auth-nav-logo{display:flex;align-items:center;gap:8px;cursor:pointer}.auth-nav-logo .seal{width:32px;height:32px;border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold);font-family:"Noto Serif",serif}.auth-nav-logo span{font-size:13px;font-weight:600;color:#fff}.auth-nav-logo small{display:block;font-size:9px;color:var(--gold-light);letter-spacing:.08em}.auth-nav-back{font-size:12px;color:#ffffff80;cursor:pointer;display:flex;align-items:center;gap:6px;background:none;border:none;font-family:Be Vietnam Pro,sans-serif}.auth-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 48px;position:relative;z-index:1}.auth-seal{width:64px;height:64px;border:2px solid rgba(var(--gold-rgb),.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gold);font-family:"Noto Serif",serif;margin-bottom:16px;background:rgba(var(--gold-rgb),0.06)}.auth-title{font-family:"Noto Serif",serif;font-size:22px;font-weight:700;color:#fff;text-align:center;margin-bottom:4px}.auth-subtitle{font-size:13px;color:#ffffff73;text-align:center;margin-bottom:32px}.auth-card{width:100%;max-width:360px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 18px}.auth-field{margin-bottom:12px}.auth-field-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#ffffff8c;margin-bottom:6px;display:block}.auth-field-wrap{position:relative;display:flex;align-items:center}.auth-field-icon{position:absolute;left:11px;font-size:14px;opacity:.4;pointer-events:none}.auth-input{width:100%;background:#ffffff12;border:.5px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 12px 10px 34px;font-size:14px;color:#fff;font-family:Be Vietnam Pro,sans-serif;outline:none;transition:border-color .2s,background .2s}.auth-input::placeholder{color:#ffffff38;font-size:13px}.auth-input:focus{border-color:rgba(var(--gold-rgb),0.55);background:#ffffff1a}.auth-input-optional{padding-left:12px}.auth-field-hint{font-size:11px;color:#ffffff47;margin-top:4px;line-height:1.4}.auth-divider{height:.5px;background:#ffffff14;margin:14px 0}.auth-submit{width:100%;padding:12px;background:var(--gold);border:none;border-radius:8px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;font-family:Be Vietnam Pro,sans-serif;letter-spacing:.02em;transition:opacity .15s,transform .1s}.auth-submit:hover{opacity:.9}.auth-submit:active{transform:scale(.98)}.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:#fff6}.auth-switch-link{color:var(--gold-light);font-weight:600;cursor:pointer;text-decoration:none}.auth-switch-link:hover{text-decoration:underline}.auth-forgot{text-align:right;margin-top:-8px;margin-bottom:20px}.auth-forgot a{font-size:12px;color:rgba(var(--gold-rgb),0.7);cursor:pointer;text-decoration:none}.auth-forgot a:hover{color:var(--gold)}.reg-role-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.reg-role-btn{padding:12px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#ffffff80;font-size:13px;font-weight:500;cursor:pointer;text-align:center;font-family:Be Vietnam Pro,sans-serif;transition:all .2s}.reg-role-btn .role-icon{font-size:20px;display:block;margin-bottom:5px}.reg-role-btn .role-label{display:block;font-size:12px;font-weight:600}.reg-role-btn .role-sub{display:block;font-size:10px;margin-top:2px;opacity:.6}.reg-role-btn.active{border-color:rgba(var(--gold-rgb),0.6);background:rgba(var(--gold-rgb),0.12);color:var(--gold-light)}.ds-page-hero{background:var(--ink);padding:52px 20px 40px;position:relative;overflow:hidden}.ds-page-hero:before{content:"";position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 30L15 15L30 0L45 15L30 30zm0 0L15 45L30 60L45 45L30 30z' fill='%23C9991A'/%3E%3C/svg%3E")}.ds-page-hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}.ds-hero-tag{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}.ds-hero-title{font-family:"Noto Serif",serif;font-size:28px;font-weight:700;color:var(--gold-light);line-height:1.2;margin-bottom:8px}.ds-hero-desc{font-size:13px;color:#f0e8d080;line-height:1.7;font-weight:300}.ds-filter-bar{background:#fff;border-bottom:1px solid rgba(var(--clay-rgb),.12);padding:10px 20px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;justify-content:center}.ds-filter-bar::-webkit-scrollbar{display:none}.ds-filter-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(var(--clay-rgb),.2);font-size:12px;color:var(--stone);cursor:pointer;transition:all .2s;font-family:Be Vietnam Pro,sans-serif}.ds-filter-chip.active,.ds-filter-chip:hover{background:var(--clay);color:#fff;border-color:var(--clay)}.ds-relics-list{max-width:860px;margin:0 auto;padding:24px 20px 80px;display:flex;flex-direction:column;gap:14px}.ds-relic-card{background:#fff;border:.5px solid rgba(var(--clay-rgb),.15);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;display:flex}.ds-relic-card:hover{box-shadow:0 6px 24px #1a12081a;transform:translateY(-2px)}.ds-relic-thumb{width:110px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.ds-relic-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;justify-content:space-between}.ds-relic-type{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}.ds-relic-type:before{content:"";width:12px;height:1px;background:var(--clay)}.ds-relic-name{font-family:"Noto Serif",serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.3}.ds-relic-excerpt{font-size:11px;color:var(--stone);line-height:1.55}.ds-relic-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:.5px solid rgba(var(--clay-rgb),.1)}.ds-relic-date{font-size:11px;color:var(--stone)}.ds-relic-arrow{font-size:14px;color:var(--clay)}.ds-detail-hero{width:100%;height:260px;position:relative;overflow:hidden}.ds-detail-hero svg{width:100%;height:100%}.ds-detail-era{position:absolute;top:16px;right:16px;background:var(--clay);color:#fff;border-radius:3px;padding:3px 10px;font-size:11px;font-weight:600;font-family:Be Vietnam Pro,sans-serif}.ds-detail-badge{position:absolute;bottom:16px;left:20px;background:#1a1208f0;border:1px solid rgba(var(--gold-rgb),.4);border-radius:6px;padding:10px 16px}.ds-detail-badge-tag{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}.ds-detail-badge-name{font-family:"Noto Serif",serif;font-size:16px;color:#fff;font-weight:700}.ds-detail-body{max-width:860px;margin:0 auto;padding:0 20px}.ds-detail-quick{display:flex;background:#fff;border:.5px solid rgba(var(--clay-rgb),.15);border-radius:10px;margin:18px 0 0;overflow:hidden}.ds-dq-item{flex:1;padding:14px 0 10px;text-align:center;border-right:.5px solid rgba(var(--clay-rgb),.1)}.ds-dq-item:last-child{border-right:none}.ds-dq-num{font-family:"Noto Serif",serif;font-size:18px;font-weight:700;color:var(--clay)}.ds-dq-label{font-size:9px;color:var(--stone);margin-top:2px;letter-spacing:.04em}.ds-detail-tabs{display:flex;border-bottom:1px solid rgba(var(--clay-rgb),.15);margin-top:20px;overflow-x:auto;scrollbar-width:none}.ds-detail-tabs::-webkit-scrollbar{display:none}.ds-dtab{flex-shrink:0;padding:11px 18px;font-size:12px;font-weight:600;color:var(--stone);cursor:pointer;border-bottom:2px solid transparent;letter-spacing:.04em;transition:all .2s;white-space:nowrap;font-family:Be Vietnam Pro,sans-serif}.ds-dtab.active{color:var(--clay);border-bottom-color:var(--clay)}.ds-dtab-content{display:none;padding:24px 0 80px}.ds-dtab-content.active{display:block}.ds-block-label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:10px}.ds-block-label:before{content:"";width:14px;height:1px;background:var(--gold)}.ds-prose{font-family:"Noto Serif",serif;font-size:15px;line-height:1.85;color:var(--ink-mid)}.ds-prose p{margin-bottom:14px}.ds-pull-quote{margin:20px 0;padding:14px 18px;border-left:3px solid var(--gold);background:var(--cream);border-radius:0 8px 8px 0}.ds-pull-quote p{font-family:"Noto Serif",serif;font-size:14px;font-style:italic;color:var(--ink);line-height:1.65;margin:0}.ds-pull-quote cite{display:block;font-size:10px;color:var(--stone);margin-top:6px;font-style:normal;letter-spacing:.04em}.ds-mini-tl{margin:18px 0}.ds-mtl-item{display:flex;gap:12px;margin-bottom:16px}.ds-mtl-left{display:flex;flex-direction:column;align-items:center;gap:4px}.ds-mtl-year{font-family:"Noto Serif",serif;font-size:12px;font-weight:700;color:var(--clay);white-space:nowrap}.ds-mtl-dot{width:9px;height:9px;background:var(--gold);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.2);flex-shrink:0}.ds-mtl-text{font-size:12px;color:var(--ink-mid);line-height:1.55;padding-top:1px}.ds-mtl-text strong{display:block;font-weight:600;color:var(--ink);margin-bottom:1px;font-size:13px}.ds-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.ds-spec-card{background:#fff;border:.5px solid rgba(var(--clay-rgb),.12);border-radius:8px;padding:12px 14px}.ds-spec-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:4px}.ds-spec-val{font-size:14px;font-weight:600;color:var(--ink);font-family:"Noto Serif",serif}.ds-arch-feat{display:flex;gap:12px;padding:14px 0;border-bottom:.5px solid rgba(var(--clay-rgb),.1)}.ds-arch-feat:last-child{border-bottom:none}.ds-af-icon{width:38px;height:38px;background:var(--cream);border:.5px solid rgba(var(--clay-rgb),.15);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.ds-af-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}.ds-af-desc{font-size:11px;color:var(--stone);line-height:1.5}.ds-sched-list{list-style:none}.ds-sched-item{display:flex;gap:12px;padding:12px 0;border-bottom:.5px solid rgba(var(--clay-rgb),.1)}.ds-sched-item:last-child{border-bottom:none}.ds-sched-day{flex-shrink:0;width:50px;font-family:"Noto Serif",serif;font-size:12px;font-weight:700;color:var(--clay);text-align:right;padding-top:1px}.ds-sched-dot-col{flex-shrink:0;width:18px;display:flex;flex-direction:column;align-items:center}.ds-sched-dot{width:9px;height:9px;background:var(--gold);border-radius:50%;margin-top:3px;box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.18)}.ds-sched-name{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}.ds-sched-desc{font-size:11px;color:var(--stone);line-height:1.5}.ds-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.ds-chip{background:#fff;border:.5px solid rgba(var(--clay-rgb),.2);border-radius:16px;padding:4px 12px;font-size:11px;color:var(--ink-mid);font-family:Be Vietnam Pro,sans-serif}.ds-chip.g{background:var(--cream);border-color:#8b43134d;font-weight:600;color:var(--clay)}.ds-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.ds-gal-item{border-radius:6px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:4/3;background:var(--ink)}.ds-gal-item:first-child{grid-column:span 2;aspect-ratio:16/7}.ds-gal-cap{position:absolute;bottom:0;left:0;right:0;padding:6px 10px;background:linear-gradient(transparent,#1a1208cc);font-size:10px;color:#ffffffbf}.ds-map-block{border-radius:8px;overflow:hidden;border:.5px solid rgba(var(--clay-rgb),.15);margin:12px 0}.ds-map-ph{height:180px}.ds-map-info{padding:10px 14px;background:#fff;display:flex;align-items:center;justify-content:space-between}.ds-map-addr strong{display:block;font-size:13px;color:var(--ink);font-weight:600}.ds-map-addr span{font-size:11px;color:var(--stone)}.ds-map-dir{background:var(--clay);color:#fff;border:none;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:Be Vietnam Pro,sans-serif}.ds-other-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.ds-other-scroll::-webkit-scrollbar{display:none}.ds-other-card{flex-shrink:0;width:130px;border:.5px solid rgba(var(--clay-rgb),.15);border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;transition:all .2s}.ds-other-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #1a120814}.ds-other-thumb{height:75px;display:flex;align-items:center;justify-content:center;background:var(--cream)}.ds-other-info{padding:7px 10px}.ds-other-type{font-size:8px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;font-weight:700}.ds-other-name{font-family:"Noto Serif",serif;font-size:12px;color:var(--ink);margin-top:2px;line-height:1.3}.ds-action-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:.5px solid rgba(var(--clay-rgb),.15);padding:10px 20px 16px;display:flex;gap:10px;z-index:100;box-shadow:0 -4px 16px #1a12080f}.ds-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:8px;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:Be Vietnam Pro,sans-serif}.ds-action-btn.outline{background:var(--cream);color:var(--ink);border:.5px solid rgba(var(--clay-rgb),.2)}.ds-action-btn.solid{background:var(--clay);color:#fff}.ds-lh-header{background:var(--ink);margin:0 -20px 18px;padding:18px 20px 16px}.ds-lh-title{font-family:"Noto Serif",serif;font-size:20px;color:var(--gold-light);font-weight:700}.ds-lh-sub{font-size:11px;color:#f0e8d073;margin-top:4px}@media(min-width:768px){.ds-detail-hero{height:380px}.ds-hero-title{font-size:42px}.ds-page-hero{padding:60px 0 50px}.ds-page-hero-inner{max-width:1280px;padding:0 48px}.ds-filter-bar{padding:10px 48px;justify-content:center}.ds-relics-list{padding:32px 48px 80px;max-width:1280px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.ds-relic-card{flex-direction:column}.ds-relic-thumb{width:100%;height:160px}.ds-detail-body{padding:0 48px;max-width:1280px}.ds-detail-badge{left:48px}.ds-detail-era{right:48px}}.auth-optional-tag{font-size:10px;color:#ffffff40;background:#ffffff0f;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}.qmk-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.qmk-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;background:#ffffff0a;border:.5px solid rgba(255,255,255,.1);border-radius:10px;color:#ffffff80;font-size:13px;font-weight:500;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:all .2s}.qmk-tab.active{background:rgba(var(--gold-rgb),0.12);border-color:rgba(var(--gold-rgb),0.45);color:var(--gold-light)}.qmk-tab-icon{font-size:16px}@media(min-width:768px){.auth-body{padding:48px 24px 80px}.auth-card{padding:36px 32px}.auth-title{font-size:28px}}@media(min-width:768px){body{max-width:100%;overflow-x:hidden}.nav{max-width:100%;padding:0;height:64px}.nav-inner{max-width:1280px;margin:0 auto;padding:0 48px;height:64px;display:flex;align-items:center;width:100%}.nav-logo .seal{width:38px;height:38px;font-size:15px}.nav-logo span{font-size:15px}.nav-logo small{font-size:10px}.hamburger{display:none}.nav-links{display:flex;align-items:center;gap:0;flex:1;justify-content:center}.nav-link{font-size:13px;font-weight:500;color:#ffffffa6;padding:0 16px;height:64px;display:flex;align-items:center;cursor:pointer;transition:color .15s;letter-spacing:.02em;white-space:nowrap;border-bottom:2px solid transparent}.nav-link:hover{color:#fff}.nav-link.active{color:var(--gold-light);border-bottom-color:var(--gold)}.nav-actions{display:flex;gap:10px;align-items:center}.nav-btn{padding:8px 18px;font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;font-family:Be Vietnam Pro,sans-serif;transition:opacity .15s}.nav-btn:hover{opacity:.85}.nav-btn-login{background:var(--gold);border:1px solid var(--gold);color:var(--ink);font-weight:600}.nav-btn-register{background:transparent;border:1.5px solid var(--gold-light);color:var(--gold-light)}.menu-backdrop,.menu-drawer{display:none!important}.hero{height:100vh;min-height:600px;max-height:800px}.hero-content{max-width:1280px;margin:0 auto;left:50%;transform:translate(-50%);padding:0 48px 64px;align-items:center;justify-content:flex-end;gap:22px}.hero-badge{font-size:12px;padding:6px 16px}.hero-poem{text-align:center;width:auto;max-width:520px}.hero-poem .poem-line{font-size:15px}.hero-ornament{justify-content:center;max-width:260px}.hero-btns{width:auto;display:flex;gap:12px}.hero-btns button{padding:13px 28px;font-size:14px;width:auto}.section-inner{max-width:1280px;margin:0 auto}.section{padding:72px 48px}.section-title{font-size:32px;text-align:left}.khi-thieng{background:var(--paper)}.khi-thieng .section-inner{display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:start;max-width:1280px;margin:0 auto}.khi-thieng-right{display:block}.khi-mobile-stats,.khi-plaque,.khi-chieuthu-wrap{display:none}.khi-thieng-right{--notch: 14px;background:var(--ink);padding:32px;position:sticky;top:84px;-webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000) top right,radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000) bottom right;-webkit-mask-size:51% 51%;-webkit-mask-repeat:no-repeat;mask:radial-gradient(circle var(--notch) at 0 0,#0000 98%,#000) top left,radial-gradient(circle var(--notch) at 100% 0,#0000 98%,#000) top right,radial-gradient(circle var(--notch) at 0 100%,#0000 98%,#000) bottom left,radial-gradient(circle var(--notch) at 100% 100%,#0000 98%,#000) bottom right;mask-size:51% 51%;mask-repeat:no-repeat}.khi-thieng p{font-size:16px}.khi-thieng-ornament{display:none}.khi-thieng .section-title{text-align:left;font-size:34px;margin-bottom:16px}.khi-thieng .section-label{justify-content:center;margin-bottom:20px}.khi-thieng .section-label-line{display:block}.khi-thieng-quote{font-family:"Noto Serif",serif;font-size:15px;font-style:italic;color:#ffffffbf;line-height:1.8;border-left:2px solid var(--gold);padding-left:16px;margin-bottom:20px}.khi-thieng-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.khi-stat{text-align:center;padding:14px 8px;background:#ffffff0a;border:.5px solid rgba(var(--gold-rgb),.2);border-radius:10px}.khi-stat-num{font-family:"Noto Serif",serif;font-size:24px;font-weight:700;color:var(--gold);line-height:1}.khi-stat-label{font-size:11px;color:#ffffff80;margin-top:4px}.di-san-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}.di-san-card{flex-direction:column;height:auto;border-radius:16px}.di-san-card-img{width:100%;height:200px}.di-san-card-img img{width:100%!important;height:200px!important;object-fit:cover}.di-san-card-body{padding:18px 20px 20px;gap:10px}.di-san-card-title{font-size:17px}.di-san-card-desc{font-size:13px}.di-san-card-link{font-size:12px}.le-hoi .section-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:1280px;margin:0 auto}.le-hoi-gallery{display:block;margin-top:20px}.lh-carousel{position:relative;display:flex;align-items:center;gap:12px}.lh-stage{flex:1;overflow:hidden;min-height:200px;border-radius:12px}.lh-card{border-radius:12px;overflow:hidden;transition:opacity .35s ease;width:100%}.lh-card[data-pos=prev],.lh-card[data-pos=next]{display:none}.lh-card[data-pos=active]{display:block;width:100%;opacity:1;filter:brightness(1);box-shadow:0 8px 32px #00000080}.lh-img-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}.lh-img-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:#0000008c;font-size:11px;color:#ffffffe0;font-family:"Noto Serif",serif;font-style:italic;text-align:center}.lh-arrow{width:40px;height:40px;flex-shrink:0;background:rgba(var(--gold-rgb),0.12);border:1px solid rgba(var(--gold-rgb),.35);color:var(--gold-light);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:sans-serif}.lh-arrow:hover{background:rgba(var(--gold-rgb),0.28)}.lh-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}.lh-dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--gold-rgb),0.3);cursor:pointer;transition:background .2s,transform .2s}.lh-dot.active{background:var(--gold);transform:scale(1.35)}.le-hoi .section-title{text-align:left}.le-hoi .section-label{justify-content:flex-start}.le-hoi-date{margin-bottom:24px}.le-hoi-date-num{font-size:40px}.le-hoi-desc{font-size:15px}.ritual-text{font-size:14px}.timeline-line{display:none}.timeline{padding:72px 0}.timeline .section-inner{max-width:1280px;margin:0 auto;padding:0 48px}.timeline-line{position:absolute;left:50%;transform:translate(-50%);top:130px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),var(--clay),rgba(var(--clay-rgb),.15))}.timeline-items{position:relative;max-width:1000px;margin:0 auto}.timeline-items:before{content:"";position:absolute;left:50%;transform:translate(-50%);top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--gold),var(--clay),rgba(var(--clay-rgb),.1));z-index:0}.timeline-item{display:flex;justify-content:flex-end;padding-bottom:52px;padding-right:calc(50% + 40px);position:relative}.timeline-item:nth-child(2n){justify-content:flex-start;padding-right:0;padding-left:calc(50% + 40px)}.timeline-dot-col{position:absolute;left:50%;transform:translate(-50%);top:4px;width:auto;z-index:2;display:flex;align-items:center;justify-content:center}.timeline-dot{border:2px solid var(--paper);margin-top:0}.timeline-body{width:100%;background:#fff;border:.5px solid rgba(var(--clay-rgb),.15);border-radius:14px;padding:20px 22px;box-shadow:0 2px 16px rgba(var(--ink-rgb),0.06)}.timeline-item:nth-child(odd) .timeline-body:after{content:"";position:absolute;top:12px;right:calc(50% + 26px);width:14px;height:1px;background:#8b431340}.timeline-item:nth-child(2n) .timeline-body:after{content:"";position:absolute;top:12px;left:calc(50% + 26px);width:14px;height:1px;background:#8b431340}.timeline-era{font-size:11px}.timeline-event-title{font-size:16px}.timeline-event-desc{font-size:13px}.timeline-img-placeholder{height:auto;aspect-ratio:16 / 5;margin-top:14px}.timeline-img-placeholder svg{width:100%;height:100%;display:block}.vinh-danh .section-inner{max-width:1280px;margin:0 auto}.vinh-danh-tabs{max-width:400px;margin:0 auto 28px}.vd-tab{font-size:13px;padding:11px}.vinh-danh-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.vd-more-btn{grid-column:1 / -1}.vd-person{padding:14px 18px}.vd-name{font-size:15px}.vd-detail{font-size:13px}.cta-section{padding:80px 48px}.cta-section .section-inner{max-width:1280px;margin:0 auto}.cta-title{font-size:32px;text-align:left}.cta-desc{text-align:left;max-width:560px;font-size:15px}.cta-grid{grid-template-columns:repeat(4,1fr)}.cta-card{padding:24px 20px}.cta-card-icon{font-size:28px;margin-bottom:14px}.cta-card-title{font-size:15px}.cta-card-desc{font-size:12px}.footer{padding:40px 48px}.footer-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.footer-left{text-align:left}.footer-logo{margin-bottom:4px}.footer-sub,.footer-links{margin-bottom:0}.footer-copy{margin-top:8px}.ls-hero{height:480px}.ls-hero-content{max-width:1280px;margin:0 auto;left:50%;transform:translate(-50%);padding:0 48px 60px}.ls-hero-title{font-size:44px}.ls-hero-ornament{font-size:140px;right:80px}.ls-back-btn{margin-bottom:24px}.ls-page-inner{max-width:1280px;margin:0 auto;padding:0 48px}.ls-chapter{padding:48px 0 0}.ls-chapter-num{font-size:72px}.ls-chapter-title{font-size:24px}.ls-body{font-size:16px}.ls-quote{margin:36px 0 0;border-radius:0 16px 16px 0}.ls-quote-text{font-size:16px}.ls-sacphong{margin:40px 0 0}.ls-sacphong-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.ls-source{padding:24px 0 60px}}@media(min-width:1280px){.hero-poem .poem-line{font-size:20px}.hero-poem .poem-line:first-child{font-size:22px}.section-title{font-size:36px}}


    /* ===== TRANG VINH DANH (v2) ===== */
    .vd2-hero {
      position: relative; background: var(--ink); overflow: hidden;
      padding: 70px 20px 28px; height: 300px; display: flex; align-items: flex-end;
    }
    .vd2-hero-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at top, rgba(var(--gold-rgb),0.12) 0%, transparent 60%),
        linear-gradient(160deg, #1f0d05 0%, #2C1810 50%, #3a1e10 100%);
    }
    .vd2-hero-pattern {
      position: absolute; inset: 0; opacity: 0.04;
      background-image: repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 22px),
        repeating-linear-gradient(-45deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 22px);
    }
    .vd2-hero-ornament {
      position: absolute; top: 10px; right: 14px;
      font-family: 'Noto Serif', serif; font-size: 82px;
      color: rgba(var(--gold-rgb),0.09); line-height: 1; user-select: none;
    }
    .vd2-hero-content { position: relative; z-index: 1; }
    .vd2-back-btn {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 500;
      padding: 7px 14px; border-radius: 20px; cursor: pointer;
      font-family: 'Be Vietnam Pro', sans-serif; margin-bottom: 20px;
      -webkit-tap-highlight-color: transparent; transition: background 0.15s;
    }
    .vd2-back-btn:active { background: rgba(255,255,255,0.15); }
    .vd2-hero-title {
      font-family: 'Noto Serif', serif; font-size: 30px; font-weight: 700;
      color: #fff; line-height: 1.15; margin-bottom: 12px;
    }
    .vd2-hero-title em { font-style: italic; color: var(--gold-light); font-weight: 600; }
    .vd2-hero-quote {
      font-family: 'Noto Serif', serif; font-size: 13px; font-style: italic;
      color: rgba(255,255,255,0.65); line-height: 1.7;
      padding-left: 12px; border-left: 2px solid var(--gold); margin-top: 14px;
    }
    .vd2-stats {
      background: transparent; padding: 20px 20px 8px;
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
    }
    .vd2-stat {
      background: #fff; border: 0.5px solid rgba(var(--clay-rgb),0.15);
      border-radius: 12px; padding: 14px 6px; text-align: center;
      position: relative; overflow: hidden;
    }
    .vd2-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
    .vd2-stat.s-ls::before { background: var(--vermillion); }
    .vd2-stat.s-tt::before { background: var(--gold); }
    .vd2-stat.s-dg::before { background: var(--moss); }
    .vd2-stat-num { font-family: 'Noto Serif', serif; font-size: 24px; font-weight: 700; line-height: 1; }
    .vd2-stat.s-ls .vd2-stat-num { color: var(--vermillion); }
    .vd2-stat.s-tt .vd2-stat-num { color: var(--clay); }
    .vd2-stat.s-dg .vd2-stat-num { color: var(--moss); }
    .vd2-stat-label { font-size: 10px; color: var(--stone); margin-top: 4px; letter-spacing: 0.03em; }
    .vd2-filter-bar {
      background: var(--paper); padding: 16px 20px 8px;
      position: sticky; top: 52px; z-index: 50;
      border-bottom: 0.5px solid rgba(var(--clay-rgb),0.1);
      scroll-margin-top: 56px;
    }
    /* Khi user focus search trên mobile: ẩn navbar, dán filter bar lên top viewport */
    @media (max-width: 767.98px) {
      body.vd-search-active .nav { transform: translateY(-100%); transition: transform .2s ease; }
      body.vd-search-active .vd2-filter-bar { top: 0; z-index: 200; box-shadow: 0 2px 8px rgba(var(--ink-rgb),0.08); }
    }
    .vd2-filter-inner { display: flex; flex-direction: column; gap: 10px; }
    .vd2-tabs {
      display: flex; border: 0.5px solid rgba(var(--clay-rgb),0.25);
      border-radius: 10px; overflow: hidden; background: #fff;
    }
    .vd2-tab {
      flex: 1; padding: 10px 4px; font-size: 11px; font-weight: 500;
      text-align: center; cursor: pointer; background: transparent; border: none;
      color: var(--stone); font-family: 'Be Vietnam Pro', sans-serif; transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      -webkit-tap-highlight-color: transparent;
      display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .vd2-tab-count {
      font-size: 10px; background: rgba(var(--clay-rgb),0.08); padding: 1px 6px;
      border-radius: 10px; color: var(--clay); font-weight: 600;
    }
    .vd2-tab.active { background: var(--clay); color: #fff; }
    .vd2-tab.active .vd2-tab-count { background: rgba(255,255,255,0.2); color: #fff; }
    .vd2-view-toggle {
      display: inline-flex; gap: 0;
      border: 0.5px solid rgba(var(--clay-rgb),0.25);
      border-radius: 10px; overflow: hidden; background: #fff;
      align-self: stretch;
    }
    .vd2-vt-btn {
      width: 44px; min-height: 36px;
      background: transparent; border: 0; cursor: pointer;
      font-size: 16px; line-height: 1;
      color: var(--stone);
      transition: all .2s;
      -webkit-tap-highlight-color: transparent;
    }
    .vd2-vt-btn + .vd2-vt-btn { border-left: 0.5px solid rgba(var(--clay-rgb),0.18); }
    .vd2-vt-btn:hover:not(.active) { background: rgba(var(--gold-rgb),0.08); }
    .vd2-vt-btn.active { background: var(--clay); color: #fff; }
    .vd2-vt-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
    /* ── DETAIL MODAL CONTENT (đồng bộ với HTG, hẹp hơn) ── */
    @media (min-width: 768px) {
      .htg-modal.vd-modal-narrow { width: min(520px, calc(100vw - 48px)); }
    }
    @media (min-width: 1024px) {
      .htg-modal.vd-modal-narrow { width: min(540px, calc(100vw - 64px)); }
    }
    /* Vinh Danh chỉ còn 2 nút action — override grid 3 cột → 2 cột */
    .vd-modal-narrow .htg-d-actions { grid-template-columns: 1fr 1fr; }
    @media (min-width: 768px) {
      .vd-modal-narrow .htg-d-actions { grid-template-columns: repeat(2, 1fr); }
    }
    .vd-d-content { padding: 24px 20px 28px; max-width: 520px; margin: 0 auto; }
    .vd-d-meta-row {
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
    }
    .vd-d-cat-badge {
      font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--gold); font-weight: 700;
      padding: 4px 12px; border-radius: 20px;
      background: rgba(var(--gold-rgb),0.10); border: 0.5px solid rgba(var(--gold-rgb),0.25);
    }
    .vd-d-honor-badge {
      padding: 4px 12px; border-radius: 20px;
      background: linear-gradient(135deg, rgba(var(--vermillion-rgb),0.12), rgba(var(--clay-rgb),0.10));
      color: var(--vermillion); font-size: 12px; font-weight: 600;
      border: 0.5px solid rgba(var(--vermillion-rgb),0.25);
    }
    .vd-d-name {
      font-family: 'Noto Serif', serif; font-size: 26px; font-weight: 700;
      color: var(--ink); line-height: 1.25; margin: 0 0 6px;
    }
    .vd-d-position {
      font-size: 14px; color: var(--gold); font-weight: 600;
      margin-bottom: 8px; letter-spacing: 0.02em;
    }
    .vd-d-date {
      display: inline-block; font-size: 12.5px; color: var(--ink-mid);
      background: rgba(var(--clay-rgb),0.06); padding: 5px 12px; border-radius: 8px;
      margin-top: 4px; letter-spacing: 0.02em;
    }
    .vd-d-divider {
      height: 1px; background: linear-gradient(to right, transparent, rgba(var(--clay-rgb),0.18), transparent);
      margin: 18px 0 16px;
    }
    .vd-d-desc {
      font-size: 14.5px; line-height: 1.75; color: var(--ink-mid);
      white-space: pre-wrap; margin: 0;
    }
    @media (min-width: 768px) {
      .vd-d-content { padding: 32px 36px 40px; }
      .vd-d-name { font-size: 30px; }
      .vd-d-desc { font-size: 15px; }
    }

    .vd2-search-box { position: relative; }
    .vd2-suggest {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: #fff; border: 0.5px solid rgba(var(--clay-rgb),0.2);
      border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--ink-rgb),0.14);
      max-height: 320px; overflow-y: auto; z-index: 100;
      padding: 4px;
    }
    .vd2-suggest--empty {
      padding: 14px; font-size: 13px; color: var(--stone); text-align: center; font-style: italic;
    }
    .vd2-suggest-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 10px; border: 0; background: transparent; cursor: pointer;
      text-align: left; border-radius: 7px; font-family: inherit;
    }
    .vd2-suggest-item:hover, .vd2-suggest-item:focus-visible {
      background: rgba(var(--clay-rgb),0.07); outline: none;
    }
    .vd2-suggest-avatar {
      flex: 0 0 34px; width: 34px; height: 34px;
      border-radius: 50%; object-fit: cover; background: rgba(var(--clay-rgb),0.08);
    }
    .vd2-suggest-avatar--initials {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--gold), var(--clay));
      color: #fff; font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
    }
    .vd2-suggest-text { flex: 1; min-width: 0; }
    .vd2-suggest-name {
      font-size: 13.5px; font-weight: 600; color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vd2-suggest-meta {
      font-size: 11px; color: var(--stone); margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vd2-suggest-cat {
      display: inline-block; padding: 1px 7px; border-radius: 8px;
      background: rgba(var(--clay-rgb),0.1); color: var(--clay); font-weight: 600;
      font-size: 10px; letter-spacing: 0.02em; margin-right: 2px;
    }
    .vd2-search-input {
      width: 100%; padding: 10px 14px 10px 42px; font-size: 13px;
      border: 0.5px solid rgba(var(--clay-rgb),0.2); border-radius: 10px;
      background: #fff; color: var(--ink); font-family: 'Be Vietnam Pro', sans-serif;
      outline: none; transition: border-color 0.15s;
    }
    .vd2-search-input:focus { border-color: var(--clay); }
    .vd2-search-input::placeholder { color: var(--stone); opacity: 0.7; }
    .vd2-search-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--stone); opacity: 0.7; font-size: 20px; line-height: 1; pointer-events: none;
    }
    .vd2-section { display: none; }
    .vd2-section.active { display: block; animation: sectionEnter .22s cubic-bezier(.4,0,.2,1) both; }.vd2-section.vd-out { display: block !important; animation: sectionLeave .14s ease both; pointer-events: none; }@keyframes sectionEnter { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; } }@keyframes sectionLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-3px); } }
    .vd2-list {
      padding: 20px; display: flex; flex-direction: column; gap: 10px;
    }
    .vd2-card {
      background: #fff; border: 0.5px solid rgba(var(--clay-rgb),0.15);
      border-radius: 12px; padding: 14px; display: flex; gap: 12px;
      align-items: center; cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .vd2-card:active { transform: scale(0.99); box-shadow: 0 2px 12px rgba(var(--ink-rgb),0.08); }
    .vd2-avatar {
      width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0;
      font-family: 'Noto Serif', serif;
    }
    .vd2-avatar.liet-sy  { background: rgba(var(--vermillion-rgb),0.12); color: var(--vermillion); border: 1px solid rgba(var(--vermillion-rgb),0.2); }
    .vd2-avatar.thanh-tich { background: rgba(var(--gold-rgb),0.14); color: var(--gold); border: 1px solid rgba(var(--gold-rgb),0.25); }
    .vd2-avatar.dong-gop { background: rgba(var(--moss-rgb),0.14); color: var(--moss); border: 1px solid rgba(var(--moss-rgb),0.25); }
    .vd2-body { flex: 1; min-width: 0; }
    .vd2-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 4px; }
    .vd2-detail { font-size: 12.5px; color: var(--stone); line-height: 1.5; }
    .vd2-badge {
      font-size: 10px; padding: 4px 9px; border-radius: 20px; font-weight: 600;
      white-space: nowrap; flex-shrink: 0; align-self: flex-start; margin-top: 2px;
    }
    .badge-liet-sy   { background: rgba(var(--vermillion-rgb),0.1);  color: var(--vermillion);      border: 0.5px solid rgba(var(--vermillion-rgb),0.2); }
    .badge-thanh-tich { background: rgba(var(--gold-rgb),0.12); color: var(--clay); border: 0.5px solid rgba(var(--gold-rgb),0.25); }
    .badge-dong-gop  { background: rgba(var(--moss-rgb),0.12);  color: var(--moss);     border: 0.5px solid rgba(var(--moss-rgb),0.22); }
    .vd2-empty { padding: 36px 20px; text-align: center; color: var(--stone); font-size: 13px; font-style: italic; grid-column: 1 / -1; }
    .vd2-empty-icon { font-size: 32px; color: rgba(var(--clay-rgb),0.2); margin-bottom: 10px; display: block; }
    .vd2-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 20px 4px; }
    .vd2-pg-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--clay-rgb),0.28); background: #fff; color: var(--clay); font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; line-height: 1; }.vd2-pg-btn:not(:disabled):hover { background: var(--clay-pale); border-color: var(--clay); }.vd2-pg-btn:disabled { opacity: .35; cursor: default; }
    .vd2-pg-info { font-size: 13px; font-weight: 600; color: var(--ink-mid); min-width: 52px; text-align: center; }
    
    .vd2-contribute {
      background: var(--ink); padding: 32px 20px 36px; position: relative; overflow: hidden;
    }
    .vd2-contribute-ornament {
      position: absolute; top: -40px; right: -40px; width: 160px; height: 160px;
      border: 1px solid rgba(var(--gold-rgb),0.15); border-radius: 50%;
    }
    .vd2-contribute-ornament2 {
      position: absolute; top: -80px; right: -80px; width: 240px; height: 240px;
      border: 0.5px solid rgba(var(--gold-rgb),0.08); border-radius: 50%;
    }
    .vd2-contribute-content { position: relative; z-index: 1; }
    .vd2-contribute-label {
      font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--gold-light); font-weight: 600; margin-bottom: 10px;
    }
    .vd2-contribute-title {
      font-family: 'Noto Serif', serif; font-size: 22px; font-weight: 700;
      color: #fff; line-height: 1.3; margin-bottom: 10px;
    }
    .vd2-contribute-title em { font-style: italic; color: var(--gold-light); }
    .vd2-contribute-desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 20px; }
    .vd2-contribute-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .vd2-contribute-btn {
      padding: 12px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
      cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif; text-align: center;
      transition: opacity 0.15s; -webkit-tap-highlight-color: transparent; border: none;
    }
    .vd2-btn-primary { background: var(--gold); color: var(--ink); }
    .vd2-btn-secondary { background: transparent; border: 1px solid rgba(var(--gold-rgb),0.5) !important; color: var(--gold-light); }
    .vd2-modal-backdrop { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    .vd2-modal-backdrop.open { opacity: 1; pointer-events: auto; }
    .vd2-modal-backdrop.open .vd2-modal { animation: modalSlideIn .25s cubic-bezier(.4,0,.2,1) both; }
    @keyframes modalSlideIn { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .vd2-modal { background: #fff; border-radius: 16px; width: calc(100% - 32px); max-width: 420px; max-height: 88vh; display: flex; flex-direction: column; }
    .vd2-modal-header {
      padding: 18px 20px 14px; border-bottom: 0.5px solid rgba(var(--clay-rgb),0.1);
      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
    }
    .vd2-modal-title { font-family: 'Noto Serif', serif; font-size: 17px; font-weight: 700; color: var(--ink); }
    .vd2-modal-close {
      background: rgba(var(--clay-rgb),0.06); border: none; width: 30px; height: 30px;
      border-radius: 50%; font-size: 14px; cursor: pointer; color: var(--stone);
      display: flex; align-items: center; justify-content: center;
    }
    .vd2-modal-tabs {
      display: flex; padding: 0 20px; gap: 4px;
      border-bottom: 0.5px solid rgba(var(--clay-rgb),0.12); flex-shrink: 0; background: var(--cream);
    }
    .vd2-modal-tab {
      flex: 1; padding: 12px 8px; font-size: 13px; font-weight: 600; color: var(--stone);
      background: transparent; border: none; border-bottom: 2px solid transparent;
      cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      transition: color 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .vd2-modal-tab.active { color: var(--clay); border-bottom-color: var(--clay); }
    .vd2-modal-body { padding: 16px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .vd2-modal-note {
      background: rgba(var(--gold-rgb),0.06); border: 0.5px solid rgba(var(--gold-rgb),0.2);
      border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-mid);
      line-height: 1.55; margin-bottom: 16px;
    }
    .vd2-modal-note strong { color: var(--clay); font-weight: 600; }
    .vd2-modal-form { display: flex; flex-direction: column; gap: 14px; }
    .vd2-form-row { display: flex; flex-direction: column; gap: 5px; }
    .vd2-form-label { font-size: 12px; font-weight: 600; color: var(--ink-mid); }
    .vd2-required { color: var(--vermillion); font-weight: 600; }
    .vd2-form-input {
      width: 100%; padding: 10px 12px; font-size: 13.5px;
      border: 0.5px solid rgba(var(--clay-rgb),0.25); border-radius: 8px;
      background: #fff; color: var(--ink); font-family: 'Be Vietnam Pro', sans-serif;
      outline: none; transition: border-color 0.15s; box-sizing: border-box;
    }
    .vd2-form-input:focus { border-color: var(--clay); }
    .vd2-form-textarea { resize: vertical; min-height: 52px; line-height: 1.5; }
    select.vd2-form-input {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%238B7355'><path d='M0 0 L5 6 L10 0 Z'/></svg>");
      background-repeat: no-repeat; background-position: right 12px center;
      background-size: 10px; padding-right: 32px;
    }
    .vd2-form-actions {
      display: flex; gap: 10px; justify-content: flex-end;
      margin-top: 18px; padding-top: 14px; border-top: 0.5px solid rgba(var(--clay-rgb),0.08);
    }
    .vd2-form-btn-ghost, .vd2-form-btn-primary {
      padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif; border: none;
      transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .vd2-form-btn-ghost { background: transparent; color: var(--stone); border: 0.5px solid rgba(var(--clay-rgb),0.25) !important; }
    .vd2-form-btn-primary { background: var(--clay); color: #fff; }
    .vd2-captcha-row { display: flex; align-items: center; gap: 10px; }
    .vd2-captcha-question {
      flex-shrink: 0; padding: 10px 16px; background: var(--cream);
      border: 0.5px solid rgba(var(--clay-rgb),0.25); border-radius: 8px;
      font-family: 'Noto Serif', serif; font-size: 16px; font-weight: 700;
      color: var(--ink); min-width: 110px; text-align: center; user-select: none;
    }
    .vd2-captcha-input { flex: 1; min-width: 0; }
    .vd2-captcha-refresh {
      flex-shrink: 0; width: 38px; height: 38px; background: rgba(var(--clay-rgb),0.06);
      border: 0.5px solid rgba(var(--clay-rgb),0.2); color: var(--clay); border-radius: 8px;
      font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .vd2-file-drop-zone {
      padding: 28px 16px; background: rgba(var(--gold-rgb),0.04);
      border: 1.5px dashed rgba(var(--gold-rgb),0.4); border-radius: 12px; text-align: center;
      cursor: pointer; transition: background 0.15s, border-color 0.15s;
    }
    .vd2-file-drop-zone:hover { background: rgba(var(--gold-rgb),0.08); border-color: rgba(var(--gold-rgb),0.6); }
    .vd2-file-drop-icon { font-size: 36px; color: rgba(var(--gold-rgb),0.6); margin-bottom: 8px; }
    .vd2-file-drop-text { font-size: 13.5px; color: var(--ink-mid); font-weight: 600; margin-bottom: 3px; }
    .vd2-file-drop-sub { font-size: 11.5px; color: var(--stone); }
    .vd2-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
    .vd2-file-item {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
      background: var(--cream); border: 0.5px solid rgba(var(--clay-rgb),0.15); border-radius: 8px;
    }
    .vd2-file-item-icon { font-size: 16px; flex-shrink: 0; }
    .vd2-file-item-info { flex: 1; min-width: 0; }
    .vd2-file-item-name { font-size: 12.5px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vd2-file-item-size { font-size: 10.5px; color: var(--stone); margin-top: 1px; }
    .vd2-file-item-remove {
      background: none; border: none; color: var(--stone); font-size: 18px; cursor: pointer;
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; flex-shrink: 0;
    }
    .vd2-contact-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 199;
      pointer-events: none; transition: background 0.3s ease;
    }
    .vd2-contact-backdrop.open { background: rgba(0,0,0,0.55); pointer-events: auto; }
    .vd2-contact-panel{
      position: fixed; top: 0; right: 0; bottom: 0; width: 88vw; max-width: 340px;
      background: #fff; z-index: 200; transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease;
      box-shadow: none; display: flex; flex-direction: column; overflow: hidden;
; visibility: hidden; transition: transform 0.3s ease, visibility 0.3s ease; }
    .vd2-contact-panel.open { visibility: visible; transform: translateX(0); box-shadow: -8px 0 32px rgba(var(--ink-rgb),0.3); }
    .vd2-contact-header {
      flex-shrink: 0; padding: 22px 20px 18px; background: var(--ink); color: #fff;
      display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .vd2-contact-eyebrow {
      font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--gold-light); font-weight: 600; margin-bottom: 6px;
    }
    .vd2-contact-title { font-family: 'Noto Serif', serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: #fff; }
    .vd2-contact-close {
      background: rgba(255,255,255,0.08); border: 0.5px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.8); width: 32px; height: 32px; border-radius: 50%;
      font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    }
    .vd2-contact-body { flex: 1; overflow-y: auto; padding: 18px; }
    .vd2-contact-intro {
      font-size: 12.5px; color: var(--ink-mid); line-height: 1.6;
      padding: 12px 14px; background: var(--cream); border-left: 3px solid var(--gold);
      border-radius: 0 8px 8px 0; margin-bottom: 18px;
    }
    .vd2-contact-intro strong { color: var(--clay); font-weight: 600; }
    .vd2-contact-channels { display: flex; flex-direction: column; gap: 8px; }
    .vd2-contact-channel {
      display: flex; align-items: center; gap: 12px; padding: 12px 14px;
      background: #fff; border: 0.5px solid rgba(var(--clay-rgb),0.15); border-radius: 10px;
      text-decoration: none; color: inherit; transition: background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .vd2-contact-channel:hover { background: var(--cream); }
    .vd2-contact-ch-icon {
      width: 40px; height: 40px; border-radius: 10px; display: flex;
      align-items: center; justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0;
    }
    .ch-mail   { background: rgba(var(--gold-rgb),0.14); color: var(--clay); }
    .ch-phone  { background: rgba(var(--moss-rgb),0.14);  color: var(--moss); }
    .ch-mobile { background: rgba(var(--vermillion-rgb),0.1);   color: var(--vermillion); }
    .vd2-contact-ch-info { flex: 1; min-width: 0; }
    .vd2-contact-ch-label { font-size: 10.5px; color: var(--stone); margin-bottom: 2px; }
    .vd2-contact-ch-value { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vd2-contact-ch-arrow { color: rgba(var(--clay-rgb),0.3); font-size: 14px; flex-shrink: 0; }
    .vd2-contact-section-label {
      font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--clay); font-weight: 600; margin: 22px 0 10px;
      padding-top: 14px; border-top: 0.5px solid rgba(var(--clay-rgb),0.1);
    }
    .vd2-contact-address {
      display: flex; gap: 12px; padding: 14px; background: var(--cream);
      border: 0.5px solid rgba(var(--clay-rgb),0.12); border-radius: 10px;
    }
    .vd2-contact-address-icon { font-size: 22px; color: var(--clay); flex-shrink: 0; }
    .vd2-contact-address-name { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .vd2-contact-address-detail { font-size: 12.5px; color: var(--ink-mid); line-height: 1.55; }
    @media (min-width: 768px) {
      .vd2-hero { padding: 120px 0 64px; height: 480px; }
      .vd2-hero-content { max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 48px; }
      .vd2-hero-ornament { font-size: 220px; right: 60px; top: 50%; transform: translateY(-50%); }
      .vd2-hero-title { font-size: 46px; max-width: 700px; }
      .vd2-stats { max-width: 1280px; margin: -40px auto 0; padding: 0 48px; gap: 16px; position: relative; z-index: 2; }
      .vd2-stat { padding: 24px 16px; border-radius: 16px; }
      .vd2-stat-num { font-size: 36px; }
      .vd2-filter-bar { padding: 20px 0 12px; top: 64px; }
      .vd2-filter-inner { flex-direction: row; gap: 20px; align-items: center; justify-content: center; max-width: 1280px; margin: 0 auto; padding: 0 48px; }
      .vd2-tabs { flex: 0 1 520px; }
      .vd2-tab { font-size: 13px; padding: 12px 4px; }
      .vd2-search-box { flex: 0 1 380px; }
      .vd2-list { max-width: 1280px; margin: 0 auto; padding: 28px 48px 32px; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
      .vd2-pagination { grid-column: 1 / -1; }
      .vd2-contribute { padding: 64px 0 72px; }
      .vd2-contribute-content { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
      .vd2-contribute-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
      .vd2-contribute-title { font-size: 32px; }
      
      .vd2-modal { max-width: 600px; border-radius: 16px; max-height: 86vh; }
      .vd2-contact-panel { width: 420px; max-width: 420px; }
    }

/* ── Drawer accordion groups ── */
.menu-group.open .menu-item-arrow { transform: rotate(90deg); color: var(--gold-light); }
.menu-subgroup { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.menu-group.open .menu-subgroup { max-height: 500px; }
.menu-group.active-child .menu-item-icon { background: rgba(var(--gold-rgb),0.15); border-color: rgba(var(--gold-rgb),0.4); }
.menu-group.active-child > .menu-item .menu-item-text { color: var(--gold-light); }
.menu-subitem {
  display: flex; align-items: center;
  padding: 11px 20px 11px 72px;
  color: rgba(255,255,255,0.75);
  font-size: 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.menu-subitem::before { content: "·"; margin-right: 12px; color: rgba(var(--gold-rgb),0.5); font-size: 18px; }
.menu-subitem:active { background: rgba(var(--gold-rgb),0.08); color: var(--gold-light); }
.menu-subitem.active { color: var(--gold-light); background: rgba(var(--gold-rgb),0.12); }
.menu-subitem.active::before { color: var(--gold); }

/* ── Mobile drawer user section (đã đăng nhập) ── */
.user-menu-mobile { padding: 14px 20px; border-top: 0.5px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.user-menu-mobile-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(var(--gold-rgb),0.2);
  border-radius: 10px;
  margin-bottom: 8px;
}
.user-menu-mobile-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--clay), var(--clay-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif', serif; font-weight: 700; font-size: 15px;
  flex-shrink: 0; border: 1.5px solid rgba(var(--gold-rgb),0.4);
  overflow: hidden;
}
.user-menu-mobile-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.user-menu-mobile-info { flex: 1; min-width: 0; }
.user-menu-mobile-name { color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.user-menu-mobile-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, var(--gold), #a87c13);
  color: #fff; font-size: 9px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
}
.user-menu-mobile-email { font-size: 10.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.user-menu-action {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; color: rgba(255,255,255,0.8);
  font-size: 13px; cursor: pointer; border-radius: 8px;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent;
}
.user-menu-action:active { background: rgba(var(--gold-rgb),0.1); }
.user-menu-action .icon { width: 22px; text-align: center; color: var(--gold-light); }
.user-menu-action.logout { color: rgba(255,150,150,0.9); }
.user-menu-action.logout .icon { color: rgba(255,150,150,0.8); }

/* ── PC nav dropdown groups ── */
@media (min-width: 768px) {
  .nav-dropdown { position: relative; }
  .nav-dropdown > .nav-link::after { content: "▾"; font-size: 9px; margin-left: 6px; opacity: 0.7; transition: transform 0.2s; }
  .nav-dropdown:hover > .nav-link::after { transform: rotate(180deg); }
  .nav-dropdown-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 180px; background: #1e0f08;
    border: 1px solid rgba(var(--gold-rgb),0.25);
    border-radius: 6px; padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 120;
  }
  .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav-dd-item {
    display: block; padding: 10px 18px;
    color: rgba(255,255,255,0.75);
    font-size: 13px; white-space: nowrap; cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .nav-dd-item:hover { background: rgba(var(--gold-rgb),0.1); color: var(--gold-light); }
  .nav-dd-item.active { background: rgba(var(--gold-rgb),0.12); color: var(--gold-light); }

  /* ── PC user menu pill ── */
  .user-menu-pc {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 6px;
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(var(--gold-rgb),0.25);
    border-radius: 24px; cursor: pointer;
    transition: background 0.15s;
  }
  .user-menu-pc:hover { background: rgba(255,255,255,0.08); }
  .user-menu-pc-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--clay), var(--clay-light));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif', serif; font-weight: 700; font-size: 12px;
    flex-shrink: 0; overflow: hidden;
  }
  .user-menu-pc-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  }
  .user-menu-pc-name { color: #fff; font-size: 12px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu-pc-caret { color: rgba(255,255,255,0.5); font-size: 9px; transition: transform 0.2s; }
  .user-menu-pc.open .user-menu-pc-caret { transform: rotate(180deg); }
  .user-menu-pc-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 220px; background: #1e0f08;
    border: 1px solid rgba(var(--gold-rgb),0.25);
    border-radius: 10px; padding: 6px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: color 0.18s, background 0.18s, opacity 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s; z-index: 150;
  }
  .user-menu-pc.open .user-menu-pc-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .user-menu-pc-header { padding: 10px 14px 12px; border-bottom: 0.5px solid rgba(255,255,255,0.08); margin-bottom: 4px; }
  .user-menu-pc-header-name { color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .user-menu-pc-header-email { color: rgba(255,255,255,0.45); font-size: 11px; margin-top: 3px; }
  .user-menu-pc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; color: rgba(255,255,255,0.8);
    font-size: 12.5px; cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .user-menu-pc-item:hover { background: rgba(var(--gold-rgb),0.1); color: var(--gold-light); }
  .user-menu-pc-item .icon { width: 16px; font-size: 13px; color: var(--gold-light); }
  .user-menu-pc-item.logout { color: rgba(255,150,150,0.9); border-top: 0.5px solid rgba(255,255,255,0.08); margin-top: 4px; padding-top: 11px; }
  .user-menu-pc-item.logout .icon { color: rgba(255,150,150,0.8); }
}

/* ============================================
   LỜI TRI ÂN PAGE
============================================ */
.ta-hero {
  position: relative; padding: 80px 20px 28px;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),0.85) 0%, rgba(var(--ink-rgb),0.92) 100%),
              linear-gradient(135deg, #3a1e10 0%, #2c1810 50%, #1e0f08 100%);
  color: #fff; overflow: hidden;
}
.ta-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent); opacity: 0.7;
}
.ta-hero::after {
  content: "❋"; position: absolute; right: -18px; top: 60px;
  font-size: 140px; color: rgba(var(--gold-rgb),0.06); pointer-events: none;
}
.ta-hero-inner { width: 100%; }
.ta-hero-illustration { display: none; }
.ta-eyebrow {
  display: inline-block; font-size: 10px; letter-spacing: 0.18em;
  color: var(--gold-light); text-transform: uppercase; font-weight: 500;
  padding: 4px 12px; border: 0.5px solid rgba(var(--gold-rgb),0.4); border-radius: 20px; margin-bottom: 14px;
}
.ta-hero-title {
  font-family: 'Noto Serif', serif; font-size: 26px; font-weight: 700;
  line-height: 1.2; color: #fff; margin-bottom: 10px; letter-spacing: -0.01em;
}
.ta-hero-title .title-line { display: block; }
.ta-hero-title em { font-style: italic; color: var(--gold-light); font-weight: 600; }
.ta-hero-sub {
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.72);
  font-family: 'Noto Serif', serif; font-style: italic; margin-bottom: 20px;
}
.ta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.ta-stat {
  background: rgba(255,255,255,0.04); border: 0.5px solid rgba(var(--gold-rgb),0.25);
  border-radius: 10px; padding: 10px 8px; text-align: center;
}
.ta-stat-num {
  font-family: 'Noto Serif', serif; font-size: 20px; font-weight: 700;
  color: var(--gold-light); line-height: 1; margin-bottom: 3px;
}
.ta-stat-label { font-size: 9.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; text-transform: uppercase; }
.ta-cta-wrap { display: flex; gap: 8px; }
.ta-btn-primary:disabled,
.ta-fab:disabled,
.lta-sidebar-cta-btn:disabled {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55);
  box-shadow: none; cursor: not-allowed; border: 1px solid rgba(255,255,255,0.12);
}
.ta-btn-primary:disabled { background: rgba(255,255,255,0.08); }
.ta-fab:disabled { opacity: 0.6; }
.ta-lock-banner {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(246,173,85,0.12);
  border: 1px solid rgba(246,173,85,0.35);
  border-left: 3px solid #F6AD55;
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: #f6d28e;
}
.ta-lock-banner em { color: #fff; font-style: italic; }
.ta-btn-primary {
  flex: 1; background: linear-gradient(180deg, var(--vermillion) 0%, var(--vermillion-dark) 100%);
  color: #fff; border: none; padding: 13px 18px; border-radius: 10px;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(var(--vermillion-rgb),0.35); letter-spacing: 0.01em; transition: transform 0.15s;
}
.ta-btn-primary:active { transform: translateY(1px); }
.ta-btn-secondary {
  background: transparent; color: var(--gold-light); border: 1px solid rgba(var(--gold-rgb),0.5);
  padding: 13px 14px; border-radius: 10px; font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ta-toolbar {
  background: var(--cream); border-bottom: 0.5px solid rgba(var(--clay-rgb),0.12);
  padding: 14px 20px; position: sticky; top: 52px; z-index: 50;
}
.ta-toolbar-inner { width: 100%; }
.ta-search { position: relative; margin-bottom: 0; }
.ta-search input {
  width: 100%; padding: 11px 14px 11px 40px; border: 1px solid rgba(var(--clay-rgb),0.2);
  border-radius: 10px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14px;
  background: #fff; color: var(--ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.ta-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.15); }
.ta-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--stone); font-size: 14px; pointer-events: none;
}
.ta-chips { display: flex; gap: 4px; margin-top: 10px; }
.ta-chip {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid rgba(var(--clay-rgb),0.2);
  border-radius: 999px; padding: 7px 4px; font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 11px; font-weight: 500; color: var(--ink-mid); cursor: pointer;
  transition: color 0.15s, background 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s; white-space: nowrap; text-align: center;
  overflow: hidden; text-overflow: ellipsis;
}
.ta-chip:hover { border-color: var(--gold); color: var(--clay); }
.ta-chip.active {
  background: var(--vermillion); border-color: var(--vermillion);
  color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(var(--vermillion-rgb), 0.35);
}
.ta-section { padding: 22px 20px 8px; }
.ta-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ta-section-title {
  font-family: 'Noto Serif', serif; font-size: 17px; font-weight: 700;
  color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.ta-title-icon { color: var(--vermillion); font-size: 16px; }
.ta-section-count {
  font-size: 11px; color: var(--stone); font-weight: 500;
  background: rgba(var(--clay-rgb),0.08); padding: 3px 10px; border-radius: 10px;
}
.ta-pinned-wrap { padding: 0 20px 14px; margin-bottom: 10px; }
.ta-pinned-card {
  position: relative; background: linear-gradient(135deg, #fdf6e8 0%, #f6e8d0 100%);
  border: 1.5px solid rgba(var(--gold-rgb),0.5); border-radius: 14px; padding: 0;
  box-shadow: 0 6px 22px rgba(var(--clay-rgb),0.12); display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 14px;
}
.ta-pinned-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--clay-rgb),0.16); }
.ta-pinned-card::before {
  content: "NỔI BẬT"; position: absolute; top: 10px; left: 14px;
  background: var(--vermillion); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 14px; letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(var(--vermillion-rgb),0.4); z-index: 2;
}
.ta-pinned-media { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--clay-pale); }
.ta-pinned-media svg, .ta-pinned-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ta-pinned-body { padding: 16px; }

/* Mini ghim (slot 2–5) */
.ta-pinned-mini-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ta-pinned-mini {
  position: relative; flex: 1 1 calc((100% - 10px) / 2); min-width: 0;
  background: #fff; border: 0.5px solid rgba(var(--gold-rgb),0.3);
  border-radius: 10px; padding: 12px 12px 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ta-pinned-mini:hover {
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--clay-rgb),0.1);
  border-color: var(--gold);
}
.ta-pinned-mini-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 13px; opacity: 0.7;
}
.ta-pinned-mini-author {
  display: flex; align-items: center; gap: 8px; padding-right: 20px;
}
.ta-pinned-mini-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--clay) 0%, var(--clay-light) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif', serif; font-weight: 700; font-size: 12px;
  border: 1px solid var(--cream);
}
.ta-pinned-mini-avatar.anon {
  background: linear-gradient(135deg, var(--stone) 0%, #6b5842 100%);
}
.ta-pinned-mini-info { flex: 1; min-width: 0; }
.ta-pinned-mini-name {
  font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ta-pinned-mini-meta {
  font-size: 10px; color: var(--stone); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ta-pinned-mini-excerpt {
  font-family: 'Noto Serif', serif; font-size: 12.5px;
  color: var(--ink-mid); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
.ta-pinned-mini-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; color: var(--stone);
  padding-top: 6px; border-top: 0.5px dashed rgba(var(--clay-rgb),0.12);
}
.ta-pinned-mini-more { color: var(--vermillion); font-weight: 700; font-size: 14px; }

.ta-grid { padding: 0 20px 8px; display: grid; gap: 14px; align-items: stretch; }
.ta-card {
  background: #fff; border: 0.5px solid rgba(var(--clay-rgb),0.14); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(var(--ink-rgb),0.04);
  transition: transform 0.15s, box-shadow 0.15s; cursor: pointer;
  display: flex; flex-direction: column;
}
.ta-card:active { transform: translateY(1px); }
.ta-card-media {
  position: relative; width: 100%; padding-bottom: 56.25%; background: var(--clay-pale); overflow: hidden;
}
.ta-card-media svg, .ta-card-media img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ta-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.ta-card-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ta-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--clay) 0%, var(--clay-light) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif', serif; font-weight: 700; font-size: 14px; border: 1.5px solid var(--cream);
}
.ta-avatar.anon { background: linear-gradient(135deg, var(--stone) 0%, #6b5842 100%); }
.ta-author-info { flex: 1; min-width: 0; }
.ta-author-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ta-author-meta { font-size: 11px; color: var(--stone); margin-top: 1px; }
.ta-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, var(--gold) 0%, #a87c13 100%);
  color: #fff; font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
}
.ta-badge.bld { background: linear-gradient(135deg, #7b1f1f 0%, #a02020 100%); }
.ta-badge.khach { background: linear-gradient(135deg, var(--moss) 0%, #6a9a5b 100%); }
.ta-content {
  font-family: 'Noto Serif', serif; font-size: 14px; line-height: 1.65; color: var(--ink-mid);
  margin-bottom: 12px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  /* Bẻ chuỗi dài không có dấu cách (vd "xxxxxxxxxxxx") để tự xuống dòng */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Card không có ảnh đính kèm → cho hiện nhiều dòng text hơn để lấp đầy chiều cao thẻ */
.ta-card-no-media .ta-content { -webkit-line-clamp: 12; }
@media (min-width: 768px) {
  .ta-card-no-media .ta-content { -webkit-line-clamp: 14; }
}
.ta-quote { color: var(--gold); font-family: 'Noto Serif', serif; font-size: 20px; line-height: 0; margin-right: 2px; vertical-align: -4px; }
.ta-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 0.5px solid rgba(var(--clay-rgb),0.1);
}
.ta-footer-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--stone); }
.ta-read-more { color: var(--vermillion); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ta-pagination-wrap { padding: 18px 20px 30px; text-align: center; }
.ta-pagination-info { font-size: 11px; color: var(--stone); margin-bottom: 14px; font-style: italic; font-family: 'Noto Serif', serif; }
.ta-pagination { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.ta-page-btn {
  min-width: 38px; height: 38px; padding: 0 10px; background: #fff;
  border: 1px solid rgba(var(--clay-rgb),0.2); color: var(--ink-mid);
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 13px; font-weight: 500;
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ta-page-btn:hover:not(:disabled):not(.active) { background: var(--cream); border-color: rgba(var(--clay-rgb),0.4); }
.ta-page-btn.active { background: var(--vermillion); color: #fff; border-color: var(--vermillion); font-weight: 600; box-shadow: 0 2px 8px rgba(var(--vermillion-rgb),0.25); }
.ta-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ta-page-ellipsis { min-width: 20px; color: var(--stone); padding: 0 4px; font-weight: 600; display: inline-flex; align-items: center; }
.ta-fab {
  position: fixed; bottom: 22px; right: 18px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vermillion) 0%, var(--vermillion-dark) 100%);
  color: #fff; border: none; box-shadow: 0 6px 20px rgba(var(--vermillion-rgb),0.45);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px;
  transition: transform 0.15s;
}
.ta-fab:active { transform: scale(0.95); }
.ta-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.ta-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.ta-modal {
  background: #fff; border-radius: 16px; padding: 26px 22px 22px;
  width: 100%; max-width: 340px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3); border-top: 3px solid var(--gold);
}
.ta-modal-icon {
  width: 60px; height: 60px; margin: 0 auto 14px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.15), rgba(var(--vermillion-rgb),0.1));
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.ta-modal-title { font-family: 'Noto Serif', serif; font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ta-modal-text { font-size: 13px; line-height: 1.55; color: var(--ink-mid); margin-bottom: 18px; }
.ta-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ta-modal-actions button {
  padding: 11px; font-size: 13px; font-weight: 600; border-radius: 10px;
  cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif; border: none;
}
.ta-btn-modal-login { background: var(--vermillion); color: #fff; }
.ta-btn-modal-reg { background: transparent; color: var(--ink); border: 1px solid rgba(var(--clay-rgb),0.3) !important; }
.ta-modal-close { margin-top: 12px; background: none; border: none; color: var(--stone); font-size: 12px; cursor: pointer; text-decoration: underline; }
.ta-empty { text-align: center; padding: 60px 20px 40px; color: var(--stone); font-family: 'Noto Serif', serif; }
.ta-empty-icon { font-size: 48px; margin-bottom: 14px; }
.ta-empty-text { font-size: 15px; }
@media (min-width: 768px) {
  .ta-hero { padding: 110px 0 64px; min-height: 460px; display: flex; align-items: center; }
  .ta-hero-inner {
    max-width: 1280px; margin: 0 auto; width: 100%; padding: 0 48px;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
  }
  .ta-hero-illustration { display: block; width: 100%; max-width: 500px; margin: 0 auto; }
  .ta-hero-illustration svg { width: 100%; height: auto; display: block; }
  .ta-hero-title { font-size: 38px; margin-bottom: 18px; }
  .ta-hero-sub { font-size: 16px; margin-bottom: 32px; }
  .ta-stats { display: flex; gap: 14px; margin-bottom: 32px; }
  .ta-stat { flex: 1 1 0; min-width: 0; padding: 14px 16px; }
  .ta-stat-num { font-size: 28px; }
  .ta-toolbar { top: 64px; padding: 18px 0; }
  .ta-toolbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: flex; gap: 16px; align-items: center; }
  .ta-search { flex: 1 1 280px; max-width: 440px; }
  .ta-chips { margin-top: 0; gap: 8px; flex-wrap: wrap; }
  .ta-chip { flex: 0 0 auto; padding: 8px 16px; font-size: 13px; }
  .ta-section { padding: 36px 48px 12px; max-width: 1280px; margin: 0 auto; }
  .ta-section-title { font-size: 22px; }
  .ta-pinned-wrap { padding: 0 48px 14px; max-width: 1280px; margin: 0 auto 10px; }
  .ta-pinned-card { max-width: 780px; margin: 14px auto 0; }
  .ta-pinned-mini-grid { max-width: 1280px; margin: 22px auto 0; }
  .ta-pinned-mini { flex: 1 1 calc((100% - 30px) / 4); padding: 14px; }
  .ta-pinned-mini-name { font-size: 13px; }
  .ta-pinned-mini-meta { font-size: 11px; }
  .ta-pinned-mini-excerpt { font-size: 13px; }
  .ta-pinned-media { aspect-ratio: unset; height: 320px; }
  .ta-grid { padding: 0 48px 20px; max-width: 1280px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .ta-content { font-size: 14.5px; -webkit-line-clamp: 5; }
  .ta-pagination-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 48px 50px; }
  .ta-page-btn { min-width: 42px; height: 42px; font-size: 14px; }
  .ta-fab { display: none; }
}

.cs-modal-bd{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.cs-modal-box{background:#fff;border-radius:20px;padding:32px 28px 24px;max-width:320px;width:100%;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.22);border-top:4px solid var(--gold)}.cs-modal-icon{font-size:44px;margin-bottom:12px;line-height:1}.cs-modal-title{font-family:"Noto Serif",serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:10px}.cs-modal-desc{font-size:14px;line-height:1.65;color:var(--ink-mid);margin-bottom:22px}.cs-modal-btn{width:100%;padding:12px;background:linear-gradient(180deg,var(--clay),#6b3410);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:"Be Vietnam Pro",sans-serif}.cs-modal-btn:hover{opacity:.9}.cs-modal-enter-active,.cs-modal-leave-active{transition:opacity .22s ease}.cs-modal-enter-from,.cs-modal-leave-to{opacity:0}.cs-modal-enter-active .cs-modal-box,.cs-modal-leave-active .cs-modal-box{transition:transform .22s ease}.cs-modal-enter-from .cs-modal-box,.cs-modal-leave-to .cs-modal-box{transform:scale(.92)}

/* ═══════════════════════════════════════════════════════
   GÓC SÁNG TÁC (cloned from UserWeb_SangTac.html)
   ═══════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════
     HERO / BANNER
     ══════════════════════════════════════════════════════════ */
  .st-hero {
    padding: 56px 0 64px;
    background:
      radial-gradient(ellipse 80% 60% at 50% 30%, rgba(var(--gold-rgb), 0.1) 0%, transparent 70%),
      linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    position: relative;
    overflow: hidden;
  }
  .st-hero-inner {
    position: relative; z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
  }

  /* ══════════════════════════════════════════════════════════
     TOOLBAR (search + tag filters, light background)
     ══════════════════════════════════════════════════════════ */
  .st-toolbar-section {
    background: #fff;
    padding: 22px 0;
    border-top: 1px solid rgba(var(--clay-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.1);
    box-shadow: 0 4px 16px rgba(92, 61, 46, 0.05);
  }
  .st-toolbar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .st-search {
    flex: 1 1 360px;
    min-width: 260px;
    display: flex; align-items: center;
    background: #fff;
    border: 1.5px solid rgba(var(--clay-rgb), 0.18);
    border-radius: 30px;
    padding: 4px 22px;
    height: 48px;
    box-shadow: 0 2px 10px rgba(92, 61, 46, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .st-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.18);
  }
  .st-search-icon {
    color: var(--clay);
    flex-shrink: 0;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
  }
  .st-search-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
  }
  .st-search input {
    flex: 1;
    border: none; background: transparent; outline: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.96rem;
    color: var(--ink);
    padding: 10px 0;
  }
  .st-search input::placeholder {
    color: var(--stone);
    opacity: 0.7;
    font-style: normal;
  }

  .st-tag-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .st-tag {
    padding: 10px 22px;
    border-radius: 24px;
    border: 1.5px solid rgba(var(--clay-rgb), 0.22);
    background: #fff;
    color: var(--ink-mid);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, opacity 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
    height: 42px;
    display: inline-flex;
    align-items: center;
  }
  .st-tag:hover {
    border-color: var(--clay);
    color: var(--clay);
  }
  .st-tag.active {
    background: var(--vermillion);
    border-color: var(--vermillion);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(var(--vermillion-rgb), 0.35);
  }

  /* Banner content — left aligned */
  .st-hero-eyebrow {
    display: inline-flex; align-items: center;
    gap: 8px;
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 700;
    margin-bottom: 22px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(var(--clay-rgb), 0.08);
    border: 1px solid rgba(var(--clay-rgb), 0.18);
  }
  .st-hero-eyebrow::before {
    content: '📖';
    font-size: 0.95rem;
  }
  .st-hero-title {
    font-family: 'Noto Serif', serif;
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 22px;
    font-weight: 800;
    max-width: 820px;
    letter-spacing: -0.01em;
  }
  .st-hero-title em {
    color: var(--gold-dark);
    font-style: italic;
    font-weight: 700;
  }
  .st-hero-sub {
    font-family: 'Noto Serif', serif;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    color: var(--ink-mid);
    font-style: italic;
    line-height: 1.75;
    max-width: 820px;
    margin-bottom: 32px;
  }
  .st-hero-sub .quote-line {
    color: var(--clay);
    font-weight: 500;
  }

  /* Stats row */
  .st-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 170px));
    gap: 14px;
    max-width: 560px;
  }
  .st-stat {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .st-stat:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 8px 20px rgba(92, 61, 46, 0.1);
  }
  .st-stat-num {
    font-family: 'Noto Serif', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gold-dark);
    line-height: 1;
    margin-bottom: 6px;
  }
  .st-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mid);
    font-weight: 600;
  }

  @media (max-width: 767px) {
    .st-hero-inner,
    .st-toolbar,
    .st-container { padding: 0 16px; }
    .st-toolbar-section { padding: 20px 0 24px; }
    .st-toolbar { gap: 14px; }
    .st-search { flex: 1 1 100%; }
    .st-tag-group {
      width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .st-tag-group::-webkit-scrollbar { display: none; }
    .st-tag { padding: 9px 18px; font-size: 0.88rem; }
  }
  @media (max-width: 640px) {
    .st-hero { padding: 40px 0 48px; }
    .st-hero-stats {
      grid-template-columns: repeat(3, 1fr);
      max-width: 100%;
      gap: 10px;
    }
    .st-stat { padding: 13px 8px; }
    .st-stat-num { font-size: 1.45rem; }
    .st-stat-label { font-size: 0.66rem; letter-spacing: 0.1em; }
  }

  /* ══════════════════════════════════════════════════════════
     GÓC SÁNG TÁC (lấy từ Ky Uc Thoi Gian V2, đồng bộ tone dự án)
     ══════════════════════════════════════════════════════════ */
  #contribute {
    padding: 72px 0 88px;
    background: linear-gradient(160deg, var(--st-bg-1) 0%, var(--st-bg-2) 50%, var(--st-bg-3) 100%);
    color: white;
    position: relative;
  }
  #contribute::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 50% 30% at 20% 15%, rgba(var(--gold-rgb), 0.08) 0%, transparent 70%),
      radial-gradient(ellipse 40% 30% at 85% 85%, rgba(var(--vermillion-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .st-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; }

  .st-section-label {
    font-size: 0.78rem; letter-spacing: 0.25em;
    font-weight: 700;
    text-transform: uppercase; color: var(--gold);
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .st-section-label::after {
    content: ''; flex: 1; max-width: 60px;
    height: 1px; background: linear-gradient(90deg, var(--gold), transparent);
  }
  .st-section-title {
    font-family: 'Noto Serif', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: var(--gold-light); margin-bottom: 14px;
    font-weight: 700;
    line-height: 1.15;
    display: flex; align-items: center; gap: 16px;
  }
  .st-section-title::after {
    content: ''; flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.4), transparent);
    max-width: 360px;
  }
  .st-section-desc {
    font-size: 1.02rem; line-height: 1.75;
    color: rgba(255, 255, 255, 0.68);
    max-width: 680px;
    font-weight: 300;
  }

  /* ── Featured pinned works (1 hero + 4 small) ── */
  .gst-featured-wrap {
    margin-bottom: 56px;
  }
  .gst-featured-head {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
  }
  .gst-featured-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.4rem; font-weight: 700;
    color: var(--gold-light);
    display: flex; align-items: center; gap: 10px;
    line-height: 1.2;
  }
  .gst-featured-pin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--ink);
    font-size: 1.05rem;
    box-shadow: 0 3px 10px rgba(var(--gold-rgb), 0.35);
  }
  .gst-featured-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
  }

  .gst-featured-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, minmax(180px, auto));
    gap: 18px;
    min-height: 400px;
  }
  /* hero card = first child, spans 2 rows */
  .gst-featured-grid > .gst-feat-card:first-child {
    grid-row: span 2;
  }
  /* right side: inner 2×2 grid */
  .gst-feat-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    grid-row: span 2;
  }

  .gst-feat-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    transition: transform 0.28s, box-shadow 0.28s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
  .gst-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    border-color: var(--gold);
  }
  .gst-feat-card.gst-feat-hero { min-height: 400px; }

  /* Hero card image background */
  .gst-feat-hero .gst-feat-thumb,
  .gst-feat-card .gst-feat-thumb {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    position: relative;
  }
  .gst-feat-hero .gst-feat-thumb { height: 280px; }
  .gst-feat-card:not(.gst-feat-hero) .gst-feat-thumb { height: 120px; font-size: 2.2rem; }

  /* Text-only cards background */
  .gst-feat-card-text {
    background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(var(--gold-rgb), 0.08) 0%, transparent 70%),
      linear-gradient(160deg, #fffdf7 0%, var(--paper) 100%);
  }

  .gst-feat-body {
    padding: 18px 20px 16px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .gst-feat-hero .gst-feat-body { padding: 24px 26px 22px; }

  .gst-feat-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 10px;
    padding: 3px 10px; border-radius: 8px;
  }
  .gst-feat-hero .gst-feat-tag { font-size: 0.72rem; }

  .gst-feat-title {
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 8px;
    font-size: 1.02rem;
  }
  .gst-feat-hero .gst-feat-title { font-size: 1.55rem; margin-bottom: 12px; line-height: 1.25; }

  .gst-feat-excerpt {
    font-family: 'Noto Serif', serif;
    font-size: 0.9rem; line-height: 1.65;
    color: var(--ink-mid);
    font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 10px;
  }
  .gst-feat-hero .gst-feat-excerpt {
    font-size: 1rem; -webkit-line-clamp: 4;
    margin-bottom: 16px;
  }

  .gst-feat-meta {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.1);
  }
  .gst-feat-author {
    color: var(--clay);
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px;
  }
  .gst-feat-views {
    color: var(--stone);
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* All-works section heading */
  .gst-all-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
  }
  .gst-all-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.25rem; font-weight: 700;
    color: var(--gold-light);
  }
  .gst-all-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
  }

  /* Featured grid responsive */
  @media (max-width: 900px) {
    .gst-featured-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      min-height: auto;
    }
    .gst-featured-grid > .gst-feat-card:first-child {
      grid-row: auto;
    }
    .gst-feat-side {
      grid-row: auto;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
    }
    .gst-feat-card.gst-feat-hero { min-height: 320px; }
    .gst-feat-hero .gst-feat-thumb { height: 200px; }
    .gst-feat-hero .gst-feat-title { font-size: 1.3rem; }
  }
  @media (max-width: 560px) {
    .gst-feat-side {
      grid-template-columns: 1fr;
    }
    .gst-featured-head, .gst-all-head { flex-wrap: wrap; gap: 6px 12px; }
  }

  /* masonry grid */
  .gst-grid { columns: 3; column-gap: 22px; }
  @media (max-width: 900px) { .gst-grid { columns: 2; column-gap: 16px; } }
  @media (max-width: 560px) { .gst-grid { columns: 1; } }

  .gst-card {
    break-inside: avoid;
    margin-bottom: 22px;
    border-radius: 16px; overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    cursor: pointer;
    transition: transform 0.28s, box-shadow 0.28s, background 0.2s, border-color 0.2s;
    animation: gstIn 0.45s ease both;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }
  .gst-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
    background: #fff;
    border-color: var(--gold);
  }
  @keyframes gstIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* art card */
  .gst-art-thumb {
    width: 100%; display: flex;
    align-items: center; justify-content: center;
    font-size: 3rem; position: relative;
  }
  .gst-type-badge {
    position: absolute; top: 10px; left: 10px;
    background: rgba(0, 0, 0, 0.72);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 8px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 500;
  }

  /* text card */
  .gst-text-card { padding: 22px 20px 18px; }
  .gst-tag {
    display: inline-block;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 12px;
    padding: 3px 10px; border-radius: 8px;
    font-family: 'Be Vietnam Pro', sans-serif;
  }
  /* Tag colors tuned for light-card backgrounds */
  .gst-tag-poem  { background: rgba(108, 92, 231, 0.15); color: #5a3fc0; }
  .gst-tag-prose { background: rgba(225, 112, 85, 0.15); color: #b54a28; }
  .gst-tag-story { background: rgba(229, 81, 0, 0.14);   color: #c43f00; }
  .gst-tag-song  { background: rgba(0, 150, 120, 0.14);  color: #007a5c; }
  .gst-tag-essay { background: rgba(232, 67, 147, 0.14); color: #b8266c; }
  .gst-tag-art   { background: rgba(var(--vermillion-rgb), 0.14);  color: #9c2517; }

  .gst-work-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.1rem; font-weight: 700;
    color: var(--ink); line-height: 1.35; margin-bottom: 10px;
  }
  .gst-work-excerpt {
    font-family: 'Noto Serif', serif;
    font-size: 0.98rem; line-height: 1.72;
    color: var(--ink-mid);
    font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 5;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .gst-work-author {
    font-size: 0.86rem; color: var(--clay);
    margin-top: 14px; letter-spacing: 0.02em;
    font-weight: 600;
  }
  .gst-card-footer {
    padding: 11px 20px 12px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.1);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
  }
  .gst-card-author {
    color: var(--clay);
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px;
  }
  .gst-card-views {
    color: var(--stone);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .gst-av {
    width: 20px; height: 20px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    vertical-align: middle;
  }
  .gst-av--letter {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    color: #fff; font-size: 10px; font-weight: 700;
    font-family: 'Noto Serif', serif;
  }
  .gst-av--lg { width: 28px; height: 28px; font-size: 13px; }
  .tp-user-avatar--img {
    width: 46px; height: 46px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
  }

  /* pagination */
  .gst-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 44px; flex-wrap: wrap;
  }
  .gst-page-info {
    font-size: 0.86rem; color: rgba(255, 255, 255, 0.45);
    text-align: center; margin-top: 12px;
  }
  .gst-pg-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(var(--gold-rgb), 0.35);
    background: transparent;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.93rem; font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer; transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center;
  }
  .gst-pg-btn:hover:not(:disabled) {
    border-color: var(--gold); color: var(--gold-light);
    background: rgba(var(--gold-rgb), 0.12);
  }
  .gst-pg-btn.active {
    background: var(--gold); border-color: var(--gold);
    color: var(--ink); font-weight: 700;
  }
  .gst-pg-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1.5px solid rgba(var(--gold-rgb), 0.35);
    background: transparent; color: rgba(255, 255, 255, 0.55);
    cursor: pointer; transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
  }
  .gst-pg-arrow:hover:not(:disabled) {
    border-color: var(--gold); color: var(--gold-light);
    background: rgba(var(--gold-rgb), 0.12);
  }
  .gst-pg-arrow:disabled, .gst-pg-btn:disabled {
    opacity: 0.25; cursor: not-allowed;
  }

  /* submit button */
  .gst-submit-wrap {
    text-align: center; margin-top: 52px;
  }
  .btn-gst {
    padding: 14px 42px; border-radius: 40px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: white; border: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1rem; letter-spacing: 0.05em;
    cursor: pointer; transition: color 0.25s, background 0.25s, opacity 0.25s, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    text-decoration: none; display: inline-block;
    font-weight: 500;
  }
  .btn-gst:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(139, 105, 20, 0.45);
  }

  /* ══════════════════════════════════════════════════════════
     CONTENT DETAIL MODAL (xem chi tiết tác phẩm)
     ══════════════════════════════════════════════════════════ */
  .content-modal-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10, 5, 0, 0.82);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .content-modal-overlay.open { opacity: 1; pointer-events: all; }
  .content-modal {
    background: var(--paper);
    border-radius: 18px;
    max-width: 760px; width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  }
  .cm-type-bar {
    flex-shrink: 0;
    padding: 10px 16px 10px 28px;
    color: #fff; font-size: 0.78rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cm-thumb {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 480px;
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem;
  }
  .cm-attachment-fixed {
    flex-shrink: 0;
    padding: 16px 36px 18px;
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.12);
    background: var(--paper);
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .cm-attachment-label {
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .cm-body {
    padding: 32px 36px 28px;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }
  .cm-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.35rem; color: var(--ink);
    font-weight: 700; line-height: 1.3;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cm-author {
    font-size: .95rem; color: var(--clay);
    letter-spacing: 0.02em; margin-bottom: 20px;
    font-weight: 500;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cm-text {
    font-family: 'Noto Serif', serif;
    font-size: 1.56rem; line-height: 1.85;
    color: var(--ink-mid); white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
    hyphens: auto;
  }
  .cm-share-row {
    flex-shrink: 0;
    padding: 16px 36px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.12);
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
  }
  .cm-share-label {
    font-size: 0.82rem;
    color: var(--ink-mid);
    font-weight: 500;
  }
  .cm-share-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-left: auto;
  }
  .cm-share-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.86rem; font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
  }
  .cm-share-share {
    background: var(--clay);
    color: #fff;
    border-color: var(--clay);
  }
  .cm-share-share:hover {
    background: #6b3410;
    border-color: #6b3410;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--clay-rgb), 0.3);
  }
  .cm-share-copy {
    background: #fff;
    color: var(--clay);
    border-color: rgba(var(--clay-rgb), 0.25);
  }
  .cm-share-copy:hover {
    background: var(--clay-pale);
    border-color: var(--clay);
  }
  .cm-share-copy.copied {
    background: rgba(var(--moss-rgb), 0.1);
    color: var(--moss);
    border-color: var(--moss);
  }
  .cm-share-qr {
    background: #fff;
    color: var(--ink);
    border-color: rgba(var(--clay-rgb), 0.25);
  }
  .cm-share-qr:hover {
    background: rgba(var(--gold-rgb), 0.08);
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-1px);
  }

  @media (max-width: 560px) {
    .cm-body { padding: 24px 20px 20px; }
    .cm-attachment-fixed { padding: 14px 20px 16px; max-height: 42vh; }
    .cm-share-row {
      padding: 14px 20px;
      gap: 10px;
    }
    .cm-share-label { font-size: 0.8rem; width: 100%; }
    .cm-share-actions { margin-left: 0; width: 100%; }
    .cm-share-btn { flex: 1; justify-content: center; padding: 10px 12px; }
    .cm-meta { padding: 12px 20px 16px; font-size: 0.82rem; gap: 10px; }
  }

  /* SangTac modal: main column (default vertical) */
  .content-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .content-modal-aside { display: none; }

  /* YouTube-style layout cho SangTac modal trên desktop */
  @media (min-width: 1024px) {
    .content-modal {
      max-width: 1400px;
      flex-direction: row;       /* main trái, aside phải */
    }
    .content-modal-main {
      flex: 1; min-width: 0;
    }
    .content-modal-aside {
      display: block;
      width: 400px; flex-shrink: 0;
      overflow-y: auto;
      border-left: 1px solid rgba(var(--clay-rgb), 0.15);
      padding: 24px 16px;
      background: var(--paper);
    }
    .content-modal-aside .htg-d-related {
      margin-top: 0; padding-top: 0;
      border-top: none;
    }
    .content-modal-aside .htg-d-related-title {
      margin-top: 0;
    }
    /* Ẩn inline related ở desktop — aside lên thay */
    .content-modal .htg-related--inline { display: none; }
  }

  .cm-meta {
    flex-shrink: 0;
    padding: 14px 36px 18px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.12);
    font-size: 0.86rem; color: var(--stone);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
  }
  .cm-meta-author {
    color: var(--clay);
    font-weight: 600;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cm-meta-views {
    color: var(--stone);
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .cm-close {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    color: #fff;
    font-size: 16px; font-weight: 400;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
    font-family: system-ui, -apple-system, sans-serif;
  }
  .cm-close:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.05);
  }

  /* ══════════════════════════════════════════════════════════
     GỬI TÁC PHẨM OVERLAY
     ══════════════════════════════════════════════════════════ */
  .tacpham-overlay {
    position: fixed; inset: 0; z-index: 350;
    background: linear-gradient(165deg, var(--paper) 0%, var(--cream) 50%, var(--clay-pale) 100%);
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
  }
  .tacpham-overlay.open { opacity: 1; pointer-events: all; }

  .tacpham-header {
    padding: 22px 52px;
    background: #fff;
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.12);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(92, 61, 46, 0.06);
    gap: 16px;
  }
  .tacpham-header-left {
    flex: 1; min-width: 0;
  }
  .tacpham-header-left h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 1.9rem; color: var(--clay);
    margin-bottom: 2px; font-weight: 700;
    line-height: 1.2;
  }
  .tacpham-header-left p {
    font-size: 0.85rem; color: var(--stone);
    line-height: 1.4;
  }
  .tacpham-close {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid rgba(var(--clay-rgb), 0.25);
    color: var(--clay); padding: 9px 22px; border-radius: 22px;
    cursor: pointer; font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.92rem; font-weight: 500;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .tacpham-close-icon { font-size: 1.05rem; line-height: 1; }
  .tacpham-close:hover {
    background: var(--clay-pale);
    border-color: var(--clay);
  }

  .tacpham-body {
    flex: 1; overflow-y: auto;
    padding: 40px 52px 60px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 40px; align-items: start;
  }
  .tacpham-body::-webkit-scrollbar { width: 8px; }
  .tacpham-body::-webkit-scrollbar-thumb {
    background: rgba(var(--clay-rgb), 0.25);
    border-radius: 10px;
  }
  .tacpham-body::-webkit-scrollbar-track { background: transparent; }

  .tp-section-label {
    font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--clay); margin-bottom: 14px;
    font-weight: 700;
  }

  /* User info card (auto-filled by system) */
  .tp-user-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(92, 61, 46, 0.05);
  }
  .tp-user-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif', serif;
    font-size: 20px; font-weight: 700;
    flex-shrink: 0;
    border: 2px solid var(--gold);
  }
  .tp-user-info { flex: 1; min-width: 0; }
  .tp-user-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 4px;
  }
  .tp-input-plain {
    flex: 1; min-width: 180px;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    font-family: 'Noto Serif', serif;
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--ink) !important;
    border-radius: 0 !important;
    border-bottom: 1px dashed rgba(var(--clay-rgb), 0.25) !important;
  }
  .tp-input-plain:focus {
    border-bottom-color: var(--clay) !important;
    background: transparent !important;
  }
  .tp-role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px; border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(var(--gold-rgb), 0.3);
  }
  .tp-user-meta {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--stone);
  }
  .tp-hint-line {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.82rem; color: var(--stone);
    padding: 8px 4px;
    line-height: 1.5;
  }
  .tp-hint-line > span:first-child { flex-shrink: 0; }

  .tp-type-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 28px;
  }
  .tp-type-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tp-type-btn {
    padding: 8px 12px; border-radius: 10px;
    border: 1.5px solid rgba(var(--clay-rgb), 0.15);
    background: #fff;
    cursor: pointer; transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
  }
  .tp-type-btn:hover {
    border-color: var(--clay);
    background: var(--clay-pale);
    transform: translateY(-1px);
  }
  .tp-type-btn.active {
    border-color: var(--vermillion-d);
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    box-shadow: 0 3px 10px rgba(139, 26, 26, 0.25);
  }
  .tp-type-btn.active .tp-type-name { color: #fff; font-weight: 600; }
  .tp-type-icon {
    font-size: 1rem;
    line-height: 1;
  }
  .tp-type-name {
    font-size: 0.82rem; color: var(--ink-mid);
    font-weight: 500;
    transition: color 0.2s;
  }

  .tp-group { margin-bottom: 22px; }
  .tp-label {
    display: block; font-size: 0.74rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--clay);
    margin-bottom: 9px; font-weight: 700;
  }
  .tp-input, .tp-select, .tp-textarea {
    width: 100%; padding: 13px 18px;
    background: #fff;
    border: 1.5px solid rgba(var(--clay-rgb), 0.18);
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.98rem; color: var(--ink);
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  }
  .tp-input::placeholder, .tp-textarea::placeholder {
    color: var(--stone); opacity: 0.55;
  }
  .tp-input:focus, .tp-textarea:focus, .tp-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.12);
  }
  .tp-select { appearance: none; cursor: pointer; }
  .tp-select option { background: #fff; color: var(--ink); }
  .tp-textarea {
    resize: vertical; min-height: 140px;
    line-height: 1.65;
    font-family: 'Noto Serif', serif;
  }
  .tp-textarea-tall { min-height: 220px; }

  /* Content input with tabs (Editor / File / Link) */
  .tp-content-tabs {
    display: flex; gap: 4px;
    background: var(--clay-pale);
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 14px;
  }
  .tp-content-tab {
    flex: 1;
    padding: 9px 12px;
    border: none; background: transparent;
    color: var(--ink-mid);
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.88rem; font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.18s, background 0.18s, opacity 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
  }
  .tp-content-tab:hover { color: var(--clay); }
  .tp-content-tab.active {
    background: linear-gradient(135deg, var(--clay), var(--vermillion-d));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(139, 26, 26, 0.22);
  }
  .tp-content-panel { display: none; }
  .tp-content-panel.active { display: block; }

  /* Rich text editor */
  .tp-editor-toolbar {
    display: flex; flex-wrap: wrap; gap: 3px;
    padding: 8px 10px;
    background: var(--clay-pale);
    border: 1.5px solid rgba(var(--clay-rgb), 0.18);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }
  .tp-ed-btn {
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--ink-mid);
    cursor: pointer;
    border-radius: 6px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .tp-ed-btn:hover {
    background: #fff;
    color: var(--clay);
    box-shadow: 0 1px 4px rgba(92, 61, 46, 0.1);
  }
  .tp-ed-btn:active {
    background: var(--gold);
    color: #fff;
  }
  .tp-ed-sep {
    width: 1px; height: 22px;
    background: rgba(var(--clay-rgb), 0.2);
    margin: 5px 4px;
    align-self: center;
  }
  .tp-editor {
    width: 100%;
    min-height: 280px;
    padding: 18px 22px;
    background: #fff;
    border: 1.5px solid rgba(var(--clay-rgb), 0.18);
    border-top: none;
    border-radius: 0 0 12px 12px;
    font-family: 'Noto Serif', serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow-y: auto;
    max-height: 500px;
  }
  .tp-editor:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.12);
  }
  .tp-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--stone);
    opacity: 0.5;
    font-style: italic;
    pointer-events: none;
  }
  .tp-editor h3 {
    font-family: 'Noto Serif', serif;
    font-size: 1.3rem; font-weight: 700;
    color: var(--clay);
    margin: 16px 0 8px;
  }
  .tp-editor blockquote {
    border-left: 3px solid var(--gold);
    padding: 4px 0 4px 16px;
    margin: 12px 0;
    color: var(--ink-mid);
    font-style: italic;
    background: var(--clay-pale);
    padding: 10px 16px;
    border-radius: 0 8px 8px 0;
  }
  .tp-editor ul, .tp-editor ol { padding-left: 24px; margin: 10px 0; }
  .tp-editor a { color: var(--clay); text-decoration: underline; }

  .tp-upload-zone {
    border: 2px dashed rgba(var(--clay-rgb), 0.3);
    border-radius: 14px; padding: 40px 20px;
    text-align: center; cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    background: #fff;
  }
  .tp-upload-zone:hover {
    border-color: var(--clay);
    background: var(--clay-pale);
  }
  .tp-upload-zone.has-file {
    border-color: var(--moss);
    border-style: solid;
    background: rgba(var(--moss-rgb), 0.06);
  }
  .tp-upload-zone.tp-upload-zone-dragover {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb), 0.08);
    transform: scale(1.01);
  }
  .tp-upload-icon { font-size: 2.6rem; margin-bottom: 12px; }
  .tp-upload-text {
    font-size: 0.95rem; color: var(--ink-mid); line-height: 1.6;
    font-weight: 500;
  }
  .tp-upload-hint { font-size: 0.78rem; color: var(--stone); margin-top: 6px; }

  /* Preview panel — keep slightly darker for visual separation */
  .tp-preview-panel {
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    border-radius: 18px; padding: 28px 26px;
    position: sticky; top: 20px;
    box-shadow: 0 4px 20px rgba(92, 61, 46, 0.06);
  }
  .tp-preview-label {
    font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--clay); margin-bottom: 18px; font-weight: 700;
  }
  .tp-preview-card {
    background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    min-height: 180px;
  }
  .tp-preview-type-bar {
    padding: 10px 16px; font-size: 0.72rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: white; font-weight: 600;
  }
  .tp-preview-body { padding: 18px 20px 20px; }
  .tp-preview-title {
    font-family: 'Noto Serif', serif;
    font-size: 1.15rem; color: var(--ink);
    font-weight: 700;
    margin-bottom: 8px; line-height: 1.35;
    min-height: 1.4em;
  }
  .tp-preview-excerpt {
    font-family: 'Noto Serif', serif;
    font-size: 0.92rem; color: var(--ink-mid);
    line-height: 1.75; font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: 3em;
  }
  .tp-preview-author {
    font-size: 0.8rem; color: var(--clay); margin-top: 12px;
    font-weight: 500;
  }
  .tp-preview-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 54px 20px; color: var(--stone);
    text-align: center; font-size: 0.92rem; gap: 12px;
  }
  .tp-preview-placeholder span { font-size: 2.8rem; opacity: 0.5; }

  .tp-tips { margin-top: 24px; }
  .tp-tip {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 0; border-bottom: 1px solid rgba(var(--clay-rgb), 0.08);
    font-size: 0.86rem; color: var(--ink-mid);
    line-height: 1.55;
  }
  .tp-tip:last-child { border-bottom: none; }
  .tp-tip-icon { flex-shrink: 0; font-size: 1rem; margin-top: 1px; }

  /* Submit button block — sits inside preview panel */
  .tp-submit-wrap {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.12);
    text-align: center;
  }
  .tp-footer-note {
    font-size: 0.76rem;
    color: var(--stone);
    margin-top: 12px;
    line-height: 1.5;
  }
  .tp-submit-btn {
    padding: 9px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--clay), var(--vermillion-d));
    color: white; border: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.9rem; letter-spacing: 0.02em;
    cursor: pointer; transition: color 0.25s, background 0.25s, opacity 0.25s, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(139, 26, 26, 0.2);
  }
  .tp-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(139, 26, 26, 0.3);
  }

  .tp-success {
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; text-align: center; padding: 60px 40px; gap: 16px;
  }
  .tp-success.show { display: flex; }
  .tp-success-icon { font-size: 4.8rem; }
  .tp-success h3 {
    font-family: 'Noto Serif', serif;
    font-size: 1.9rem; color: var(--clay);
    font-weight: 700;
  }
  .tp-success p {
    font-size: 1rem; color: var(--ink-mid);
    line-height: 1.7; max-width: 480px;
  }
  .tp-success-back {
    margin-top: 8px; padding: 12px 32px; border-radius: 22px;
    border: 1.5px solid var(--clay); background: #fff;
    color: var(--clay); cursor: pointer;
    font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.98rem;
    font-weight: 500;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .tp-success-back:hover {
    background: var(--clay-pale);
  }

  @media (max-width: 900px) {
    .tacpham-header { padding: 14px 16px; gap: 12px; }
    .tacpham-header-left h2 { font-size: 1.35rem; }
    .tacpham-header-left p { font-size: 0.78rem; }
    .tacpham-body { grid-template-columns: 1fr; padding: 24px 20px 48px; gap: 24px; }
    .tp-preview-panel { position: static; }
    .tp-type-grid { grid-template-columns: repeat(3, 1fr); }
    .tp-submit-btn { padding: 8px 18px; font-size: 0.86rem; }
  }
  @media (max-width: 560px) {
    .tacpham-header-left h2 { font-size: 1.2rem; }
    .tacpham-header-left p {
      font-size: 0.74rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Convert close button to icon-only */
    .tacpham-close {
      padding: 0;
      width: 38px; height: 38px;
      border-radius: 50%;
      justify-content: center;
    }
    .tacpham-close-text { display: none; }
    .tacpham-close-icon { font-size: 1.15rem; }
  }

.gst-empty {
  column-span: all;
  -webkit-column-span: all;
  text-align: center;
  padding: 60px 24px;
  color: rgba(255,255,255,0.55);
  font-family: 'Noto Serif', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════
   NAV — cloned from UserWeb_HopThoiGian.html (desktop dropdown)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .nav-links .nav-item {
    position: relative;
    height: 64px;
    display: flex; align-items: center;
  }
  .nav-links .nav-item .nav-link {
    display: flex; align-items: center; gap: 4px;
  }
  .nav-caret {
    font-size: 9px; opacity: 0.65; margin-left: 2px;
    transition: transform 0.2s ease;
    display: inline-block;
  }
  .nav-item:hover .nav-caret { transform: rotate(180deg); opacity: 1; }
  .nav-submenu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 220px;
    background: rgba(var(--ink-rgb), 0.98);
    border: 1px solid rgba(var(--gold-rgb),0.22);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 110;
  }
  .nav-links:not(:has(.sub-open)) .nav-item:hover .nav-submenu,
  .nav-item.sub-open .nav-submenu {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item.sub-open .nav-caret { transform: rotate(180deg); opacity: 1; }
  .nav-submenu::before {
    content: ''; position: absolute;
    top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: rgba(var(--ink-rgb), 0.98);
    border-top: 1px solid rgba(var(--gold-rgb),0.22);
    border-left: 1px solid rgba(var(--gold-rgb),0.22);
  }
  .nav-subitem {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .nav-subitem:hover,
  .nav-subitem.active {
    background: rgba(var(--gold-rgb),0.12);
    color: var(--gold-light);
  }
  .nav-subitem-ico {
    font-size: 15px; width: 20px; text-align: center;
    opacity: 0.85;
  }
}

/* Tablet + Mobile (<1024): hamburger menu, hide nav-links */
@media (max-width: 1023px) {
  .nav-links { display: none !important; }
  .nav-actions { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-links .nav-submenu { display: none !important; }
  .nav-caret { display: none !important; }
  .menu-backdrop, .menu-drawer { display: flex !important; }
  .menu-backdrop:not(.open), .menu-drawer:not(.open) {
    pointer-events: none; opacity: 0;
  }
  .menu-drawer:not(.open) { transform: translate(110%); }
}

.auth-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
  color: rgba(255,255,255,.5);
  transition: color .15s;
}
.auth-pw-toggle:hover { color: var(--gold-light); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }
.auth-error {
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(var(--vermillion-rgb),.15); color: #e74c3c;
  border: 1px solid rgba(var(--vermillion-rgb),.25); margin-bottom: 12px;
  text-align: center;
}
.auth-success {
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(39,174,96,.15); color: #27ae60;
  border: 1px solid rgba(39,174,96,.25); margin-bottom: 12px;
  text-align: center; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   HỘP THỜI GIAN (cloned from UserWeb_HopThoiGian.html)
   ═══════════════════════════════════════════════════════ */
    /* ============================================================
       HỘP THỜI GIAN — Trang tư liệu ký ức làng
       ============================================================ */

    /* HERO của trang Hộp Thời Gian */
    .htg-hero {
      position: relative;
      padding: 92px 20px 36px;
      background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--gold-rgb),0.12), transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--clay-rgb),0.10), transparent 55%),
        linear-gradient(180deg, #1a0f08 0%, #2C1810 100%);
      overflow: hidden;
      border-bottom: 1px solid rgba(var(--gold-rgb),0.18);
    }
    .htg-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(var(--gold-rgb),0.08) 1px, transparent 0);
      background-size: 24px 24px;
      pointer-events: none;
      opacity: 0.5;
    }
    .htg-hero-ornament {
      position: absolute; top: 12px; right: -20px;
      font-family: 'Noto Serif', serif;
      font-size: 180px;
      color: rgba(var(--gold-rgb),0.08);
      font-weight: 400;
      line-height: 0.8;
      pointer-events: none;
      user-select: none;
    }
    .htg-hero-content { position: relative; z-index: 2; }
    .htg-back {
      background: rgba(255,255,255,0.06);
      border: 0.5px solid rgba(var(--gold-rgb),0.25);
      color: var(--gold-light);
      font-size: 12px;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      font-family: 'Be Vietnam Pro', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    .htg-hero-title {
      font-family: 'Noto Serif', serif;
      font-size: 34px;
      font-weight: 600;
      color: #fff;
      line-height: 1.15;
      margin: 22px 0 8px;
    }
    .htg-hero-title em {
      font-style: italic;
      color: var(--gold-light);
      font-weight: 400;
    }
    .htg-hero-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      line-height: 1.55;
      font-family: 'Noto Serif', serif;
      font-style: italic;
      max-width: 320px;
    }

    /* Stats row */
    .htg-stats {
      display: flex; gap: 8px;
      margin-top: 22px;
      flex-wrap: wrap;
    }
    .htg-stat {
      flex: 1; min-width: 78px;
      background: rgba(255,255,255,0.04);
      border: 0.5px solid rgba(var(--gold-rgb),0.15);
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
    }
    .htg-stat-num {
      font-family: 'Noto Serif', serif;
      font-size: 20px;
      font-weight: 700;
      color: var(--gold-light);
      line-height: 1;
    }
    .htg-stat-label {
      font-size: 9.5px;
      color: rgba(255,255,255,0.5);
      margin-top: 4px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* TOOLBAR: search + filter */
    .htg-toolbar {
      position: sticky; top: 52px; z-index: 50;
      background: rgba(250, 246, 238, 0.97);
      padding: 12px 16px 10px;
      border-bottom: 0.5px solid rgba(var(--clay-rgb), 0.12);
    }
    .htg-search {
      position: relative;
      margin-bottom: 10px;
    }
    .htg-search input {
      width: 100%;
      padding: 10px 14px 10px 38px;
      background: #fff;
      border: 1px solid rgba(var(--clay-rgb), 0.18);
      border-radius: 22px;
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 13px;
      color: var(--ink);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .htg-search input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.12);
    }
    .htg-search-ico {
      position: absolute;
      left: 14px; top: 50%; transform: translateY(-50%);
      font-size: 14px;
      color: var(--stone);
      pointer-events: none;
    }
    .htg-filters {
      display: flex; gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin: 0 -16px;
      padding: 2px 16px;
    }
    .htg-filters::-webkit-scrollbar { display: none; }
    .htg-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 18px;
      background: #fff;
      border: 1px solid rgba(var(--clay-rgb), 0.18);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
      font-family: 'Be Vietnam Pro', sans-serif;
      line-height: 1.3;
    }
    .htg-chip:hover {
      border-color: var(--vermillion);
      color: var(--vermillion);
    }
    .htg-chip:active { transform: scale(0.96); }
    .htg-chip.active {
      background: var(--vermillion);
      border-color: var(--vermillion);
      color: #fff;
      box-shadow: 0 3px 10px rgba(var(--vermillion-rgb), 0.35);
      font-weight: 600;
    }
    .htg-chip.active:hover {
      border-color: var(--vermillion);
      color: #fff;
    }

    /* WRAPPER cho nội dung */
    .htg-body { padding: 18px 16px 60px; }

    /* ------------------------------------------------------------
       CARD thống nhất cho mọi loại tư liệu
       (ảnh, video, audio, youtube, bài báo)
       ------------------------------------------------------------ */
    .htg-grid-all {
      display: grid;
      grid-template-columns: 1fr;   /* mobile: 1 cột */
      gap: 14px;
    }

    .htg-card {
      background: #fff;
      border-radius: 14px;
      overflow: hidden;
      border: 0.5px solid rgba(var(--clay-rgb), 0.12);
      box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.05);
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      flex-direction: column;
    }
    .htg-card:hover {
      box-shadow: 0 4px 16px rgba(var(--ink-rgb), 0.1);
      border-color: rgba(var(--gold-rgb), 0.3);
    }
    .htg-card:active {
      transform: scale(0.99);
    }

    /* MEDIA: luôn tỷ lệ 4/3, ngay ngắn */
    .htg-c-media {
      position: relative;
      width: 100%;
      aspect-ratio: 4/3;
      overflow: hidden;
      background: #f0e6d4;
      flex-shrink: 0;
    }
    .htg-c-media img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }
    .htg-card:hover .htg-c-media img {
      transform: scale(1.04);
    }

    /* Category label: góc trên trái */
    .htg-c-cat {
      position: absolute;
      top: 10px; left: 10px;
      background: rgba(var(--ink-rgb), 0.92);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 4px 9px;
      border-radius: 10px;
      z-index: 2;
    }

    /* Format badge: góc phải dưới — hiển thị định dạng tư liệu */
    .htg-c-fmt {
      position: absolute;
      right: 10px; bottom: 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, 0.98);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 4px 9px;
      border-radius: 10px;
      z-index: 2;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
      line-height: 1;
    }
    .htg-c-fmt-ico {
      font-size: 10px;
      line-height: 1;
    }
    /* Màu riêng cho từng định dạng */
    .htg-c-fmt[data-fmt="ảnh"]   { color: #2563eb; }   /* Xanh dương — ảnh */
    .htg-c-fmt[data-fmt="video"] { color: var(--vermillion); }   /* Đỏ gạch — video */
    .htg-c-fmt[data-fmt="audio"] { color: var(--moss); }   /* Xanh rêu — audio */
    .htg-c-fmt[data-fmt="link"]  { color: var(--clay); }   /* Nâu clay — link */
    .htg-c-fmt[data-fmt="file"]  { color: #6b7280; }   /* Xám — file */

    /* Video/YouTube overlay */
    .htg-c-overlay {
      position: absolute;
      inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 100%);
      pointer-events: none;
    }
    .htg-c-play {
      width: 48px; height: 48px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      color: var(--clay);
      padding-left: 3px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Placeholder khi không có media */
    .htg-c-no-media {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--clay-pale), var(--parch));
      display: flex; align-items: center; justify-content: center;
      font-size: 36px;
      color: rgba(var(--clay-rgb), 0.3);
    }

    /* Audio "media": gradient background với sóng âm */
    .htg-c-audio-bg {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #3d5a34 0%, var(--moss) 60%, var(--ink) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 20px;
    }
    .htg-c-audio-icon {
      font-size: 28px;
      opacity: 0.5;
      margin-bottom: 14px;
      filter: grayscale(0.3);
    }
    .htg-c-audio-wave {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 40px;
      width: 80%;
      max-width: 200px;
    }
    .htg-c-audio-wave span {
      flex: 1;
      background: rgba(var(--gold-rgb), 0.65);
      border-radius: 1.5px;
      min-height: 8%;
    }

    /* BODY của card */
    .htg-c-body {
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 6px;
    }

    .htg-c-title {
      font-family: 'Noto Serif', serif;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .htg-c-desc {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--stone);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .htg-c-stats {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 11px;
      color: var(--stone);
      padding-top: 8px;
      border-top: 0.5px solid rgba(var(--clay-rgb), 0.08);
      margin-top: auto;
    }
    .htg-c-stats span {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-variant-numeric: tabular-nums;
    }

    /* Empty state */
    .htg-empty {
      text-align: center;
      padding: 50px 20px;
      color: var(--stone);
    }
    .htg-empty-ico {
      font-size: 48px;
      opacity: 0.4;
      margin-bottom: 10px;
    }
    .htg-empty-title {
      font-family: 'Noto Serif', serif;
      font-size: 15px;
      color: var(--ink-mid);
      margin-bottom: 4px;
    }
    .htg-empty-sub { font-size: 12px; }

    /* ------------------------------------------------------------
       Phân trang
       ------------------------------------------------------------ */
    .htg-pager {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 0.5px solid rgba(var(--clay-rgb), 0.1);
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .htg-pager:empty { display: none; }

    .htg-pg-info {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-size: 12px;
      color: var(--stone);
    }
    .htg-pg-range {
      font-family: 'Noto Serif', serif;
      font-weight: 600;
      color: var(--clay);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .htg-pg-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .htg-pg-nums {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .htg-pg-arrow,
    .htg-pg-num {
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      background: #fff;
      border: 0.5px solid rgba(var(--clay-rgb), 0.18);
      border-radius: 8px;
      color: var(--ink-mid);
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 13px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .htg-pg-arrow {
      font-size: 18px;
      font-weight: 400;
      color: var(--clay);
    }
    .htg-pg-arrow:hover:not(:disabled),
    .htg-pg-num:hover:not(.active) {
      background: rgba(var(--gold-rgb), 0.08);
      border-color: var(--gold);
      color: var(--clay);
    }
    .htg-pg-arrow:active:not(:disabled),
    .htg-pg-num:active {
      transform: scale(0.94);
    }
    .htg-pg-arrow:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .htg-pg-num.active {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--gold-light);
      font-weight: 600;
      cursor: default;
    }
    .htg-pg-ellipsis {
      padding: 0 4px;
      color: var(--stone);
      font-size: 14px;
      user-select: none;
    }

    /* Anchor vô hình */
    #htg-summary-anchor {
      position: relative;
      top: -12px;
      height: 0;
    }

    /* ============================================================
       TRANG CHI TIẾT TƯ LIỆU
       ============================================================ */

    .htg-d-media {
      flex-shrink: 0;
      position: relative;
      width: 100%;
      background: #1a0f08;
      min-height: 200px;
      max-height: 50vh;
      overflow: hidden;
    }
    .htg-d-media.type-image,
    .htg-d-media.type-video,
    .htg-d-media.type-youtube { aspect-ratio: 16/9; }
    .htg-d-media img, .htg-d-media iframe, .htg-d-media video {
      width: 100%; height: 100%;
      display: block;
      border: none;
    }
    .htg-d-media img { object-fit: cover; }
    .htg-d-media video { object-fit: contain; }

    /* Placeholder cho chi tiết khi tư liệu không có media */
    .htg-d-media.htg-d-no-media {
      aspect-ratio: 16/9;
      min-height: 200px;
      background: linear-gradient(135deg, var(--clay-pale), var(--parch));
    }
    .htg-d-no-media-inner {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 80px;
      color: rgba(var(--clay-rgb), 0.3);
    }

    /* CTA card cho link / file / video không có upload (kế thừa style modal) */
    .htg-d-fallback {
      width: 100%;
      min-height: 260px;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 40px 24px;
      background: linear-gradient(135deg, var(--clay-pale), var(--parch)) !important;
      color: var(--ink-mid);
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: filter .15s, transform .15s;
    }
    .htg-d-fallback:hover { filter: brightness(1.03); transform: translateY(-1px); }
    .htg-d-fallback > span:first-child {
      font-size: 56px;
      line-height: 1;
      color: rgba(var(--clay-rgb), 0.55);
    }

    /* Audio detail */
    .htg-d-audio-hero {
      padding: 40px 20px;
      background: linear-gradient(135deg, var(--ink), var(--moss));
      text-align: center;
      color: #fff;
      aspect-ratio: auto;
      min-height: auto;
    }
    .htg-d-audio-disc {
      width: 160px; height: 160px;
      margin: 24px auto 16px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, var(--moss) 0 22px, var(--ink) 22px 26px, var(--moss) 26px 100%);
      position: relative;
      box-shadow: 0 6px 24px rgba(0,0,0,0.4);
      animation: htgSpin 12s linear infinite paused;
    }
    .htg-d-audio-disc.playing { animation-play-state: running; }
    .htg-d-audio-disc::before {
      content: '';
      position: absolute; inset: 12px;
      border-radius: 50%;
      border: 1px dashed rgba(255,255,255,0.12);
    }
    .htg-d-audio-disc::after {
      content: '';
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 10px; height: 10px;
      background: var(--gold);
      border-radius: 50%;
    }
    @keyframes htgSpin { to { transform: rotate(360deg); } }

    /* Body nội dung chi tiết */
    .htg-d-body {
      padding: 20px 18px 24px;
    }
    .htg-d-cat-row {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 10px;
    }
    .htg-d-cat {
      font-size: 16px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--clay);
      font-weight: 600;
    }
    .htg-d-title {
      font-family: 'Noto Serif', serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.3;
      margin-bottom: 10px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .htg-d-stats {
      display: flex; align-items: center; gap: 16px;
      padding: 10px 0;
      border-top: 0.5px solid rgba(var(--clay-rgb), 0.12);
      border-bottom: 0.5px solid rgba(var(--clay-rgb), 0.12);
      margin-bottom: 18px;
      font-size: 18px;
      color: var(--stone);
    }
    .htg-d-stats > span {
      display: inline-flex; align-items: center; gap: 4px;
    }
    .htg-d-stats-ico {
      font-size: 21px;
    }
    .htg-d-desc {
      font-family: 'Noto Serif', serif;
      font-size: 22.5px;
      line-height: 1.75;
      color: var(--ink);
      margin-bottom: 18px;
      overflow-wrap: anywhere;
      word-break: break-word;
      text-align: left;
      hyphens: auto;
    }
    .htg-d-desc p { margin-bottom: 12px; }
    .htg-d-desc p:last-child { margin-bottom: 0; }

    /* Action bar: share / QR — cố định phía dưới modal */
    .htg-d-actions {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 14px 18px;
      background: var(--paper);
      border-top: 1px solid rgba(var(--clay-rgb), 0.12);
    }

    /* Bài khác (related) — style YouTube: list dọc, thumb 16:9 bên trái, info phải */
    .htg-d-related {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 2px solid rgba(var(--clay-rgb), 0.22);
    }
    .htg-d-related-title {
      font-family: 'Noto Serif', serif;
      font-size: 16px;
      color: var(--vermillion);
      margin: 0 0 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .htg-d-related-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .htg-d-related-card {
      display: flex;
      gap: 12px;
      padding: 6px;
      border-radius: 10px;
      cursor: pointer;
      background: transparent;
      transition: background .12s;
      align-items: flex-start;
    }
    .htg-d-related-card:hover { background: rgba(var(--gold-rgb), 0.06); }
    .htg-d-related-card:hover .htg-d-related-title2 { color: var(--vermillion); }
    .htg-d-related-thumb {
      flex-shrink: 0;
      width: 168px;
      aspect-ratio: 16 / 9;       /* YouTube ratio */
      border-radius: 10px;
      overflow: hidden;
      background: var(--paper);
      display: flex; align-items: center; justify-content: center;
    }
    .htg-d-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .htg-d-related-thumb-fallback { font-size: 32px; opacity: .55; }
    .htg-d-related-body {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 4px;
      padding-top: 2px;
    }
    .htg-d-related-cat {
      font-size: 11px;
      color: var(--gold);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .htg-d-related-title2 {
      font-family: 'Be Vietnam Pro', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color .12s;
    }
    .htg-d-related-meta {
      font-size: 12px;
      color: var(--stone);
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 2px;
    }
    @media (max-width: 600px) {
      .htg-d-related-thumb { width: 140px; }
      .htg-d-related-title2 { font-size: 13px; }
    }
    @media (min-width: 768px) {
      .htg-d-related-thumb { width: 180px; }
      .htg-d-related-title2 { font-size: 15px; }
    }
    .htg-d-act {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 0 16px;
      background: #fff;
      border: 1px solid rgba(var(--clay-rgb), 0.16);
      border-radius: 12px;
      font-family: 'Be Vietnam Pro', sans-serif;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.15s, background 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .htg-d-act:hover {
      border-color: var(--gold);
      background: rgba(var(--gold-rgb), 0.04);
    }
    .htg-d-act:active {
      transform: scale(0.97);
    }
    .htg-d-act-ico {
      font-size: 18px;
      line-height: 1;
    }
    .htg-d-act-label {
      font-size: 13px;
      color: var(--ink);
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .htg-d-act.share {
      background: var(--clay);
      border-color: var(--clay);
    }
    .htg-d-act.share .htg-d-act-label { color: #fff; }
    .htg-d-act.share .htg-d-act-ico { color: #fff; }
    .htg-d-act.share:hover {
      background: #6b3410;
      border-color: #6b3410;
    }
    .htg-d-act.link .htg-d-act-ico { color: var(--clay); }
    .htg-d-act.qr .htg-d-act-ico { color: var(--ink); }
    .htg-d-act.qr:hover {
      border-color: var(--gold);
      background: rgba(var(--gold-rgb), 0.08);
    }


    /* Toast */
    .htg-toast {
      position: fixed;
      left: 50%; bottom: 30px;
      transform: translateX(-50%) translateY(20px);
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      padding: 10px 18px;
      border-radius: 22px;
      z-index: 400;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      display: flex; align-items: center; gap: 6px;
    }
    .htg-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ============================================================
       MODAL CHI TIẾT TƯ LIỆU
       Mobile: toàn màn hình trượt lên từ đáy
       Desktop: modal căn giữa, nền mờ bao quanh
       ============================================================ */
    .htg-modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(20, 12, 8, 0.82);
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .htg-modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .htg-modal {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      top: 0;
      background: var(--paper);
      z-index: 210;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .htg-modal.open {
      transform: translateY(0);
    }

    .htg-modal-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    /* ── Bộ sưu tập (gallery carousel) ── */
    .htg-gallery {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #1a0f08;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      max-height: 60vh;          /* cap để fit viewport — arrows ở top:50% sẽ về center */
    }

    /* ── Thumb-link cho file/link types: thumbnail đại diện, click mở tab mới ── */
    .htg-d-thumb-link {
      display: block;
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: 60vh;
      background: #1a0f08;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    /* Badge "Mở tab mới" ở góc trên-phải — luôn nhìn thấy */
    .htg-d-thumb-link::before {
      content: "↗ Mở ở tab mới";
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 2;
      background: rgba(0, 0, 0, 0.78);
      color: #fff;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .02em;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    }
    .htg-d-thumb-link:hover {
      transform: scale(1.01);
    }
    .htg-d-thumb-link:hover .htg-d-thumb-link-cta {
      background: linear-gradient(180deg, transparent 0%, rgba(var(--vermillion-rgb), .92) 100%);
    }
    .htg-d-thumb-link:hover::before {
      background: rgba(var(--vermillion-rgb), 0.92);
    }
    .htg-d-thumb-link-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .htg-d-thumb-link-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      color: rgba(255, 255, 255, 0.4);
    }
    .htg-d-thumb-link-cta {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .82) 100%);
      color: #fff;
      padding: 32px 20px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      font-size: .92rem;
      transition: background .2s ease;
    }
    .htg-d-thumb-link-url {
      font-size: .78rem;
      font-weight: 400;
      opacity: .82;
      margin-left: auto;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Mobile: gọn hơn */
    @media (max-width: 600px) {
      .htg-d-thumb-link-cta {
        padding: 24px 14px 12px;
        font-size: .85rem;
      }
      .htg-d-thumb-link-url { display: none; }
    }

    /* Transition lật ảnh/video — fade + slide nhẹ theo hướng */
    .lv-slide-next-enter-active,
    .lv-slide-next-leave-active,
    .lv-slide-prev-enter-active,
    .lv-slide-prev-leave-active {
      transition: opacity 0.36s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }
    .lv-slide-next-enter-from { opacity: 0; transform: translateX(36px) scale(0.985); }
    .lv-slide-next-leave-to   { opacity: 0; transform: translateX(-26px) scale(1.015); }
    .lv-slide-prev-enter-from { opacity: 0; transform: translateX(-36px) scale(0.985); }
    .lv-slide-prev-leave-to   { opacity: 0; transform: translateX(26px) scale(1.015); }
    .lv-slide-next-enter-to,
    .lv-slide-next-leave-from,
    .lv-slide-prev-enter-to,
    .lv-slide-prev-leave-from {
      opacity: 1; transform: translateX(0) scale(1);
    }
    @media (prefers-reduced-motion: reduce) {
      .lv-slide-next-enter-active,
      .lv-slide-next-leave-active,
      .lv-slide-prev-enter-active,
      .lv-slide-prev-leave-active {
        transition: opacity 0.18s ease;
      }
      .lv-slide-next-enter-from,
      .lv-slide-next-leave-to,
      .lv-slide-prev-enter-from,
      .lv-slide-prev-leave-to {
        transform: none;
      }
    }
    .htg-gallery .htg-gallery-frame {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      display: block;
      cursor: zoom-in;
    }
    .htg-gallery video.htg-gallery-frame {
      cursor: default;
      background: #000;
    }
    .htg-gallery-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px; height: 42px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.72);
      border: none;
      color: #fff;
      font-size: 26px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      transition: background 0.15s;
    }
    .htg-gallery-nav:hover { background: rgba(0, 0, 0, 0.75); }
    .htg-gallery-nav.prev { left: 14px; }
    .htg-gallery-nav.next { right: 14px; }
    .htg-gallery-counter {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 5px 12px;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.78);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      z-index: 3;
    }
    .htg-gallery-dots {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      z-index: 3;
    }
    .htg-gallery-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: color 0.18s, background 0.18s, opacity 0.18s, transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    }
    .htg-gallery-dot.active {
      background: #fff;
      width: 22px;
      border-radius: 4px;
    }
    .htg-gallery-dot:hover { background: rgba(255, 255, 255, 0.7); }

    /* ── Nhạc nền (BGM) ── */
    .htg-bgm-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.08), rgba(var(--clay-rgb), 0.05));
      border-bottom: 1px solid rgba(var(--clay-rgb), 0.15);
    }
    .htg-d-media-qr {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 5;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.78);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      transition: background .15s ease, transform .15s ease;
    }
    .htg-d-media-qr:hover {
      background: rgba(0, 0, 0, 0.82);
      transform: scale(1.05);
    }
    .htg-bgm-icon {
      font-size: 18px;
      flex-shrink: 0;
      animation: htgBgmPulse 2.4s ease-in-out infinite;
    }
    @keyframes htgBgmPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }
    .htg-bgm-player {
      flex: 1;
      height: 32px;
      min-width: 0;
    }
    @media (min-width: 768px) {
      .htg-gallery-nav { width: 48px; height: 48px; font-size: 30px; }
    }

    /* Nút đóng: tròn trắng, nổi rõ ở góc trên phải */
    .htg-modal-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 40px; height: 40px;
      background: rgba(255, 255, 255, 0.98);
      border: none;
      border-radius: 50%;
      color: var(--ink);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
      -webkit-tap-highlight-color: transparent;
      z-index: 15;
      transition: transform 0.15s;
      line-height: 1;
    }
    .htg-modal-close:hover {
      transform: scale(1.05);
    }
    .htg-modal-close:active {
      transform: scale(0.92);
    }

    /* Desktop: modal căn giữa, có bo tròn (chỉ khi mở) */
    @media (min-width: 768px) {
      .htg-modal {
        top: 32px; bottom: 32px;
        left: 50%;
        right: auto;
        width: min(900px, calc(100vw - 48px));
        transform: translate(-50%, calc(100vh + 100px));
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      }
      .htg-modal.open {
        transform: translate(-50%, 0);
        border-radius: 16px;
      }
      .htg-modal-close {
        top: 16px; right: 16px;
        width: 42px; height: 42px;
        font-size: 17px;
      }
    }
    /* HopThoiGian modal: main column (default vertical) */
    .htg-modal-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    /* Aside ẩn mặc định (mobile/tablet) — RelatedList render inline trong scroll */
    .htg-modal-aside { display: none; }

    @media (min-width: 1024px) {
      .htg-modal {
        top: 48px; bottom: 48px;
        width: min(1400px, calc(100vw - 48px));
        flex-direction: row;     /* YouTube layout: main trái, sidebar phải */
      }
      .htg-modal-main {
        flex: 1; min-width: 0;
      }
      .htg-modal-aside {
        display: block;
        width: 400px; flex-shrink: 0;
        overflow-y: auto;
        border-left: 1px solid rgba(var(--clay-rgb), 0.15);
        padding: 24px 16px;
        background: var(--paper);
      }
      .htg-modal-aside .htg-d-related {
        margin-top: 0; padding-top: 0;
        border-top: none;
      }
      .htg-modal-aside .htg-d-related-title {
        margin-top: 0;
      }
      /* Ẩn related inline (mobile copy) trên desktop — aside lên thay */
      .htg-related--inline { display: none; }
      /* Modal bo góc 16px cả 4 góc khi open. Aside last-child bo góc phải để khớp. */
      .htg-modal.open .htg-modal-aside:last-child {
        border-radius: 0 16px 16px 0;
      }

      /* VinhDanh modal: KHÔI PHỤC layout đơn cột (không YouTube split) */
      .htg-modal.vd-modal-narrow {
        flex-direction: column;
        width: min(540px, calc(100vw - 64px));
      }
      .htg-modal.vd-modal-narrow .htg-d-media { border-radius: 16px 16px 0 0; }
    }

    /* VinhDanh: ảnh thẻ vinh danh / portrait dạng dọc → bỏ aspect 16:9, hiện full */
    .htg-modal.vd-modal-narrow .htg-d-media.type-image {
      aspect-ratio: auto;
      max-height: 70vh;
      background: #1a1a1a;
    }
    .htg-modal.vd-modal-narrow .htg-d-media.type-image img {
      width: 100%;
      height: auto;
      max-height: 70vh;
      object-fit: contain;
      display: block;
    }

    /* Khi modal mở, khoá scroll body */
    body.htg-modal-open {
      overflow: hidden;
    }

    /* Bo góc media ở đầu modal trên desktop */
    @media (min-width: 768px) {
      .htg-modal .htg-d-media {
        border-radius: 16px 16px 0 0;
        overflow: hidden;
      }
    }

    /* ============================================================
       HỘP THỜI GIAN — Responsive breakpoints
       - Mobile (default): 1 cột
       - Tablet (≥640px):  2 cột
       - Desktop (≥1024px): 3 cột
       ============================================================ */
    @media (min-width: 640px) {
      .htg-grid-all {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .htg-c-title { font-size: 15px; }
    }

    @media (min-width: 768px) {
      /* Hero rộng hơn, căn giữa */
      /* Hero: background full-width, nhưng nội dung căn đúng với nav (1280 + 48) */
      .htg-hero {
        padding: 128px 0 56px;   /* Chỉ padding dọc; ngang để content tự quản */
      }
      .htg-hero-content {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 48px;
        box-sizing: border-box;
      }
      .htg-hero-title { font-size: 48px; }
      .htg-hero-sub { font-size: 15px; max-width: 520px; }
      .htg-hero-ornament { font-size: 280px; top: -20px; right: 40px; }
      .htg-stats { max-width: 640px; gap: 12px; }

      /* Toolbar: nền full-width, nội dung căn đúng với nav */
      .htg-toolbar {
        top: 64px;
        padding: 16px 0 14px;
      }
      .htg-toolbar > .htg-search,
      .htg-toolbar > .htg-filters {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 48px;
        padding-right: 48px;
        box-sizing: border-box;
      }
      /* Icon 🔍 là position:absolute bên trong .htg-search — phải dịch theo 48px padding */
      .htg-toolbar > .htg-search > .htg-search-ico {
        left: 62px;
      }
      .htg-filters {
        padding-top: 2px;
        padding-bottom: 2px;
      }

      /* Body: giới hạn + padding ngang giống nav */
      .htg-body {
        max-width: 1280px;
        margin: 0 auto;
        padding: 24px 48px 80px;
        box-sizing: border-box;
      }
    }

    @media (min-width: 1024px) {
      .htg-grid-all {
        grid-template-columns: repeat(3, 1fr);   /* PC: 3 cột */
        gap: 22px;
      }
      .htg-c-title { font-size: 16px; }
      .htg-c-body { padding: 14px 16px 16px; gap: 8px; }
      .htg-c-desc { font-size: 13px; -webkit-line-clamp: 3; }

      /* Hero ornament vừa phải */
      .htg-hero { padding: 140px 0 72px; }
      .htg-hero-title { font-size: 56px; }
    }

    @media (min-width: 1280px) {
      .htg-grid-all { gap: 26px; }
      .htg-hero-title { font-size: 64px; }
    }

    /* Trang chi tiết: giới hạn max-width trên PC */
    @media (min-width: 768px) {
      .htg-d-media {
        max-height: 55vh;
      }
      .htg-d-media.type-image { aspect-ratio: 16/9; max-height: 480px; }
      .htg-d-body {
        max-width: 760px;
        margin: 0 auto;
        padding: 28px 48px 32px;
      }
      .htg-d-title { font-size: 26px; }
      .htg-d-desc { font-size: 16px; line-height: 1.7; }
      .htg-d-actions {
        grid-template-columns: repeat(2, 200px);
        justify-content: center;
        padding: 16px 24px;
      }
    }

/* ═══════════════════════════════════════════════════════════
   CLONE khi-thieng-right từ UserWeb_DTG.html
   Mobile: scroll-horizontal.webp làm nền cho mobile-stats
   Desktop: scroll-vertical.webp làm nền cho .khi-thieng-stats,
   quote vàng italic span 2 cột, stats text vàng nhạt no-card
   ═══════════════════════════════════════════════════════════ */

/* Mobile: khi-thieng-right PHẢI ẩn, chỉ hiện khi-chieuthu-wrap thay thế.
   Rule này đặt cuối file để thắng mọi rule trước trong cascade. */
@media (max-width: 767px) {
  .khi-thieng-right { display: none !important; }
}

.khi-mobile-stats {
  background-image: url('/images/scroll-horizontal.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  aspect-ratio: 5 / 3;
  padding: 14px 64px !important;
  align-content: center;
  border-top: none !important;
  border-bottom: none !important;
  margin: 8px 0 0 !important;
}
.khi-mobile-stat,
.khi-mobile-stat:nth-child(1),
.khi-mobile-stat:nth-child(2),
.khi-mobile-stat:nth-child(3),
.khi-mobile-stat:nth-child(4) {
  text-align: center !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none !important;
  padding: 6px 4px !important;
}

@media (min-width: 768px) {
  .khi-mobile-stats { display: none !important; }

  /* Reset .khi-thieng-right từ ink-card → transparent + sticky */
  .khi-thieng-right {
    background: transparent !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    position: sticky;
    top: 84px;
  }

  /* Quote span full width, italic vàng nhạt với dấu ngoặc kép */
  .khi-thieng-quote {
    font-family: 'Noto Serif', serif !important;
    font-size: 14px !important;
    font-style: italic !important;
    color: #FFE9A8 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    padding: 0 8px !important;
    margin-bottom: 18px !important;
    text-shadow: 0 1px 2px rgba(80,20,10,0.55);
    grid-column: 1 / -1;
    border-left: none !important;
  }
  .khi-thieng-quote::before { content: "❝ "; color: rgba(255,233,168,0.6); }
  .khi-thieng-quote::after  { content: " ❞"; color: rgba(255,233,168,0.6); }

  /* Stats grid với background scroll dọc + 4 ô + quote span */
  .khi-thieng-stats {
    position: relative;
    background-image: url('/images/scroll-vertical.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    display: grid !important;
    grid-template-rows: auto 1fr 1fr !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    padding: 52px 56px 58px !important;
    margin-top: 8px !important;
    min-height: 360px !important;
    aspect-ratio: 500 / 515 !important;
  }

  /* 4 ô stat — bỏ card bg/border, text vàng */
  .khi-stat {
    text-align: center !important;
    padding: 10px 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .khi-stat-num {
    font-family: 'Noto Serif', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #FFE9A8 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 4px rgba(80,20,10,0.55);
  }
  .khi-stat-label {
    font-size: 11px !important;
    color: rgba(255,240,210,0.85) !important;
    margin-top: 6px !important;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(80,20,10,0.6);
  }
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — nền cream sáng (tone Văn Hóa) áp dụng cho mọi trang
   ═══════════════════════════════════════════════════════════ */
.nav {
  background: rgba(var(--paper-rgb), 0.97) !important;
  border-bottom: 1px solid rgba(var(--clay-rgb), 0.15) !important;
  box-shadow: none !important;
}
.nav.scrolled {
  background: rgba(var(--paper-rgb), 0.98) !important;
  border-bottom-color: rgba(var(--clay-rgb), 0.22) !important;
  box-shadow: 0 2px 14px rgba(var(--ink-rgb), 0.08) !important;
}
.nav::before {
  opacity: 0 !important;
  display: none;
}

/* Logo + text màu tối */
.nav-logo span {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.nav-logo small {
  color: var(--clay) !important;
  text-shadow: none !important;
}
.nav-logo .seal {
  background: rgba(var(--ink-rgb),0.35) !important;
  border-color: var(--clay) !important;
  color: var(--clay) !important;
}

/* Nav links — màu đậm, hover/active màu clay */
.nav-link {
  color: var(--ink-mid) !important;
  text-shadow: none !important;
}
.nav-link:hover {
  color: var(--clay) !important;
}
.nav-link.active {
  color: var(--clay) !important;
  border-bottom-color: var(--gold) !important;
}

/* Nav buttons — outline clay style */
.nav-btn-login {
  background: transparent !important;
  color: var(--clay) !important;
  border-color: var(--clay) !important;
}
.nav-btn-login:hover {
  background: var(--clay-pale) !important;
}
.nav-btn-register {
  background: linear-gradient(135deg, var(--clay), var(--vermillion-d)) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Hamburger cho mobile — nền cream box, viền clay nhạt, line nâu đậm */
.hamburger {
  background: rgba(var(--cream-rgb), 0.85) !important;
  border: 1px solid rgba(var(--clay-rgb), 0.22) !important;
  border-radius: 9px !important;
  padding: 9px 10px !important;
  filter: none !important;
  box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.06);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hamburger:hover {
  background: #fff !important;
  border-color: rgba(var(--clay-rgb), 0.4) !important;
}
.hamburger:active { transform: scale(0.96); }
.hamburger span {
  width: 20px !important;
  height: 2.5px !important;
  border-radius: 2px;
  background: var(--clay) !important;
}
.nav.scrolled .hamburger span {
  background: var(--clay) !important;
}

/* User menu avatar/text trên navbar (nếu logged in) — màu đậm */
.user-menu-pc-name {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.user-menu-pc-caret {
  color: var(--clay) !important;
}

/* ═══════════════════════════════════════════════════════════
   DETAIL PAGES (Đình/Đền/Chùa) — clone từ html-DS-Dinh/den/chua
   ═══════════════════════════════════════════════════════════ */
  .dt-hero {
    margin-top: 64px;
    position: relative;
    min-height: 520px;
    display: flex; align-items: flex-end;
    background: linear-gradient(135deg, #1a0505 0%, #2a0a0a 60%, #3d1010 100%);
    color: #fff;
    overflow: hidden;
  }
  .dt-hero-bg {
    position: absolute; inset: 0;
    opacity: 0.6;
  }
  .dt-hero-bg svg { width: 100%; height: 100%; display: block; }
  .dt-hero-grad {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 90% at 80% 50%, rgba(var(--gold-rgb), 0.22) 0%, transparent 65%),
      linear-gradient(180deg, rgba(26,5,5,0.1) 0%, rgba(26,5,5,0.85) 80%, rgba(26,5,5,0.98) 100%);
    pointer-events: none;
  }
  .dt-hero::after {
    content: '亭'; position: absolute;
    font-family: 'Noto Serif', serif;
    font-size: 460px;
    color: rgba(var(--gold-rgb), 0.05);
    top: 50%; left: -60px; transform: translateY(-50%);
    font-weight: 700;
    user-select: none; pointer-events: none;
    line-height: 1;
  }
  .dt-hero-inner {
    position: relative; z-index: 2;
    max-width: 1320px; margin: 0 auto;
    padding: 80px 28px 56px;
    width: 100%;
    display: flex; align-items: flex-end; gap: 40px;
  }
  .dt-hero-portrait-wrap {
    width: 280px;
    aspect-ratio: 5/6;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ink);
    box-shadow: 0 18px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--gold-rgb),0.3), 0 0 0 6px rgba(var(--gold-rgb),0.1);
    flex-shrink: 0;
  }
  .dt-hero-portrait {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .dt-hero-text { min-width: 0; }
  .dt-hero-life {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
    margin-top: 16px;
  }
  @media (max-width: 900px) {
    .dt-hero-portrait-wrap { width: 160px; }
    .dt-hero-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  }
  .dt-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 28px;
    text-transform: uppercase;
  }
  .dt-breadcrumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
  .dt-breadcrumb a:hover { color: var(--gold-light); }
  .dt-breadcrumb .sep { color: var(--gold); opacity: 0.5; font-size: 8px; }
  .dt-breadcrumb .here { color: var(--gold-light); font-weight: 600; }

  .dt-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-light); font-weight: 700;
    padding: 7px 16px;
    background: rgba(var(--gold-rgb), 0.14);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    border-radius: 20px;
    margin-bottom: 22px;
  }
  .dt-hero-tag::before {
    content: ''; width: 6px; height: 6px;
    background: var(--gold); transform: rotate(45deg);
  }
  .dt-hero-title {
    font-family: 'Noto Serif', serif;
    font-size: clamp(42px, 6vw, 78px);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
  }
  .dt-hero-title em {
    font-style: italic;
    color: var(--gold-light);
    font-weight: 600;
  }
  .dt-hero-sub {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: clamp(16px, 1.8vw, 20px);
    color: rgba(232, 197, 71, 0.75);
    margin-bottom: 28px;
    max-width: 640px;
    line-height: 1.6;
  }

  .dt-hero-seal {
    position: absolute;
    right: 28px; top: 92px;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
  }
  .dt-hero-seal svg { width: 100%; height: 100%; }
  @media (max-width: 900px) { .dt-hero-seal { display: none; } }

  /* ══════════════════════════════════════════════════════════
     TOC / QUICK STATS BAR (sticky below nav)
     ══════════════════════════════════════════════════════════ */
  .dt-bar {
    background: #fff;
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.12);
    box-shadow: 0 4px 16px rgba(92, 61, 46, 0.05);
    position: sticky;
    top: 64px;
    z-index: 50;
  }
  .dt-bar-inner {
    max-width: 1320px; margin: 0 auto;
    padding: 0 28px;
    display: flex; align-items: stretch;
    justify-content: space-between;
    gap: 20px;
  }

  /* ── Desktop (default): horizontal scrollable tabs ── */
  .dt-tabs {
    display: flex; gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
  }
  .dt-tabs::-webkit-scrollbar { display: none; }
  .dt-tab {
    padding: 18px 18px;
    font-size: 13px; font-weight: 600;
    color: var(--stone);
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .dt-tab:hover { color: var(--clay); }
  .dt-tab.active {
    color: var(--clay);
    border-bottom-color: var(--gold);
  }
  .dt-tab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    font-size: 12px;
    opacity: 0.85;
  }
  .dt-tab-label { display: inline; }

  /* ── Mobile (≤ 768px): pills scroll ngang ── */
  @media (max-width: 768px) {
    .dt-bar {
      border-bottom: 1px solid rgba(var(--clay-rgb), 0.12);
      box-shadow: 0 2px 8px rgba(92, 61, 46, 0.04);
      background: rgba(250, 246, 238, 0.98);
      position: sticky;
      top: 64px;
    }
    .dt-bar-inner {
      padding: 0;
      display: block;
      position: relative;
      max-width: none;
    }
    /* Gradient fade ở hai bên để gợi ý có thể cuộn */
    .dt-bar-inner::before,
    .dt-bar-inner::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 28px;
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.2s;
    }
    .dt-bar-inner::before {
      left: 0;
      background: linear-gradient(90deg, rgba(250, 246, 238, 0.98) 0%, transparent 100%);
      opacity: 0;
    }
    .dt-bar-inner::after {
      right: 0;
      background: linear-gradient(270deg, rgba(250, 246, 238, 0.98) 0%, transparent 100%);
    }
    .dt-bar-inner.scrolled-start::before { opacity: 1; }
    .dt-bar-inner.scrolled-end::after { opacity: 0; }

    .dt-tabs {
      display: flex;
      flex-direction: row;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      padding: 12px 16px;
      width: 100%;
      border: none;
      scrollbar-width: none;
    }
    .dt-tabs::-webkit-scrollbar { display: none; }

    .dt-tab {
      flex: 0 0 auto;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 7px;
      padding: 10px 16px 10px 12px;
      border: 1px solid rgba(var(--clay-rgb), 0.22);
      border-bottom: 1px solid rgba(var(--clay-rgb), 0.22);
      border-radius: 999px;
      background: #fff;
      white-space: nowrap;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1;
      color: var(--ink-mid);
      position: relative;
      min-height: 0;
      width: auto;
      scroll-snap-align: start;
      transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .dt-tab:hover {
      background: var(--clay-pale);
      border-color: var(--clay);
      color: var(--clay);
    }
    .dt-tab.active {
      background: linear-gradient(135deg, var(--vermillion-d) 0%, var(--vermillion) 100%);
      border-color: var(--vermillion-d);
      color: #fff;
      box-shadow: 0 4px 14px rgba(139, 26, 26, 0.28);
    }
    .dt-tab-icon {
      width: 22px; height: 22px;
      font-size: 13px;
      opacity: 1;
      background: rgba(var(--gold-rgb), 0.15);
      border-radius: 50%;
      border: 1px solid rgba(var(--gold-rgb), 0.3);
      transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
      flex-shrink: 0;
    }
    .dt-tab.active .dt-tab-icon {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(232, 197, 71, 0.4);
    }
    .dt-tab-label {
      font-weight: 600;
      display: inline;
    }

    /* Content area adjustments */
    .dt-content.active {
      display: block;
    }
    .dt-content .dt-grid { grid-template-columns: 1fr; gap: 28px; }
    .dt-content .dt-aside { position: relative; top: auto; }
  }
  .dt-bar-actions {
    display: none; align-items: center; gap: 10px;
    padding: 12px 0;
  }
  @media (min-width: 1100px) { .dt-bar-actions { display: flex; } }

  /* Mobile (≤768px): tabs scroll bên trái, 2 nút icon compact bên phải bằng flex (không overlap) */
  @media (max-width: 768px) {
    .dt-bar-inner {
      display: flex !important;
      flex-direction: row;
      align-items: stretch;
    }
    .dt-tabs {
      flex: 1;
      min-width: 0;
    }
    .dt-bar-actions {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      gap: 6px;
      padding: 0 10px 0 6px;
      background: rgba(250, 246, 238, 0.98);
      border-left: 1px solid rgba(var(--clay-rgb), 0.08);
      z-index: 3;
    }
    .dt-bar-actions .dt-bar-btn {
      padding: 0;
      font-size: 0;
      gap: 0;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      justify-content: center;
    }
    .dt-bar-actions .dt-bar-btn svg {
      width: 16px;
      height: 16px;
    }
    /* Tắt gradient fade phải (đã có viền actions thay) */
    .dt-bar-inner::after { display: none; }
  }
  .dt-bar-btn {
    padding: 9px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid transparent;
  }
  .dt-bar-btn.ghost {
    background: transparent;
    color: var(--ink-mid);
    border-color: rgba(var(--clay-rgb), 0.25);
  }
  .dt-bar-btn.ghost:hover { background: var(--clay-pale); color: var(--clay); border-color: var(--clay); }
  .dt-bar-btn.solid {
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    color: #fff;
  }
  .dt-bar-btn.solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 26, 26, 0.3);
  }

  /* ══════════════════════════════════════════════════════════
     BODY WRAPPER / TAB CONTENT
     ══════════════════════════════════════════════════════════ */
  .dt-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 28px 80px;
  }
  .dt-content { display: none; }
  .dt-content.active {
    display: block;
    animation: fadeUp 0.35s ease;
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

  .dt-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
  }
  @media (max-width: 960px) {
    .dt-grid { grid-template-columns: 1fr; gap: 36px; }
    .dt-aside { position: relative !important; top: auto !important; }
  }
  .dt-main {}
  .dt-aside {
    position: sticky;
    top: 140px;
  }

  .block-label {
    font-size: 10px; letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
  }
  .block-label::before {
    content: ''; width: 18px; height: 1.5px;
    background: var(--gold);
  }

  .dt-heading {
    font-family: 'Noto Serif', serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
  }
  .dt-heading em { color: var(--clay); font-style: italic; }

  .prose {
    font-size: 16px;
    color: var(--ink-mid);
    line-height: 1.85;
  }
  .prose p { margin-bottom: 16px; }
  .prose p:last-child { margin-bottom: 0; }
  .prose .lead::first-letter {
    font-family: 'Noto Serif', serif;
    font-size: 52px;
    font-weight: 700;
    color: var(--vermillion-d);
    float: left;
    line-height: 0.9;
    padding: 6px 10px 0 0;
  }

  /* Pull quote */
  .pull-quote {
    position: relative;
    padding: 34px 36px 34px 52px;
    margin: 36px 0;
    background: linear-gradient(135deg, rgba(var(--vermillion-rgb), 0.05) 0%, rgba(var(--gold-rgb), 0.02) 100%);
    border-left: 3px solid var(--vermillion-d);
    border-radius: 0 10px 10px 0;
  }
  .pull-quote::before {
    content: '“';
    position: absolute;
    top: -12px; left: 16px;
    font-family: 'Noto Serif', serif;
    font-size: 100px;
    color: var(--vermillion-d);
    opacity: 0.35;
    line-height: 1;
  }
  .pull-quote p {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 12px;
  }
  .pull-quote cite {
    font-size: 12px; color: var(--stone);
    font-style: normal;
    letter-spacing: 0.06em; font-weight: 600;
  }

  /* Timeline */
  .mini-tl { margin-top: 28px; padding-left: 6px; }
  .mtl-item {
    display: grid;
    grid-template-columns: 84px 24px 1fr;
    gap: 16px;
    padding: 12px 0;
  }
  .mtl-year {
    font-family: 'Noto Serif', serif;
    font-size: 15px; font-weight: 700;
    color: var(--vermillion-d);
    text-align: right; padding-top: 2px;
    letter-spacing: 0.02em;
  }
  .mtl-dot-col { position: relative; display: flex; justify-content: center; }
  .mtl-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--vermillion-d);
    border: 2.5px solid var(--paper);
    margin-top: 6px;
    box-shadow: 0 0 0 1.5px var(--vermillion-d);
    z-index: 2; position: relative;
  }
  .mtl-dot.now {
    background: var(--gold);
    box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 6px rgba(var(--gold-rgb), 0.18);
  }
  .mtl-dot-col::before {
    content: ''; position: absolute;
    top: 18px; bottom: -12px;
    left: 50%; transform: translateX(-50%);
    width: 1.5px;
    background: rgba(var(--vermillion-rgb), 0.18);
  }
  .mtl-item:last-child .mtl-dot-col::before { display: none; }
  .mtl-text strong {
    display: block;
    font-family: 'Noto Serif', serif;
    font-size: 15.5px;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 700;
  }
  .mtl-text span {
    font-size: 13.5px;
    color: var(--ink-mid);
    line-height: 1.65;
  }
  @media (max-width: 540px) { .mtl-item { grid-template-columns: 62px 20px 1fr; gap: 12px; } }

  /* Key-figures / stats list (aside) */
  .aside-card {
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    border-radius: 10px;
    padding: 22px 22px 18px;
    margin-bottom: 18px;
  }
  .aside-title {
    font-family: 'Noto Serif', serif;
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
  }
  .aside-title::before {
    content: ''; width: 14px; height: 1.5px;
    background: var(--gold);
  }
  .aside-list { list-style: none; }
  .aside-list li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 0;
    border-top: 1px dashed rgba(var(--clay-rgb), 0.15);
    font-size: 13px;
    gap: 12px;
  }
  .aside-list li:first-child { border-top: none; }
  .aside-list .k {
    color: var(--stone); font-weight: 500;
    flex-shrink: 0;
  }
  .aside-list .v {
    font-family: 'Noto Serif', serif;
    color: var(--ink); font-weight: 700;
    text-align: right;
  }
  .aside-quick {
    background: linear-gradient(135deg, var(--ink) 0%, #3d1010 100%);
    color: #fff;
    border-radius: 10px;
    padding: 22px 22px 20px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
  }
  .aside-quick-label {
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-light); font-weight: 700;
    margin-bottom: 8px;
    position: relative;
  }
  .aside-quick-title {
    font-family: 'Noto Serif', serif;
    font-size: 18px; font-weight: 700;
    margin-bottom: 8px; line-height: 1.25;
    position: relative;
  }
  .aside-quick-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    position: relative;
  }

  /* Spec grid */
  .spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 18px 0 28px;
  }
  .spec-card {
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    border-radius: 8px;
    padding: 18px 20px;
    transition: border-color 0.2s, transform 0.2s;
  }
  .spec-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
  }
  .spec-label {
    font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--stone);
    font-weight: 600; margin-bottom: 8px;
  }
  .spec-val {
    font-family: 'Noto Serif', serif;
    font-size: 17px; font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
  }

  /* Architecture features */
  .arch-feat {
    display: flex; gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    border-radius: 8px;
    margin-bottom: 12px;
    transition: transform 0.2s, border-color 0.2s;
  }
  .arch-feat:hover {
    transform: translateX(4px);
    border-color: var(--gold);
  }
  .af-icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.15), rgba(var(--gold-rgb), 0.04));
    border: 1px solid rgba(var(--gold-rgb), 0.32);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .af-title {
    font-family: 'Noto Serif', serif;
    font-size: 16px; font-weight: 700;
    color: var(--ink); margin-bottom: 4px;
  }
  .af-desc {
    font-size: 13.5px; color: var(--ink-mid); line-height: 1.65;
  }

  .fest-header-eyebrow {
    font-size: 10px; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--gold);
    font-weight: 700; margin-bottom: 10px;
    position: relative;
  }
  .fest-header h4 {
    font-family: 'Noto Serif', serif;
    font-size: 28px; color: var(--gold-light);
    font-weight: 700; margin-bottom: 8px;
    position: relative;
  }
  .fest-header small {
    font-size: 13px;
    color: rgba(232, 197, 71, 0.65);
    letter-spacing: 0.08em;
    position: relative;
  }

  .schedule-list { list-style: none; }
  .sched-item {
    display: grid;
    grid-template-columns: 86px 24px 1fr;
    gap: 16px;
    padding: 16px 0;
    align-items: flex-start;
  }
  .sched-day {
    font-family: 'Noto Serif', serif;
    font-size: 12px; font-weight: 700;
    color: var(--clay);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 6px;
  }
  .sched-dot-col {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    height: 100%;
  }
  .sched-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--vermillion-d);
    margin-top: 10px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(var(--vermillion-rgb), 0.18);
  }
  .sched-line {
    width: 1.5px; flex: 1;
    background: rgba(var(--vermillion-rgb), 0.22);
    margin-top: 5px; min-height: 24px;
  }
  .sched-name {
    font-family: 'Noto Serif', serif;
    font-size: 17px; font-weight: 700;
    color: var(--ink); margin-bottom: 5px;
  }
  .sched-time {
    font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vermillion-d); font-weight: 600;
    margin-bottom: 8px;
  }
  .sched-desc {
    font-size: 14px; color: var(--ink-mid); line-height: 1.7;
  }

  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .chip {
    padding: 7px 14px; border-radius: 16px;
    background: rgba(var(--clay-rgb), 0.05);
    border: 1px solid rgba(var(--clay-rgb), 0.18);
    color: var(--ink-mid);
    font-size: 12.5px; font-weight: 500;
  }
  .chip.g {
    background: rgba(var(--vermillion-rgb), 0.08);
    border-color: rgba(var(--vermillion-rgb), 0.25);
    color: var(--vermillion-d); font-weight: 600;
  }

  /* Gallery */
  .gal-intro {
    font-size: 15px; color: var(--ink-mid);
    line-height: 1.75; margin-bottom: 24px;
    max-width: 720px;
  }
  .gal-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    grid-auto-rows: 180px;
  }
  .gal-item {
    border-radius: 8px; overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #2a0a0a;
  }
  .gal-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(var(--ink-rgb), 0.25);
  }
  .gal-item svg { width: 100%; height: 100%; display: block; }
  .gal-item.w6 { grid-column: span 6; }
  .gal-item.w4 { grid-column: span 4; }
  .gal-item.w8 { grid-column: span 8; }
  .gal-item.w3 { grid-column: span 3; }
  .gal-item.h2 { grid-row: span 2; }
  .gal-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 16px 12px;
    background: linear-gradient(180deg, transparent, rgba(26, 5, 5, 0.9));
    color: #fff;
    font-size: 12.5px; font-weight: 500;
    letter-spacing: 0.02em;
  }
  .gal-cap small {
    display: block;
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 4px; font-weight: 600;
  }
  @media (max-width: 768px) {
    .gal-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; }
    .gal-item.w6 { grid-column: span 6; }
    .gal-item.w4, .gal-item.w3 { grid-column: span 3; }
    .gal-item.w8 { grid-column: span 6; }
  }

  /* Map */
  .map-block {
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(var(--clay-rgb), 0.15);
    margin-bottom: 22px;
    background: #fff;
  }
  .map-svg { background: #e8e0d0; display: block; }
  .map-info {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 22px;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(var(--clay-rgb), 0.12);
  }
  .map-addr strong {
    display: block;
    font-family: 'Noto Serif', serif;
    font-size: 16px; color: var(--ink);
    font-weight: 700; margin-bottom: 3px;
  }
  .map-addr span {
    font-size: 13px; color: var(--stone);
  }
  .map-dir {
    padding: 10px 20px; border-radius: 20px;
    background: var(--vermillion-d); color: #fff;
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.04em;
    border: none; cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; text-decoration: none;
  }
  .map-dir:hover {
    background: var(--vermillion);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 26, 26, 0.3);
  }

  /* Nearby */
  .nearby {
    display: flex; gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin: 8px -2px 0;
    scroll-padding-left: 2px;
    scrollbar-width: thin;
  }
  .nearby-card {
    flex-shrink: 0;
    width: 230px;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    display: flex; gap: 12px; align-items: center;
  }
  .nearby-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
  }
  .nearby-thumb {
    flex-shrink: 0;
    width: 54px; height: 54px;
    border-radius: 6px;
    background: var(--parch);
    display: flex; align-items: center; justify-content: center;
  }
  .nearby-type {
    font-size: 9.5px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    margin-bottom: 3px;
  }
  .nearby-name {
    font-family: 'Noto Serif', serif;
    font-size: 14px; font-weight: 700;
    color: var(--ink); line-height: 1.3;
  }

  /* Section gap */
  .section-gap { margin-top: 40px; }

  /* ══════════════════════════════════════════════════════════
     CROSS-LINK / RELATED DETAILS
     ══════════════════════════════════════════════════════════ */
  .related-section {
    background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    padding: 72px 28px 80px;
    border-top: 1px solid rgba(var(--clay-rgb), 0.1);
  }
  .related-inner {
    max-width: 1320px; margin: 0 auto;
  }
  .related-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px; margin-bottom: 36px;
  }
  .section-eyebrow {
    font-size: 11px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--gold-dark);
    font-weight: 700;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
  }
  .section-eyebrow::after {
    content: ''; width: 40px; height: 1.5px;
    background: var(--gold);
  }
  .section-title {
    font-family: 'Noto Serif', serif;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 700; color: var(--ink);
    line-height: 1.2;
  }
  .back-all {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: 22px;
    background: #fff;
    border: 1.5px solid rgba(var(--clay-rgb), 0.22);
    color: var(--ink-mid);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .back-all:hover {
    border-color: var(--clay);
    color: var(--clay);
    transform: translateX(-2px);
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
  }
  .related-card {
    background: #fff;
    border: 1px solid var(--parch);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
    text-decoration: none;
    color: inherit;
  }
  .related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(var(--ink-rgb), 0.12);
    border-color: rgba(var(--gold-rgb), 0.35);
  }
  .related-thumb {
    height: 160px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .related-body { padding: 20px 22px 22px; }
  .related-type {
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    margin-bottom: 10px;
  }
  .related-name {
    font-family: 'Noto Serif', serif;
    font-size: 18px; font-weight: 700;
    color: var(--ink); line-height: 1.3;
    margin-bottom: 8px;
  }
  .related-excerpt {
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.65;
    margin-bottom: 14px;
  }
  .related-era {
    font-size: 11px; color: var(--stone);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 600;
  }

  /* ══════════════════════════════════════════════════════════
     QR / MOBILE ACTION BAR (sticky bottom on mobile)
     ══════════════════════════════════════════════════════════ */
  .qr-bar {
    position: sticky; bottom: 0;
    background: rgba(250, 246, 238, 0.98);
    border-top: 1px solid rgba(var(--clay-rgb), 0.18);
    padding: 12px 20px;
    display: flex; gap: 10px; justify-content: center;
    z-index: 40;
  }
  .qr-btn {
    padding: 11px 18px; border-radius: 22px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid transparent;
  }
  .qr-btn.outline {
    background: transparent; color: var(--ink-mid);
    border-color: rgba(var(--clay-rgb), 0.3);
  }
  .qr-btn.outline:hover { background: var(--clay-pale); color: var(--clay); }
  .qr-btn.solid {
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    color: #fff;
    flex: 1; justify-content: center; max-width: 220px;
  }
  .qr-btn.solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 26, 26, 0.3);
  }
  @media (min-width: 1100px) { .qr-bar { display: none; } }

  /* ══════════════════════════════════════════════════════════
     FOOTER
     ══════════════════════════════════════════════════════════ */
  footer {
    background: #1a0e00;
    color: rgba(255, 255, 255, 0.7);
    padding: 52px 24px 26px;
    text-align: center;
    border-top: 1px solid rgba(var(--gold-rgb), 0.15);
  }
  .footer-logo {
    font-family: 'Noto Serif', serif;
    font-size: 1.14rem; color: var(--gold-light);
    font-weight: 700; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  footer p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 6px; }
  .footer-copy { font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); margin-top: 20px; }

  @media (max-width: 768px) {
    .dt-hero-inner { padding: 64px 20px 44px; }
    .dt-wrap { padding: 40px 20px 60px; }
    .related-section { padding: 56px 20px 64px; }
  }

  /* ══════════════════════════════════════════════════════════
     QR MODAL
     ══════════════════════════════════════════════════════════ */
  .qr-modal-backdrop {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(26, 14, 0, 0.82);
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
    display: flex;
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .qr-modal-backdrop.open {
    opacity: 1; pointer-events: all;
  }
  .qr-modal {
    width: 100%; max-width: 440px;
    background: var(--paper);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    max-height: 94vh;
    overflow-y: auto;
  }
  .qr-modal-backdrop.open .qr-modal {
    transform: translateY(0) scale(1);
  }
  .qr-modal-header {
    position: relative;
    background: linear-gradient(135deg, var(--ink) 0%, #3d1010 60%, var(--vermillion-d) 100%);
    padding: 28px 28px 26px;
    color: #fff;
    overflow: hidden;
  }
  .qr-modal-eyebrow {
    font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-light); font-weight: 700;
    margin-bottom: 8px;
    position: relative;
  }
  .qr-modal-title {
    font-family: 'Noto Serif', serif;
    font-size: 22px; font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.2;
    position: relative;
  }
  .qr-modal-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    position: relative;
  }
  .qr-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    color: var(--gold-light);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    z-index: 3;
  }
  .qr-modal-close:hover {
    background: rgba(var(--gold-rgb), 0.2);
    transform: rotate(90deg);
  }

  .qr-canvas-wrap {
    padding: 32px 28px 24px;
    display: flex; flex-direction: column; align-items: center;
  }
  .qr-canvas {
    width: 240px; height: 240px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 24px rgba(var(--clay-rgb), 0.12);
    border: 1px solid rgba(var(--clay-rgb), 0.12);
    position: relative;
  }
  .qr-canvas svg { width: 100%; height: 100%; display: block; }
  .qr-canvas-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: #fff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 2;
  }
  .qr-canvas-center .seal-logo {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .qr-instruction {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-mid);
    line-height: 1.6;
    display: flex; align-items: center; gap: 8px;
  }
  .qr-instruction svg {
    flex-shrink: 0;
    color: var(--clay);
  }

  .qr-url {
    margin: 20px 28px 0;
    padding: 14px 16px;
    background: rgba(var(--clay-rgb), 0.05);
    border: 1px dashed rgba(var(--clay-rgb), 0.25);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .qr-url-label {
    font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone); font-weight: 700;
    margin-bottom: 4px;
  }
  .qr-url-val {
    font-family: 'Noto Serif', serif;
    font-size: 13.5px; font-weight: 600;
    color: var(--ink);
    word-break: break-all;
  }
  .qr-url-copy {
    flex-shrink: 0;
    padding: 7px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(var(--clay-rgb), 0.22);
    color: var(--clay);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .qr-url-copy:hover {
    background: var(--clay-pale);
    border-color: var(--clay);
  }
  .qr-url-copy.copied {
    background: var(--moss);
    border-color: var(--moss);
    color: #fff;
  }

  .qr-actions {
    padding: 20px 28px 28px;
    display: flex; gap: 10px;
  }
  .qr-action-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 22px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    border: 1.5px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .qr-action-btn.primary {
    background: linear-gradient(135deg, var(--vermillion-d), var(--vermillion));
    color: #fff;
  }
  .qr-action-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(139, 26, 26, 0.32);
  }
  .qr-action-btn.ghost {
    background: transparent;
    color: var(--ink-mid);
    border-color: rgba(var(--clay-rgb), 0.25);
  }
  .qr-action-btn.ghost:hover {
    background: var(--clay-pale);
    color: var(--clay);
    border-color: var(--clay);
  }

  /* Corner accents on QR canvas */
  .qr-canvas::before,
  .qr-canvas::after {
    content: ''; position: absolute;
    width: 14px; height: 14px;
    border: 2px solid var(--gold);
    pointer-events: none;
  }
  .qr-canvas::before {
    top: -1px; left: -1px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 12px;
  }
  .qr-canvas::after {
    bottom: -1px; right: -1px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 12px;
  }

  @media (max-width: 480px) {
    .qr-canvas { width: 200px; height: 200px; padding: 12px; }
    .qr-canvas-center { width: 48px; height: 48px; padding: 5px; }
    .qr-modal-header { padding: 24px 22px 22px; }
    .qr-canvas-wrap, .qr-actions { padding-left: 20px; padding-right: 20px; }
    .qr-url { margin-left: 20px; margin-right: 20px; }
  }

  /* ══════════════════════════════════════════════════════════
     SHARE MODAL
     ══════════════════════════════════════════════════════════ */
  .share-backdrop {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(26, 14, 0, 0.82);
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .share-backdrop.open { opacity: 1; pointer-events: all; }
  @media (min-width: 640px) {
    .share-backdrop { align-items: center; padding: 20px; }
  }

  .share-modal {
    width: 100%; max-width: 480px;
    background: var(--paper);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
    max-height: 92vh;
    overflow-y: auto;
  }
  @media (min-width: 640px) {
    .share-modal {
      border-radius: 16px;
      transform: translateY(20px) scale(0.96);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    }
  }
  .share-backdrop.open .share-modal {
    transform: translateY(0) scale(1);
  }

  .share-modal-handle {
    display: flex; justify-content: center;
    padding: 10px 0 6px;
  }
  .share-modal-handle::after {
    content: '';
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(var(--clay-rgb), 0.22);
  }
  @media (min-width: 640px) { .share-modal-handle { display: none; } }

  .share-modal-header {
    position: relative;
    padding: 14px 28px 22px;
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.1);
  }
  @media (min-width: 640px) { .share-modal-header { padding-top: 26px; } }

  .share-modal-eyebrow {
    font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-dark); font-weight: 700;
    margin-bottom: 6px;
  }
  .share-modal-title {
    font-family: 'Noto Serif', serif;
    font-size: 20px; font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
  }
  .share-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(var(--clay-rgb), 0.08);
    border: 1px solid rgba(var(--clay-rgb), 0.18);
    color: var(--ink-mid);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .share-modal-close:hover {
    background: var(--clay-pale);
    color: var(--clay);
    border-color: var(--clay);
    transform: rotate(90deg);
  }

  .share-targets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 24px 28px 20px;
  }
  @media (max-width: 420px) {
    .share-targets { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 22px 16px 18px; }
  }

  .share-target {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 4px;
    border-radius: 12px;
    transition: background 0.2s;
    font-family: inherit;
  }
  .share-target:hover { background: rgba(var(--clay-rgb), 0.05); }
  .share-target-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.12);
    transition: transform 0.2s;
  }
  .share-target:hover .share-target-icon { transform: translateY(-2px); }
  .share-target-label {
    font-size: 12px; font-weight: 600;
    color: var(--ink-mid);
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.2;
  }

  /* Brand colors */
  .st-facebook { background: linear-gradient(135deg, #1877f2 0%, #0a5bc4 100%); }
  .st-zalo { background: linear-gradient(135deg, #0068ff 0%, #0047b3 100%); }
  .st-messenger { background: linear-gradient(135deg, #00b2ff 0%, #006aff 50%, #ff006b 100%); }
  .st-x { background: linear-gradient(135deg, #000 0%, #1a1a1a 100%); }
  .st-telegram { background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%); }
  .st-linkedin { background: linear-gradient(135deg, #0a66c2 0%, #004182 100%); }
  .st-whatsapp { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); }
  .st-email { background: linear-gradient(135deg, var(--clay) 0%, var(--clay-light) 100%); }
  .st-native {
    background: linear-gradient(135deg, var(--vermillion-d) 0%, var(--vermillion) 100%);
  }

  .share-divider {
    display: flex; align-items: center;
    gap: 12px;
    padding: 4px 28px 4px;
    color: var(--stone);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .share-divider::before, .share-divider::after {
    content: '';
    flex: 1; height: 1px;
    background: rgba(var(--clay-rgb), 0.15);
  }

  .share-link {
    margin: 16px 28px 20px;
    display: flex; align-items: center;
    padding: 4px 4px 4px 16px;
    background: #fff;
    border: 1.5px solid rgba(var(--clay-rgb), 0.18);
    border-radius: 30px;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .share-link:focus-within {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(var(--gold-rgb), 0.18);
  }
  .share-link-url {
    flex: 1; min-width: 0;
    font-family: 'Noto Serif', serif;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
    border: none; outline: none; background: transparent;
    padding: 10px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .share-link-copy {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--clay) 0%, var(--vermillion-d) 100%);
    color: #fff;
    border: none;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, opacity 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .share-link-copy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 26, 26, 0.25);
  }
  .share-link-copy.copied {
    background: var(--moss);
  }

  .share-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: var(--ink);
    color: #fff;
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 10px 30px rgba(var(--ink-rgb), 0.4);
    z-index: 510;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; align-items: center; gap: 8px;
  }
  .share-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

/* ═══════════════════════════════════════════════════════════
   Lễ hội — video YouTube embed (clone từ UserWeb_Dashboard.html)
   ═══════════════════════════════════════════════════════════ */
.lh-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  margin-top: 4px;
}
.lh-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 768px) {
  .lh-video-wrap {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

/* Vinh Danh — biến thể "Bà mẹ VNAH" cho Home dashboard */
.vd-avatar.bmvnah { background: rgba(217,123,93,0.16); color: #c0573a; }
.badge-bmvnah    { background: rgba(217,123,93,0.14); color: #c0573a; }
.vd2-avatar.bmvnah { background: rgba(217,123,93,0.14); color: #c0573a; border: 1px solid rgba(217,123,93,0.25); }

/* Override `overflow-x: hidden` (đặt ở đầu file) bằng `clip` để position: sticky
   trên descendants vẫn hoạt động (lta-sidebar, navbar nội bộ, …).
   `overflow: clip` cắt content tràn nhưng KHÔNG tạo scroll container,
   nên sticky bám viewport như bình thường. Hỗ trợ Chrome 90+, Firefox 81+, Safari 16+. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Lịch Sử page — căn thẳng nội dung chapter với hero content */
.ls-page-inner { padding: 0 20px; }
@media (min-width: 768px) { .ls-page-inner { padding: 0 48px; } }
.ls-chapter { padding-left: 0 !important; padding-right: 0 !important; }
/* Hero content: bỏ centering theo content-width, để full-row giống ls-page-inner
   → text hero và text chapter cùng bắt đầu ở 1 x-position (20px mobile / 48px desktop) */
.ls-hero-content {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  max-width: 100% !important;
  padding: 24px 20px !important;
}
@media (min-width: 768px) {
  .ls-hero-content {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 48px 60px !important;
  }
}

/* ── Read-more button — clone từ UserWeb.html: viền top/bottom + SVG curved sides ── */
.read-more {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  margin: 20px auto 0 !important;
  padding: 12px 28px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  color: var(--clay) !important;
  background: none !important;
  border: none !important;
  letter-spacing: 0;
  opacity: 0.9;
  overflow: visible !important;
  transition: opacity 0.15s, transform 0.15s !important;
}
.read-more::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 12px; right: 12px;
  border-top: 1px solid rgba(var(--clay-rgb), 0.55);
  border-bottom: 1px solid rgba(var(--clay-rgb), 0.55);
  pointer-events: none;
}
.read-more::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgba%28139%2C69%2C19%2C0.55%29%22%20stroke-width%3D%221.5%22%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M%2024%2C1%20H%2014%20A%2013%2C13%200%200%201%201%2C14%20V%2086%20A%2013%2C13%200%200%201%2014%2C99%20H%2024%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgba%28139%2C69%2C19%2C0.55%29%22%20stroke-width%3D%221.5%22%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M%200%2C1%20H%2010%20A%2013%2C13%200%200%200%2023%2C14%20V%2086%20A%2013%2C13%200%200%200%2010%2C99%20H%200%22%2F%3E%3C%2Fsvg%3E");
  background-position: left center, right center;
  background-size: 12px 100%, 12px 100%;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}
.read-more:hover { opacity: 1; }
.read-more:active { transform: scale(0.98); }
/* Ẩn các phần tử cũ nếu còn trong markup khác */
.read-more .rm-frame,
.read-more .rm-arrow { display: none !important; }
.read-more-wrap { text-align: center; display: block !important; margin-top: 0 !important; }

/* ── Đàn chim bay (GIF nền trong suốt) trong hero ───────────
   Đàn chim bay VÔ TẬN, chiếm ~1/4 chiều cao hero ở phần trên.
   Kỹ thuật seamless tile:
   - GIF 720×405 làm background-image, fix tile width 360px (--tile-w)
   - repeat-x: tile ngang phủ kín hero
   - background-position-x drift đúng -360px = 1 tile width → loop hoàn hảo
     không lộ "rectangle" ở mỗi vòng lặp (vì điểm cuối == điểm đầu pixel-perfect) */
.hero-birds-gif {
  --tile-w: 360px;
  position: absolute;
  top: 4%;
  left: 0;
  width: 100%;
  height: 25%;          /* chỉ 1/4 hero, vùng trời */
  background-image: url('/images/birds_animation.gif');
  background-repeat: repeat-x;
  background-size: var(--tile-w) auto;
  background-position: 0 top;
  pointer-events: none;
  z-index: 1; /* trên hero-illustration + hero-gradient, dưới hero-content */
  user-select: none;
  overflow: hidden;     /* cắt phần GIF tràn dưới container */
  animation: birdsDrift 60s linear infinite;
}
@keyframes birdsDrift {
  from { background-position-x: 0; }
  to   { background-position-x: calc(var(--tile-w) * -1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-birds-gif { animation: none; }
}
@media (max-width: 768px) {
  .hero-birds-gif { animation: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-birds-gif { --tile-w: 240px; }
}

/* Báu Vật Của Làng — fix tràn nội dung trên mobile (card height cứng 124px) */
.di-san-card {
  height: auto !important;
  min-height: 124px;
  align-items: stretch;
}
.di-san-card-img {
  align-self: stretch;
  height: auto !important;
}
.di-san-card-img img {
  height: 100% !important;
  min-height: 124px;
}
.di-san-card-body {
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.di-san-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* ── Phân trang Hộp Thời Gian (web user) ───────────────── */
.htg-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 24px 16px 36px;
  margin-top: 8px;
}
.htg-pager-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(var(--clay-rgb), 0.2);
  background: #fff;
  color: var(--ink);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  font-variant-numeric: tabular-nums;
}
.htg-pager-btn:hover:not(:disabled) {
  background: var(--clay-pale);
  border-color: var(--clay);
  color: var(--clay);
}
.htg-pager-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.htg-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.htg-pager-btn.active {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: #fff;
  box-shadow: 0 3px 10px rgba(var(--vermillion-rgb), 0.35);
  cursor: default;
}
.htg-pager-btn.active:hover {
  background: var(--vermillion);
  color: #fff;
  border-color: var(--vermillion);
}
.htg-pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 36px;
  color: var(--stone);
  font-size: 14px;
  letter-spacing: 2px;
  user-select: none;
}

/* ─── STATUS BADGE (đang phát triển / BBT đã duyệt) ─────────────────── */
.lv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: 'Be Vietnam Pro', sans-serif;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
}
.lv-status-badge--approved {
  background: rgba(34, 139, 75, 0.16);
  color: #2e8b57;
  border: 1px solid rgba(34, 139, 75, 0.32);
}
.lv-status-badge--pending {
  background: rgba(217, 154, 38, 0.18);
  color: #b8801a;
  border: 1px solid rgba(217, 154, 38, 0.36);
}
.lv-status-badge--rejected {
  background: rgba(214, 48, 49, 0.16);
  color: var(--vermillion);
  border: 1px solid rgba(214, 48, 49, 0.32);
}
.lv-status-badge--hidden {
  background: rgba(127, 140, 141, 0.18);
  color: #6c757d;
  border: 1px solid rgba(127, 140, 141, 0.36);
}
.lv-status-badge--floating {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.lv-status-badge--floating.lv-status-badge--approved {
  background: rgba(232, 247, 238, 0.96);
}
.lv-status-badge--floating.lv-status-badge--pending {
  background: rgba(253, 244, 220, 0.96);
}

/* ───── Mobile menu search ───── */
.menu-search {
  position: relative;
  padding: 12px 18px 8px;
  flex-shrink: 0;
}
.menu-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.menu-search input {
  width: 100%;
  padding: 9px 36px 9px 42px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
  font-family: 'Be Vietnam Pro', sans-serif;
  transition: border-color 0.15s, background 0.15s;
}
.menu-search input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.menu-search input:focus {
  border-color: var(--gold-light);
  background: rgba(255, 255, 255, 0.12);
}
.menu-search-clear {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 11px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.menu-search-clear:hover {
  background: rgba(255, 255, 255, 0.25);
}
.menu-empty {
  padding: 30px 18px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   CÔNG ĐỨC — Landing page chương trình Công Đức
   ═══════════════════════════════════════════════ */

.cd-page { background: var(--paper); color: var(--ink); padding-bottom: 60px; }

/* ── Hero ── */
/* Dark cinematic layout: ảnh banner làm main visual với gradient tối overlay,
   text trắng/gold-light cho contrast cao. Khi không có banner_image → fallback
   dark gradient màu vermillion/ink (class modifier .cd-hero--has-bg). */
.cd-hero {
  position: relative;
  /* Top padding lớn để eyebrow không dính navbar fixed (h:64px) — đồng bộ
     pattern với các hero khác. KHÔNG horizontal padding — cd-hero-content
     tự handle layout để align với navbar landmarks. */
  padding: 32px 0 48px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(var(--vermillion-rgb),0.18), transparent 70%),
    linear-gradient(180deg, #1a0d05 0%, #2c1810 60%, #3a1f0e 100%);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.28);
  color: #fff;
  /* Full-bleed: phá vỡ bất kỳ parent constraint nào để hero tràn ra hai bên
     viewport — pattern này dùng 100vw + calc margin để "break out" container. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.cd-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(-45deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 22px);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
/* Banner image: opacity 0.6 — rõ nét nhưng không lấn át text */
.cd-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 1;
}
/* Gradient cinematic vertical: nhạt phía trên (ảnh rõ) → đậm phía dưới
   (text dễ đọc). Chỉ áp dụng khi có ảnh — fallback không cần. */
.cd-hero--has-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,13,5,0.45) 0%, rgba(26,13,5,0.72) 55%, rgba(26,13,5,0.92) 100%),
    linear-gradient(90deg, rgba(26,13,5,0.35) 0%, transparent 40%, transparent 60%, rgba(26,13,5,0.35) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Content wrapper — căn theo navbar layout:
   - Match nav-inner outer box (max-width 1280, margin auto) → cùng centered container
   - Mobile: chỉ gutter 20px
   - Tablet ≥768px: gutter tăng dần
   - Desktop ≥1024px: padding-inline = nav-padding (48) + logo-width (~220) ≈ 268px
     → left edge align mép phải nav-logo, right edge align mép trái user-menu-pc */
.cd-hero-content {
  position: relative;
  z-index: 3;
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .cd-hero-content { padding-inline: 48px; }
}
@media (min-width: 1024px) {
  .cd-hero-content {
    /* Giảm padding để title "Cùng nhau xây dựng Làng Xuân Trạch Văn Hiến"
       (40px serif, ~1030px wide) fit 1 dòng. Content area ~1080px max. */
    padding-left: 100px;
    padding-right: 100px;
  }
}
.cd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.32em;
  color: var(--gold-light);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
  /* Padding bất đối xứng:
     - Trái > phải 0.32em để bù trailing letter-spacing (căn giữa ngang)
     - Top > bottom ~2px để bù chữ uppercase ngồi cao hơn em-box center */
  padding: 9px 12px 7px calc(12px + 0.32em);
  border: 1px solid rgba(var(--gold-rgb),0.4);
  border-radius: 999px;
  background: rgba(var(--gold-rgb),0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cd-hero-title {
  font-family: 'Noto Serif', serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cd-hero-title em { font-style: italic; color: var(--gold-light); font-weight: 600; }
.cd-hero-sub {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  margin: 0 0 22px;
  text-align: justify;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.cd-hero-sub p { margin: 0 0 10px; }
.cd-hero-sub p:last-child { margin-bottom: 0; }
.cd-hero-sub strong { color: #fff; }
.cd-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(var(--gold-rgb),0.14);
  border: 1px solid rgba(var(--gold-rgb),0.4);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cd-hero-stat strong {
  font-size: 18px;
  color: var(--gold-light);
  font-weight: 700;
  font-family: 'Noto Serif', serif;
}

/* ── CTA buttons ── */
.cd-cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cd-cta {
  appearance: none; border: none; cursor: pointer;
  padding: 12px 26px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  border-radius: 10px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}
.cd-cta--primary { background: var(--vermillion); color: #fff; box-shadow: 0 4px 14px rgba(var(--vermillion-rgb),0.3); }
.cd-cta--primary:hover { background: var(--vermillion-dark); transform: translateY(-1px); }
.cd-cta--ghost { background: rgba(255,255,255,0.06); color: var(--gold-light); border: 1.5px solid rgba(var(--gold-rgb),0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cd-cta--ghost:hover { background: rgba(var(--gold-rgb),0.18); border-color: var(--gold-light); color: #fff; }
/* Ghost button trong các section sáng (cd-section) vẫn dùng clay như cũ */
.cd-section .cd-cta--ghost { background: transparent; color: var(--clay); border-color: var(--clay); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cd-section .cd-cta--ghost:hover { background: var(--clay); color: #fff; border-color: var(--clay); }

/* ── Section common ── */
.cd-section {
  padding-block: 48px;
  padding-inline: 16px;
}
.cd-section--alt { background: var(--cream); }
.cd-section-head { text-align: center; margin-bottom: 28px; }
.cd-section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
}
.cd-section-title {
  font-family: 'Noto Serif', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 0;
}
.cd-section-divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 12px auto 0;
}

/* ── Appeal section ── */
.cd-appeal {
  background: #fff;
  border: 1px solid rgba(var(--gold-rgb),0.3);
  border-radius: 14px;
  padding: 32px 26px;
  box-shadow: 0 4px 20px rgba(var(--ink-rgb),0.05);
  position: relative;
}
@media (min-width: 768px) {
  .cd-appeal { padding: 44px 48px; }
}
.cd-appeal::before, .cd-appeal::after {
  content: "❀";
  position: absolute;
  font-size: 18px;
  color: var(--gold);
  top: -10px;
  background: var(--cream);
  padding: 0 8px;
}
.cd-appeal::before { left: 20px; }
.cd-appeal::after { right: 20px; }
.cd-appeal-body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-mid);
  text-align: justify;
}
.cd-appeal-body p { margin: 0 0 12px; }
.cd-appeal-body p:last-child { margin-bottom: 0; }
.cd-appeal-cta { text-align: center; margin-top: 22px; }

/* ── Members (donor list) ── */
.cd-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.cd-tab {
  padding: 7px 16px;
  background: #fff;
  border: 1px solid rgba(var(--clay-rgb),0.25);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-mid);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s;
}
.cd-tab:hover { border-color: var(--clay); color: var(--clay); }
.cd-tab.active { background: var(--clay); color: #fff; border-color: var(--clay); }

.cd-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px)  { .cd-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .cd-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .cd-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1600px) { .cd-grid { grid-template-columns: repeat(5, 1fr); } }

.cd-card {
  background: #fff;
  border: 1px solid rgba(var(--clay-rgb),0.16);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cd-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--ink-rgb),0.08); border-color: var(--gold); }
.cd-card-portrait {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--clay-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif', serif; font-size: 22px;
  color: var(--clay); font-weight: 700;
  flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--gold-light);
}
.cd-card-portrait img { width: 100%; height: 100%; object-fit: cover; }
.cd-card-body { flex: 1; min-width: 0; }
.cd-card-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 2px; word-wrap: break-word; }
.cd-card-role { font-size: 12px; color: var(--ink-mid); margin-bottom: 6px; font-style: italic; }
.cd-card-amount { font-size: 14px; color: var(--vermillion); font-weight: 700; font-family: 'Noto Serif', serif; }
.cd-card-amount--text { color: var(--moss); font-weight: 600; font-style: italic; font-family: inherit; font-size: 13px; }
.cd-card-date { font-size: 11.5px; color: var(--gold); margin-top: 4px; font-weight: 500; }

.cd-empty {
  text-align: center;
  padding: 40px 18px;
  color: var(--ink-mid);
  font-style: italic;
  font-size: 14px;
  background: #fff;
  border: 1px dashed rgba(var(--clay-rgb),0.25);
  border-radius: 12px;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Pagination ── */
.cd-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 22px; }
.cd-page-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid rgba(var(--clay-rgb),0.25);
  background: #fff; color: var(--ink-mid);
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
.cd-page-btn:hover { border-color: var(--clay); color: var(--clay); }
.cd-page-btn.active { background: var(--clay); color: #fff; border-color: var(--clay); }
.cd-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Address (địa chỉ nhận) ── */
.cd-address-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .cd-address-grid { grid-template-columns: 1.2fr 1fr; } }

.cd-address-col { background: #fff; border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: 14px; padding: 22px; }
.cd-address-col h3 {
  font-family: 'Noto Serif', serif;
  font-size: 17px; color: var(--ink); margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(var(--gold-rgb),0.25);
}

.cd-bank {
  background: var(--cream);
  border: 1px solid rgba(var(--clay-rgb),0.15);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.cd-bank:last-child { margin-bottom: 0; }
@media (min-width: 520px) {
  .cd-bank:has(.cd-bank-qr) { grid-template-columns: 1fr auto; }
}
.cd-bank-info { min-width: 0; }
.cd-bank-name { font-size: 13px; color: var(--clay); font-weight: 600; margin-bottom: 6px; }
.cd-bank-num { font-family: 'Noto Serif', serif; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: 0.05em; margin-bottom: 4px; word-break: break-all; }
.cd-bank-holder { font-size: 13px; color: var(--ink-mid); margin-bottom: 8px; }
.cd-bank-copy {
  appearance: none;
  border: 1px solid var(--clay);
  background: transparent; color: var(--clay);
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
  font-family: inherit; font-weight: 600;
}
.cd-bank-copy:hover { background: var(--clay); color: #fff; }

.cd-bank-qr {
  text-align: center;
  background: #fff;
  border: 1px solid rgba(var(--gold-rgb),0.25);
  border-radius: 10px;
  padding: 8px 8px 6px;
  flex-shrink: 0;
}
.cd-bank-qr img {
  max-width: 140px;
  width: 100%;
  display: block;
  border-radius: 6px;
}
.cd-bank-qr-caption {
  font-size: 11px;
  color: var(--ink-mid);
  margin-top: 4px;
  font-style: italic;
}

.cd-physical {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mid);
  margin-bottom: 12px;
  white-space: pre-line;
  padding: 10px 14px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.cd-physical-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.cd-phone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cd-phone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--moss); color: #fff;
  text-decoration: none; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  transition: transform 0.15s;
}
.cd-phone:hover { transform: translateY(-1px); }

/* Card mỗi đầu mối tiếp nhận (địa chỉ + người đại diện + chức vụ + SĐT) */
.cd-contact-card {
  padding: 12px 14px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.cd-contact-card:last-child { margin-bottom: 0; }
.cd-contact-address {
  white-space: pre-line;
  color: var(--ink);
  margin-bottom: 8px;
}
.cd-contact-rep {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.cd-contact-rep-name {
  font-weight: 600;
  color: var(--ink);
}
.cd-contact-rep-name::before {
  content: '👤 ';
  margin-right: 2px;
}
.cd-contact-rep-role {
  font-style: italic;
  color: var(--clay);
}
.cd-contact-rep-role::before {
  content: '· ';
  color: var(--stone);
  margin-right: 2px;
}

/* Mobile: căn giữa nội dung trong section "Địa chỉ nhận" */
@media (max-width: 767px) {
  .cd-address-col h3 { text-align: center; }
  .cd-bank { justify-items: center; text-align: center; }
  .cd-bank-info { text-align: center; }
  .cd-bank-num { letter-spacing: 0.04em; }
  .cd-bank-copy { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; }
  .cd-bank-qr { margin: 0 auto; }
  .cd-physical { text-align: center; border-left: none; border-top: 3px solid var(--gold); border-radius: 8px; padding: 12px 14px; }
  .cd-physical-label { text-align: center; }
  .cd-phone-list { justify-content: center; }
  .cd-contact-card { text-align: center; border-left: none; border-top: 3px solid var(--gold); border-radius: 8px; }
  .cd-contact-rep { justify-content: center; }
  .cd-contact-rep-role::before { content: ''; }
}

/* ── Modal form ── */
.cd-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(var(--ink-rgb),0.6);
  z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px 16px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.cd-modal {
  width: 100%; max-width: 540px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: cdModalIn 0.25s ease;
}
@keyframes cdModalIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cd-modal-head {
  padding: 18px 22px; border-bottom: 1px solid rgba(var(--gold-rgb),0.25);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cream);
}
.cd-modal-head h3 { font-family: 'Noto Serif', serif; font-size: 18px; color: var(--ink); margin: 0; }
.cd-modal-close {
  appearance: none; border: none; background: transparent;
  font-size: 22px; color: var(--ink-mid); cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.cd-modal-close:hover { background: rgba(var(--clay-rgb),0.1); }
.cd-modal-body { padding: 20px 22px; }
.cd-modal-foot {
  padding: 14px 22px; border-top: 1px solid rgba(var(--gold-rgb),0.18);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--cream);
}

.cd-field { margin-bottom: 14px; }
.cd-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.cd-field label .req { color: var(--vermillion); }
.cd-field input[type="text"],
.cd-field input[type="number"],
.cd-field input[type="email"],
.cd-field input[type="tel"],
.cd-field textarea,
.cd-field select {
  width: 100%; padding: 9px 12px;
  border: 1px solid rgba(var(--clay-rgb),0.3);
  border-radius: 8px;
  font-family: inherit; font-size: 14px;
  color: var(--ink); background: #fff;
  outline: none; transition: border-color 0.15s;
}
.cd-field input:focus, .cd-field textarea:focus, .cd-field select:focus { border-color: var(--clay); }
.cd-field textarea { resize: vertical; min-height: 70px; }
.cd-field-hint { font-size: 11.5px; color: var(--ink-mid); margin-top: 4px; font-style: italic; }
.cd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .cd-field-row { grid-template-columns: 1fr; } }

.cd-radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-radio {
  flex: 1; min-width: 90px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--clay-rgb),0.3);
  border-radius: 8px;
  cursor: pointer; font-size: 13px;
  background: #fff; transition: all 0.15s;
}
.cd-radio input { display: none; }
.cd-radio.active { background: var(--clay); color: #fff; border-color: var(--clay); }

.cd-toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  color: #fff; z-index: 1100;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: cdToastIn 0.25s ease;
}
.cd-toast--success { background: var(--moss); }
.cd-toast--error   { background: var(--vermillion); }
@keyframes cdToastIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Detail modal (donor click) ── */
.cd-detail {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 16px;
  overflow: hidden; text-align: center;
  padding: 30px 24px;
}
.cd-detail-portrait {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--clay-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif', serif; font-size: 34px;
  color: var(--clay); font-weight: 700;
  margin: 0 auto 14px;
  border: 3px solid var(--gold);
  overflow: hidden;
}
.cd-detail-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Thẻ vinh danh — hiển thị nguyên tỉ lệ chứng nhận, không crop tròn */
.cd-detail-card {
  margin: 0 auto 16px;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: var(--cream);
}
.cd-detail-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.cd-detail-name { font-family: 'Noto Serif', serif; font-size: 22px; color: var(--ink); margin-bottom: 4px; }

/* Home page Vinh Danh preview — grid 2-col trên desktop, đồng bộ với .vd2-list của tab Vinh Danh */
.home-vd2-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .home-vd2-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .home-vd2-list .vd-more-btn {
    grid-column: 1 / -1;
  }
}

/* Footer logo: favicon + tên làng */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-logo-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Footer copy — luôn xuống dòng riêng, full-width, căn giữa, không tràn */
.footer-copy {
  flex-basis: 100%;
  text-align: center;
  line-height: 1.6;
  word-break: break-word;
}

/* Search box trong section Vinh Danh trang chủ */
.home-vd-search {
  max-width: 480px;
  margin: 12px auto 16px;
  padding: 0 16px;
}
.home-vd-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--clay-rgb), 0.12);
  color: var(--clay);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.home-vd-search-clear:hover { background: rgba(var(--clay-rgb), 0.22); }

/* Search box cho Công Đức (tái dùng .vd2-search-box style) */
.cd-search-wrap {
  max-width: 480px;
  margin: 14px auto 18px;
  padding: 0 16px;
}
.cd-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--clay-rgb), 0.12);
  color: var(--clay);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cd-search-clear:hover { background: rgba(var(--clay-rgb), 0.22); }

/* Lightbox cho modal chi tiết Công Đức (đồng bộ với Vinh Danh) */
.cd-lightbox {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  outline: none;
  animation: cdLbIn 0.18s ease-out;
}
@keyframes cdLbIn { from { opacity: 0 } to { opacity: 1 } }
.cd-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-out;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.5);
}
.cd-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.cd-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }
.cd-detail-role { font-size: 13px; color: var(--ink-mid); font-style: italic; margin-bottom: 14px; }
.cd-detail-amount {
  display: inline-block; padding: 8px 18px;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: 'Noto Serif', serif;
  font-size: 18px; color: var(--vermillion); font-weight: 700;
  margin-bottom: 14px;
}
.cd-detail-amount--text { color: var(--moss); font-style: italic; font-weight: 600; font-family: inherit; font-size: 14px; }
.cd-detail-meta { font-size: 13px; color: var(--ink-mid); }
.cd-detail-meta strong { color: var(--ink); font-weight: 600; }

@media (min-width: 768px) {
  /* cd-section vẫn giới hạn 1280px như cũ. cd-hero TÁCH RIÊNG ra (full-bleed
     handled bởi 100vw trick ở base rule) để hero tràn ra hai bên viewport. */
  .cd-section {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 48px;
  }
  .cd-hero    { padding: 56px 0 64px; }
  .cd-section { padding-block: 64px; }
  .cd-hero-title { font-size: 40px; }
  .cd-hero-sub { font-size: 16px; }
  .cd-section-title { font-size: 30px; }
}

/* ─── Badges (loại đóng góp) ─── */
.cd-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  margin-right: 8px;
  vertical-align: middle;
}
.cd-badge--tien     { background: var(--vermillion); }
.cd-badge--hien-vat { background: var(--moss); }
.cd-badge--cong-suc { background: var(--gold); color: var(--ink); }

.cd-card-amount-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.cd-card-amount-row .cd-card-amount { margin: 0; }

.cd-card-message {
  font-size: 12.5px;
  color: var(--ink-mid);
  font-style: italic;
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cd-detail-message {
  position: relative;
  margin: 14px 0;
  padding: 14px 18px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mid);
  font-style: italic;
  text-align: left;
}
.cd-detail-message-quote {
  position: absolute;
  top: -6px; left: 8px;
  font-size: 32px;
  color: var(--gold);
  font-family: 'Noto Serif', serif;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   Navbar offset — fixed navbar che content trên mọi page.
   #page-home excluded: hero full-bleed cố ý chui dưới nav.
   ═══════════════════════════════════════════════════════════ */
.page:not(#page-home) {
  padding-top: 52px;
}
.vne,
.ts-root {
  padding-top: 52px;
}
@media (min-width: 768px) {
  .page:not(#page-home) { padding-top: 64px; }
  .vne,
  .ts-root { padding-top: 64px; }
}