/* =====================================================================
   VIEWD.VN — Hệ thống giao diện
   Thương hiệu: Sam · Chủ sở hữu: Dương Trần Săm
   owner: "Sam (sở hữu độc quyền, cấm sao chép)"
   ===================================================================== */

/* ---------- 1. TOKENS — nen sang theo simon.vn + vang gold cua logo View D ---------- */
:root{
  --ink:        #FFFFFF;   /* nen chinh */
  --ink-2:      #F2F2F2;   /* dai xen ke */
  --ink-3:      #E9E9E9;
  --ink-4:      #DEDEDE;
  --line:       rgba(0,0,0,.11);
  --line-2:     rgba(0,0,0,.22);
  --paper:      #3E3E3E;   /* mau chu chinh */
  --paper-dim:  #5C5C5C;
  --muted:      #6B6B6B;   /* dam hon #8A8A8A goc de dat WCAG AA 4.5:1 tren nen sang */

  --gold:       #C69320;   /* vang doc duoc tren nen trang */
  --gold-lt:    #E9B949;
  --gold-dk:    #896614;   /* tinh chinh dam hon chut de dat AA 4.5:1 ca tren nen --ink-2 (#F2F2F2) */
  --steel:      #6E757C;
  --steel-dk:   #4A5057;

  --dark:       #2E2E2E;   /* footer + overlay anh */
  --dark-2:     #1F1F1F;

  --grad-gold:  linear-gradient(160deg,#E3BC5A 0%,#C69320 32%,#94690F 60%,#DDB44F 100%);
  --ff-display: "Playfair Display", Georgia, serif;
  --ff-ui:      "Archivo", "Arial Narrow", sans-serif;
  --ff-body:    "Be Vietnam Pro", "Segoe UI", sans-serif;

  --container:  1280px;
  --gut:        clamp(20px, 4vw, 56px);
  --r:          2px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --header-h:   96px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:15.5px;
  line-height:1.65;
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:700;line-height:1.06;letter-spacing:-.015em}
p{margin:0 0 1em}
::selection{background:var(--gold);color:#241A03}

/* Nền kỹ thuật: lưới blueprint + hạt nhiễu */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
main,header,footer,section{position:relative;z-index:1}

/* ---------- 3. TIỆN ÍCH ---------- */
.container{width:min(100% - var(--gut)*2, var(--container));margin-inline:auto}
.wide{width:min(100% - var(--gut)*2, 1560px);margin-inline:auto}
.eyebrow{
  font-family:var(--ff-ui);font-size:11px;font-weight:700;letter-spacing:.30em;
  text-transform:uppercase;color:var(--gold-dk);display:flex;align-items:center;gap:12px;margin-bottom:18px;
  /* dung --gold-dk (van thuoc bang mau vang thuong hieu) thay --gold vi chu 11px tren nen trang
     chi dat ty le tuong phan ~2.8:1 — khong dat WCAG AA 4.5:1. --gold-dk dat ~4.9:1. */
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.h-xl{font-size:clamp(40px,6.6vw,92px);line-height:1.02;letter-spacing:-.02em}
.h-lg{font-size:clamp(30px,4.2vw,58px);line-height:1.08;letter-spacing:-.015em}
.h-md{font-size:clamp(22px,2.4vw,33px);line-height:1.16}
.lead{color:var(--paper-dim);font-size:clamp(15px,1.25vw,17.5px);max-width:62ch}
.muted{color:var(--muted)}
.section{padding:clamp(72px,9vw,132px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,58px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Nút */
.btn{
  --bg:transparent;--fg:var(--paper);--bd:var(--line-2);
  display:inline-flex;align-items:center;gap:12px;padding:14px 26px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:var(--r);
  font-family:var(--ff-ui);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);z-index:0;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{color:#2A1E04;border-color:var(--gold)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{--bg:var(--gold);--fg:#2A1E04;--bd:var(--gold);background-image:var(--grad-gold)}
.btn--solid::before{background:var(--paper)}
.btn--solid:hover{border-color:var(--paper)}
.btn .ar{width:14px;height:14px;flex:none;position:relative;z-index:1;transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.link-more{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-ui);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);
  padding:12px 0;margin:-12px 0;min-height:44px;box-sizing:border-box;
}
.link-more::after{content:"";width:22px;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.link-more:hover::after{width:40px}

/* Reveal khi cuộn */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- 4. TOPBAR ---------- */
.topbar{
  background:#F7F7F7;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);position:relative;z-index:60;
}
.topbar .wide{display:flex;justify-content:space-between;align-items:center;height:38px;gap:24px}
.topbar a{transition:color .25s}
.topbar a:hover{color:var(--gold)}
.topbar-l{display:flex;gap:8px;align-items:center}
.topbar-l .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(233,185,73,.16);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(233,185,73,0)}}
.topbar-r{display:flex;gap:26px}
.topbar-r li a{display:flex;align-items:center;height:38px}
@media(max-width:900px){.topbar-l span.hide-sm,.topbar-r li:nth-child(n+3){display:none}}

/* ---------- 5. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s;
}
.site-header.scrolled{background:rgba(255,255,255,.98);box-shadow:0 8px 26px -20px rgba(0,0,0,.5)}
.hd{display:flex;align-items:center;gap:clamp(18px,3vw,48px);height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none;transition:opacity .3s var(--ease)}
.brand:hover{opacity:.85}
.brand-img{
  height:88px;width:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 4px 18px rgba(233,185,73,.22));
}
.brand-img--lg{height:150px}
.brand-img--sm{height:56px}
@media(max-width:900px){
  :root{--header-h:80px}
  .brand-img{height:74px}
  .brand-img--lg{height:126px}
  .brand-img--sm{height:52px}
}
@media(max-width:480px){
  :root{--header-h:68px}
  .brand-img{height:62px}
  .brand-img--lg{height:118px}
}

.nav{margin-left:auto;display:flex;gap:clamp(14px,2vw,32px);align-items:center}
.nav > li > a{
  font-family:var(--ff-ui);font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:26px 0;display:block;position:relative;white-space:nowrap;
}
.nav > li > a::after{
  content:"";position:absolute;left:0;bottom:20px;height:1.5px;width:0;background:var(--gold);
  transition:width .35s var(--ease);
}
.nav > li > a:hover::after,.nav > li.active > a::after{width:100%}
.nav > li.active > a{color:var(--gold)}
.has-mega{position:relative}
.mega{
  position:fixed;left:0;right:0;top:calc(var(--header-h) + 38px);
  background:rgba(255,255,255,.99);backdrop-filter:blur(18px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.site-header.scrolled .mega{top:var(--header-h)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:1px 0}
.mega-in a{
  background:var(--ink);padding:28px var(--gut);display:block;transition:background .3s;
}
.mega-in a:hover{background:var(--ink-3)}
.mega-in h4{font-size:16px;margin-bottom:6px}
.mega-in p{margin:0;font-size:13px;color:var(--muted)}
.mega-in a:hover h4{color:var(--gold)}
@media(max-width:1080px){.mega{display:none}}

.hd-actions{display:flex;align-items:center;gap:6px;flex:none}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--r);
  transition:border-color .3s,color .3s;
}
.icon-btn:hover{border-color:var(--line-2);color:var(--gold)}
.burger{display:none}
@media(max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  /* vung bam toi thieu 44x44 tren dien thoai/may tinh bang */
  .icon-btn,.burger{width:44px;height:44px}
  /* .socials a duoc dat kich thuoc lai ngay canh quy tac goc trong muc 14. FOOTER
     de thang cascade (dat o day se bi quy tac goc phia sau ghi de). */
}

/* Search lightbox */
.search-lb{
  position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  display:grid;place-items:start center;padding-top:18vh;opacity:0;visibility:hidden;transition:.35s var(--ease);
}
.search-lb.open{opacity:1;visibility:visible}
.search-lb .box{width:min(92vw,760px)}
.search-lb input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:16px 0;font-family:var(--ff-display);font-size:clamp(24px,4vw,42px);font-weight:800;
  letter-spacing:-.01em;outline:none;
}
.search-lb input::placeholder{color:#C2C2C2}
.search-lb input:focus{border-color:var(--gold)}
.search-hint{font-size:12px;color:var(--muted);margin-top:14px;letter-spacing:.08em}
.search-res{margin-top:26px;max-height:46vh;overflow:auto;display:grid;gap:1px;background:var(--line);-webkit-overflow-scrolling:touch}
.search-res a{background:var(--ink);padding:15px 18px;display:flex;justify-content:space-between;gap:18px;align-items:center;transition:background .25s}
.search-res a:hover{background:var(--ink-3);color:var(--gold)}
.search-res .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:none}
.close-x{position:absolute;top:24px;right:var(--gut);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);min-height:44px;display:flex;align-items:center}
.close-x:hover{color:var(--gold)}

/* Drawer mobile */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(88vw,400px);background:var(--ink-2);z-index:210;
  transform:translateX(100%);transition:transform .45s var(--ease);
  border-left:1px solid var(--line);overflow:auto;padding:26px var(--gut) 40px;
  -webkit-overflow-scrolling:touch;
}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.drawer-head button{width:44px;height:44px;display:grid;place-items:center;flex:none;margin-right:-10px}
.drawer nav a{
  display:block;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-ui);font-size:19px;font-weight:700;text-transform:uppercase;
  min-height:44px;box-sizing:border-box;
}
.drawer nav a:hover{color:var(--gold);padding-left:8px;transition:.3s}
.drawer .sub a{font-size:14px;font-weight:500;font-family:var(--ff-body);text-transform:none;color:var(--muted);padding:14px 0 14px 16px;display:block;min-height:44px;box-sizing:border-box}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:205;opacity:0;visibility:hidden;transition:.35s}
.scrim.open{opacity:1;visibility:visible}

/* ---------- 6. HERO SLIDER ---------- */
.hero{position:relative;height:clamp(560px,84vh,860px);overflow:hidden;border-bottom:1px solid var(--line)}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
}
.slide.active{opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(8,8,9,.90) 0%,rgba(8,8,9,.72) 34%,rgba(8,8,9,.28) 62%,rgba(8,8,9,.10) 100%)}
.slide-bg img{width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.08);transition:transform 7s linear}
.slide.active .slide-bg img{transform:scale(1)}
.slide-txt{position:relative;z-index:2;padding-left:max(var(--gut),calc((100vw - var(--container))/2))}
.slide-ico{width:44px;height:44px;margin-bottom:20px;opacity:0}
.slide-txt .kicker{
  font-family:var(--ff-ui);font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;opacity:0;
}
.slide-txt h2{font-size:clamp(40px,6.4vw,88px);text-transform:uppercase;margin-bottom:16px;opacity:0}
.slide-txt h2 em{font-style:normal;display:block;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 14px rgba(233,185,73,.28));}
.gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.slide-txt p{max-width:44ch;color:var(--paper-dim);opacity:0}
.slide-txt .btn{opacity:0}
.slide.active .slide-ico{animation:up .8s var(--ease) .12s forwards}
.slide.active .kicker{animation:up .8s var(--ease) .2s forwards}
.slide.active h2{animation:up .9s var(--ease) .3s forwards}
.slide.active p{animation:up .9s var(--ease) .44s forwards}
.slide.active .btn{animation:up .9s var(--ease) .56s forwards}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.slide-vis{position:relative;z-index:1;justify-self:center;padding:0 var(--gut)}
.slide-vis img{max-height:56vh;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
@media(max-width:900px){
  .slide{grid-template-columns:1fr}
  .slide-vis{display:none}
  .slide-txt{padding-inline:var(--gut)}
  .slide-bg::after{background:linear-gradient(180deg,rgba(8,8,9,.42),rgba(8,8,9,.88))}
}

.hero-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;border-top:1px solid rgba(255,255,255,.18);background:rgba(8,8,9,.42);backdrop-filter:blur(10px)}
.hero-ui .wide{display:flex;align-items:center;gap:20px;height:76px}
.dots{display:flex;gap:10px;margin-right:auto}
.dots button{
  width:34px;height:2px;background:var(--line-2);position:relative;overflow:visible;transition:background .3s;
}
/* vung bam vo hinh mo rong ~44px cao/rong, khong doi hinh dang vach mong hien thi */
.dots button::before{content:"";position:absolute;top:-21px;bottom:-21px;left:-5px;right:-5px}
.dots button.on{background:rgba(255,255,255,.25)}
.dots button.on::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;animation:bar 6s linear forwards}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.counter{font-family:var(--ff-ui);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.counter b{color:var(--paper);font-size:18px}
.arrows{display:flex;gap:1px;background:var(--line)}
.arrows button{width:48px;height:44px;background:var(--ink-2);display:grid;place-items:center;transition:background .3s,color .3s}
.arrows button:hover{background:var(--gold);color:#241A03}

/* ---------- 7. THANH CHỈ SỐ ---------- */
.stats{border-bottom:1px solid var(--line);background:var(--ink-2)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(30px,3.6vw,46px);font-weight:800;line-height:1;color:var(--gold-dk)}
.stat span{font-size:12.5px;color:var(--muted);letter-spacing:.06em;display:block;margin-top:8px}
@media(max-width:760px){.stats-in{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- 8. DANH MỤC ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.cat{
  position:relative;background:var(--ink);min-height:420px;padding:34px 30px;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;
}
.cat img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.9;
  transition:transform .9s var(--ease),opacity .6s;
}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.93))}
.cat:hover img{transform:scale(1.09);opacity:1}
.cat .num{position:absolute;top:26px;right:28px;font-family:var(--ff-ui);font-size:13px;color:var(--muted);letter-spacing:.2em}
.cat h3{font-size:26px;text-transform:uppercase;margin-bottom:10px}
.cat p{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.cat .link-more{transform:translateY(6px);opacity:.75;transition:.4s var(--ease)}
.cat:hover .link-more{transform:none;opacity:1}
.cat::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2;
}
.cat:hover::before{transform:scaleX(1)}
@media(max-width:1024px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cats{grid-template-columns:1fr}.cat{min-height:320px}}

/* ---------- 9. GIỚI THIỆU / SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.frame{position:relative;border:1px solid var(--line);padding:12px;background:var(--ink-2)}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frame .badge{
  position:absolute;right:-1px;bottom:-1px;background:var(--gold);color:#241A03;padding:16px 22px;
  font-family:var(--ff-ui);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:13px;
}
.feat-list{display:grid;gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}
.feat-list li{background:var(--ink);padding:18px 22px;display:flex;gap:16px;align-items:flex-start}
.feat-list b{font-family:var(--ff-ui);color:var(--gold-dk);font-size:13px;letter-spacing:.16em;flex:none;padding-top:2px}

/* ---------- 10. CARD TIN TỨC ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;transition:border-color .4s,transform .5s var(--ease)}
.card:hover{border-color:var(--line-2);transform:translateY(-5px);box-shadow:0 18px 44px -22px rgba(233,185,73,.45)}
.card .thumb{overflow:hidden;aspect-ratio:16/10;background:var(--ink-3)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .thumb img{transform:scale(1.07)}
.card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .meta{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk)}
.card h3{font-size:19px;line-height:1.25;}
.card p{font-size:13.8px;color:var(--muted);margin:0}
.card .link-more{margin-top:auto;padding-top:12px}

/* ---------- 11. GALLERY NHÀ MÁY ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gallery button{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-3)}
.gallery img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform .8s var(--ease),opacity .5s}
.gallery button:hover img{transform:scale(1.06);opacity:1}
.gallery figcaption{
  position:absolute;left:16px;bottom:14px;font-family:var(--ff-ui);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 10px #000;
}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}

.viewer{position:fixed;inset:0;z-index:220;background:rgba(25,25,25,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}
.viewer.open{opacity:1;visibility:visible}
.viewer img{max-width:90vw;max-height:80vh;border:1px solid var(--line-2)}
.viewer .nav-v{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-2);transition:.3s}
.viewer .nav-v:hover{background:var(--gold);color:#241A03;border-color:var(--gold)}
.viewer .prev-v{left:3vw}.viewer .next-v{right:3vw}

/* ---------- 12. CAROUSEL DỰ ÁN ---------- */
.rail-wrap{position:relative}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.proj{
  flex:0 0 clamp(300px,34vw,460px);scroll-snap-align:start;position:relative;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;
}
.proj img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform .9s var(--ease),opacity .5s}
.proj:hover img{transform:scale(1.07);opacity:.95}
.proj .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(28,28,28,.93));padding:26px;display:flex;flex-direction:column;justify-content:flex-end}
.proj .loc{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.proj h3{font-size:21px;}
.proj .tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.proj .tags span{font-size:11px;border:1px solid var(--line-2);padding:4px 10px;color:var(--paper-dim)}

/* ---------- 13. NEWSLETTER ---------- */
.news-cta{border-block:1px solid var(--line);background:linear-gradient(120deg,var(--ink-2),var(--ink))}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(48px,6vw,84px) 0}
@media(max-width:860px){.news-in{grid-template-columns:1fr}}
/* Khoi CTA 2 cot (chu + form/nut) dung trong cac o "Nhan bao gia"/"Ban tin".
   Truoc day cac o nay dung inline style grid-template-columns:1fr auto, khien
   media query ben tren khong con hieu luc (inline thang moi @media ben ngoai)
   -> khong xep lai 1 cot tren dien thoai -> form/nut bi tran ngang. Dung class
   nay thay cho inline style de giu duoc hanh vi rut gon tren man hinh nho. */
.news-in.cta-2col{grid-template-columns:1fr auto}
@media(max-width:860px){.news-in.cta-2col{grid-template-columns:1fr}}
.subscribe{display:flex;gap:0;border:1px solid var(--line-2)}
.subscribe{min-width:0}
.subscribe input{flex:1;min-width:0;background:transparent;border:0;padding:17px 20px;outline:none;font-size:16px}
.subscribe input::placeholder{color:#A5A5A5;font-size:13.5px}
.subscribe input:focus{background:rgba(255,255,255,.03)}
.subscribe button{background:var(--gold);color:#241A03;padding:0 26px;font-family:var(--ff-ui);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;transition:background .3s}
.subscribe button:hover{background:var(--paper)}
.form-note{font-size:12.5px;margin-top:12px;min-height:20px}
.form-note.ok{color:var(--gold-dk)}
.form-note.err{color:var(--steel)}

/* ---------- 14. FOOTER ---------- */
.site-footer{background:var(--dark);color:#EDEDED;border-top:1px solid var(--line);padding-top:clamp(48px,6vw,76px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);padding-bottom:52px}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:var(--ff-ui);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot-grid li{margin-bottom:11px}
.foot-grid a{color:var(--paper-dim);font-size:14px;transition:color .25s,padding-left .25s;display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
.foot-grid a:hover{color:var(--gold);padding-left:5px}
.foot-grid a.foot-hot,.foot-hot{font-family:var(--ff-display);font-size:29px;font-weight:700;color:var(--paper);display:block;margin:16px 0 8px;min-height:44px;box-sizing:border-box}
.foot-grid a.foot-hot:hover,.foot-hot:hover{color:var(--gold);padding-left:0}
.legal{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legal a{display:inline-block;padding:11px 0;margin:-11px 0;min-height:44px;box-sizing:border-box}
/* .socials nam long trong .legal — reset lai de khong bi an huong kich thuoc
   tu quy tac .legal a o tren (giu nguyen vuong 40x40 / 44x44 rieng cua .socials) */
.legal .socials a{padding:0;margin:0;min-height:0}
.legal a:hover{color:var(--gold)}
.socials{display:flex;gap:1px;background:var(--line)}
.socials a{width:40px;height:40px;display:grid;place-items:center;background:var(--ink-2);transition:background .3s,color .3s}
.socials a:hover{background:var(--gold);color:#241A03}
@media(max-width:1080px){
  /* vung bam toi thieu 44x44 tren dien thoai/may tinh bang — dat SAU quy tac goc
     de thang duoc cascade (cung do dac ta, quy tac ben duoi thang neu dat truoc) */
  .socials a{width:44px;height:44px}
}

/* ---------- 15. NÚT NỔI ---------- */
.floaties{position:fixed;right:18px;bottom:18px;z-index:120;display:grid;gap:10px;transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* Gan form lien he / footer: an tam de khong de len nut gui hay link trong footer
   (tranh nguoi dung bam nham nut noi thay vi nut "Nhan tu van & bao gia"). */
.floaties.is-near-block{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
.floaties a,.floaties button{
  width:50px;height:50px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink-3);border:1px solid var(--line-2);transition:.35s var(--ease);
}
.floaties a:hover,.floaties button:hover{background:var(--gold);color:#241A03;transform:translateY(-3px)}
.floaties .call{background:var(--gold);color:#241A03;border-color:var(--gold);animation:ring 2.6s infinite}
@keyframes ring{0%,60%,100%{box-shadow:0 0 0 0 rgba(233,185,73,.5)}30%{box-shadow:0 0 0 14px rgba(233,185,73,0)}}
#toTop{opacity:0;visibility:hidden}
#toTop.show{opacity:1;visibility:visible}

/* ---------- 16. TRANG TRONG ---------- */
.page-hero{
  position:relative;padding:clamp(60px,8vw,110px) 0 clamp(44px,5vw,66px);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;right:-8%;top:-40%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(233,185,73,.09),transparent 62%);pointer-events:none;
}
.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.crumbs a{display:inline-block;padding:9px 0;margin:-9px 0;min-height:44px;box-sizing:border-box}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:var(--gold-dk)}

/* Bộ lọc + lưới sản phẩm */
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:12px 18px;border:1px solid var(--line);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--ff-ui);font-weight:700;transition:.3s;min-height:44px;box-sizing:border-box;
}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--gold);color:#241A03;border-color:var(--gold)}
.count{font-size:12.5px;color:var(--muted)}
.sortbox{background:var(--ink-2);border:1px solid var(--line);padding:12px 14px;font-size:13px;outline:none;min-height:44px;box-sizing:border-box}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1px}
@media(max-width:1024px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
.prod{background:var(--ink);padding:24px;position:relative;display:flex;flex-direction:column;transition:background .4s}
.prod:hover{background:var(--ink-2)}
.prod .ph{aspect-ratio:1;display:grid;place-items:center;margin-bottom:18px;position:relative;overflow:hidden}
.prod .ph img{width:82%;transition:transform .7s var(--ease)}
.prod:hover .ph img{transform:scale(1.07) rotate(-1.5deg)}
.prod .sku{font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.prod h3{font-size:16.5px;margin:7px 0 6px;}
.prod .price{font-family:var(--ff-ui);font-weight:800;color:var(--gold-dk);font-size:15px;letter-spacing:.04em}
.prod .qv{
  /* Mac dinh (cham/khong co hover that): nam trong dong chay binh thuong,
     ngay duoi gia — khong de mat hoan toan chuc nang "Xem nhanh" tren dien thoai. */
  display:block;position:static;width:100%;margin-top:14px;padding:13px;text-align:center;
  background:var(--gold);color:#241A03;
  font-family:var(--ff-ui);font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  min-height:44px;box-sizing:border-box;
  transition:.4s var(--ease);
}
/* Chi tren thiet bi co con tro chinh xac (chuot) moi dung kieu "hien khi hover"
   nam de len anh nhu thiet ke goc — cham/khong co hover luon hien de khong mat chuc nang. */
@media (hover:hover) and (pointer:fine){
  .prod .qv{
    position:absolute;left:24px;right:24px;bottom:20px;width:auto;margin-top:0;
    opacity:0;transform:translateY(10px);
  }
  .prod:hover .qv{opacity:1;transform:none}
}
.prod .flag{position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:var(--dark);color:#fff;padding:3px 9px;font-weight:700}
.empty{padding:60px 20px;text-align:center;color:var(--muted);grid-column:1/-1;background:var(--ink)}

/* Modal xem nhanh */
.modal{position:fixed;inset:0;z-index:230;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}
.modal.open{opacity:1;visibility:visible}
.modal .bd{position:absolute;inset:0;background:rgba(25,25,25,.72);backdrop-filter:blur(7px)}
.modal .panel{
  position:relative;width:min(94vw,900px);background:var(--ink-2);border:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr 1fr;transform:translateY(14px);transition:transform .4s var(--ease);
}
.modal.open .panel{transform:none}
@media(max-width:760px){.modal .panel{grid-template-columns:1fr}.modal .panel .mv{display:none}}
.modal .mv{background:var(--ink-3);display:grid;place-items:center;padding:36px;border-right:1px solid var(--line)}
.modal .mc{padding:clamp(24px,3vw,40px)}
.modal .mc h3{font-size:26px;margin:10px 0 8px}
.spec{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
.spec td{padding:10px 0;border-bottom:1px solid var(--line)}
.spec td:first-child{color:var(--muted);width:42%}
.modal .x{position:absolute;top:12px;right:14px;font-size:22px;line-height:1;color:var(--muted);z-index:2}
.modal .x:hover{color:var(--gold)}

/* Bài viết */
.article{max-width:76ch;margin-inline:auto}
.article h2{font-size:clamp(24px,3vw,34px);margin:38px 0 14px}
.article h3{font-size:20px;margin:28px 0 10px;color:var(--gold-dk)}
.article p{color:var(--paper-dim)}
.article img{margin:28px 0;border:1px solid var(--line)}
.article blockquote{
  margin:30px 0;padding:22px 26px;border-left:2px solid var(--gold);background:var(--ink-2);
  font-size:17px;color:var(--paper);
}
.article ul{list-style:none;margin:16px 0}
.article ul li{padding-left:24px;position:relative;margin-bottom:10px;color:var(--paper-dim)}
.article ul li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1.5px;background:var(--gold)}

/* Liên hệ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:var(--ink-2);border:1px solid var(--line);padding:14px 16px;outline:none;transition:border-color .3s;
  font-size:16px;   /* >=16px de Safari/Chrome iOS khong tu zoom khi focus vao o nhap */
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{min-height:130px;resize:vertical}
.field.bad input,.field.bad textarea{border-color:var(--steel)}
.field .err{font-size:12px;color:var(--steel);margin-top:6px;display:none}
.field.bad .err{display:block}
.info-block{border:1px solid var(--line);padding:26px;background:var(--ink-2);margin-bottom:1px}
.info-block h4{font-family:var(--ff-ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:12px}
.map-frame{border:1px solid var(--line);height:320px;filter:grayscale(.3);margin-top:24px}
.map-frame iframe{width:100%;height:100%;border:0}

/* Tài liệu */
.doc-row{
  display:flex;align-items:center;gap:20px;padding:22px;border:1px solid var(--line);
  background:var(--ink-2);margin-bottom:-1px;transition:background .3s;
}
.doc-row:hover{background:var(--ink-3)}
.doc-row .ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold-dk);flex:none}
.doc-row .sz{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}

/* Timeline */
.tl{border-left:1px solid var(--line);padding-left:32px;margin-left:8px}
.tl li{position:relative;padding-bottom:34px}
.tl li::before{content:"";position:absolute;left:-38px;top:7px;width:11px;height:11px;background:var(--ink);border:2px solid var(--gold);border-radius:50%}
.tl b{font-family:var(--ff-display);font-size:19px;color:var(--gold-dk);display:block;letter-spacing:.06em}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink-2);padding:16px 0}
.marquee div{display:flex;gap:56px;width:max-content;animation:mq 30s linear infinite}
.marquee span{
  font-family:var(--ff-ui);font-size:14px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:56px;white-space:nowrap;
}
.marquee span::after{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%}
@keyframes mq{to{transform:translateX(-50%)}}


/* Hero UI trên màn hình nhỏ */
@media(max-width:620px){
  .hero-ui .wide{height:62px;gap:12px}
  .counter{display:none}
  .arrows button{width:44px;height:44px}
  .dots button{width:24px}
  .floaties{right:12px;bottom:74px}
  .floaties a,.floaties button{width:46px;height:46px}
}
@media(max-width:420px){
  .slide-txt h2{font-size:38px}
  .h-xl{font-size:38px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 17. NHAN DIEN VIEW D ---------- */
.tagline{
  font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold-dk);display:flex;align-items:center;gap:10px;margin-top:14px;
}
.tagline::before,.tagline::after{content:"";height:1px;flex:1;max-width:60px;
  background:linear-gradient(90deg,transparent,var(--gold-dk),transparent)}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}

/* ---------- 18. TINH CHINH CHO NEN SANG ---------- */
.prod .flag{background:var(--dark);color:#fff}
.prod .qv{color:#241A03}
.frame .badge{color:#241A03}
.mega-in a{background:#fff}
.mega-in a:hover{background:var(--ink-2)}
.search-res a{background:#fff}
.search-res a:hover{background:var(--ink-2)}
.floaties a,.floaties button{background:#fff;color:var(--paper);border-color:var(--line);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.4)}
.floaties .call{color:#241A03}

/* footer nen toi — dao mau chu ben trong */
.site-footer .foot-grid a{color:#C9C9C9}
.site-footer .foot-grid a:hover{color:var(--gold-lt)}
.site-footer .foot-grid h4{color:var(--gold-lt)}
.site-footer .muted{color:#9E9E9E}
.site-footer .legal{border-top-color:rgba(255,255,255,.14);color:#A8A8A8}
.site-footer .legal a:hover{color:var(--gold-lt)}
.site-footer .socials{background:rgba(255,255,255,.14)}
.site-footer .socials a{background:#3A3A3A;color:#E4E4E4}
.site-footer .socials a:hover{background:var(--gold);color:#241A03}
.site-footer .foot-grid a.foot-hot,.site-footer .foot-hot{color:#FFFFFF}
.site-footer .foot-grid a.foot-hot:hover,.site-footer .foot-hot:hover{color:var(--gold-lt)}
.site-footer .tagline{color:var(--gold-lt)}
.site-footer b{color:#FFFFFF}

/* anh trong card sang hon */
.card .thumb,.gallery button,.modal .mv{background:var(--ink-2)}
.prod .ph{background:linear-gradient(180deg,#FAFAFA,#EDEDED);border:1px solid rgba(0,0,0,.05)}
.gallery figcaption{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85)}

/* vien nhe + do do sau kieu simon */
.card{box-shadow:0 2px 10px -6px rgba(0,0,0,.25)}
.stats{background:var(--ink-2)}
.news-cta{background:var(--ink-2)}
.marquee{background:var(--ink-2)}
.drawer{background:#fff}

/* ---------- 19. KHOI LOGO TREN NEN SANG ---------- */
/* Logo View D duoc thiet ke cho nen den, nen dat tren mang den de giu dung mau vang kim loai */
.site-header .brand,
.drawer .drawer-head .brand-img{background:#000000}
.site-header .brand{padding:9px 20px;border-radius:3px;box-shadow:0 6px 20px -10px rgba(0,0,0,.55)}
.site-header .brand-img{height:64px}
@media(max-width:900px){
  .site-header .brand{padding:7px 14px}
  .site-header .brand-img{height:54px}
}
@media(max-width:480px){
  .site-header .brand{padding:6px 11px}
  .site-header .brand-img{height:46px}
}
.site-header .brand-img{filter:none}
.drawer .drawer-head .brand-img{padding:7px 12px;border-radius:3px}
.site-footer .brand-img{filter:none}

/* ---------- 20. HERO DAM NET (anh that, chu trang) ---------- */
.hero{background:#08080A}
.slide-txt{color:#fff}
.slide-txt .kicker{color:var(--gold-lt);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.slide-txt h2{color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.55)}
.slide-txt h2 em{
  background:linear-gradient(160deg,#FFEFC0 0%,#F2CD69 34%,#D6A431 62%,#FFE9AE 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.45));
}
.slide-txt p{color:rgba(255,255,255,.90);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.slide-txt .slide-ico{stroke:var(--gold-lt)}
.slide-txt .btn{--fg:#fff;--bd:rgba(255,255,255,.45)}
.slide-txt .btn--solid{--fg:#241A03;--bd:var(--gold-lt)}
.hero-ui .counter{color:rgba(255,255,255,.65)}
.hero-ui .counter b{color:#fff}
.hero-ui .dots button{background:rgba(255,255,255,.28)}
.hero-ui .dots button.on{background:rgba(255,255,255,.4)}
.hero-ui .arrows{background:rgba(255,255,255,.2)}
.hero-ui .arrows button{background:rgba(8,8,9,.55);color:#fff}
.hero-ui .arrows button:hover{background:var(--gold);color:#241A03}
/* anh nen la anh san pham can canh roi -> bo lop anh chong ben phai */
.slide-vis{display:none}
.slide{grid-template-columns:1fr}
.slide-txt{max-width:min(720px,58vw);padding-right:var(--gut)}
@media(max-width:900px){.slide-txt{max-width:100%}}

/* ---------- 21. DAI ANH DAM NET CHO CAC KHOI KHAC ---------- */
/* danh muc: anh ro net, chu trang tren nen toi — giong the anh cua simon */
.cat img{opacity:1}
.cat::after{background:linear-gradient(180deg,rgba(8,8,9,.12) 0%,rgba(8,8,9,.55) 52%,rgba(8,8,9,.92) 100%)}
.cat h3{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.6)}
.cat p{color:rgba(255,255,255,.86)}
.cat .num{color:rgba(255,255,255,.7)}
.cat .link-more{color:var(--gold-lt)}
.cat .link-more::after{background:var(--gold-lt)}
.cat:hover img{opacity:1;transform:scale(1.07)}

/* gallery nha may + du an: anh ro net */
.gallery img{opacity:1}
.gallery button:hover img{opacity:1}
.proj img{opacity:1}
.proj:hover img{opacity:1}

/* ---------- 22. HERO BANNER NGUYEN BAN (kieu simon.vn) ---------- */
.hero{
  /* Tran vien tuyet doi. Chieu rong dat tuong minh 100vw truoc khi dung
     aspect-ratio — neu de width:auto thi max-height se co chieu rong lai. */
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
  height:auto;                     /* go height cua quy tac cu de aspect-ratio quyet dinh */
  aspect-ratio:1800/1012;          /* dung ty le that cua bo banner */
  max-height:calc(100vh - 132px);  /* hero + topbar + header vua dung mot man -> luon thay thanh dieu huong */
  max-height:calc(100dvh - 132px); /* dvh: tru dung thanh dia chi mobile that su dang hien, trinh duyet cu bo qua dong nay */
  min-height:420px;
  background:#0A0A0B;overflow:hidden;position:relative;
}
.slide{position:absolute;inset:0;display:block}
.slide-link{display:block;width:100%;height:100%;position:relative}
.slide-link img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.03);transition:transform 8s linear;
}
.slide.active .slide-link img{transform:scale(1)}
/* khong con lop phu — de banner hien dung nhu ban goc */
.slide-bg::after{display:none}
.hero-ui{background:linear-gradient(180deg,transparent,rgba(6,6,8,.72));border-top:0;backdrop-filter:none}
.hero-ui .wide{height:70px}
@media(max-width:760px){
  .hero{aspect-ratio:4/3;max-height:none;min-height:0}
  .hero-ui .wide{height:58px}
}

/* ---------- 23. KHOI SAN PHAM MOI ---------- */
.new-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
@media(max-width:900px){.new-grid{grid-template-columns:1fr 1fr}
  .new-card--wide{grid-column:1/-1}}
@media(max-width:560px){.new-grid{grid-template-columns:1fr}}
.new-card{
  position:relative;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;display:block;background:#0F0F10;
}
.new-card--wide{aspect-ratio:16/10}
.new-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.new-card:hover img{transform:scale(1.06)}
.new-card .ov{
  position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,transparent 38%,rgba(10,10,12,.88));
}
.new-card .tag{
  align-self:flex-start;background:var(--gold);color:#241A03;font-family:var(--ff-ui);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;margin-bottom:12px;
}
.new-card h3{color:#fff;font-size:20px;text-shadow:0 3px 16px rgba(0,0,0,.6)}
.new-card--wide h3{font-size:26px}
.new-card p{color:rgba(255,255,255,.85);font-size:13.5px;margin:8px 0 0;max-width:46ch}

/* ---------- 24. LUOI DU AN O TRANG TRONG ---------- */
.proj--grid{flex:none;width:100%;aspect-ratio:4/3;cursor:default}
#projGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){#projGrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){#projGrid{grid-template-columns:1fr}}

/* ---------- 25. THE ANH: TANG DO NOI CHO CHU ---------- */
.proj .ov{background:linear-gradient(180deg,rgba(12,12,14,.05) 0%,rgba(12,12,14,.45) 45%,rgba(12,12,14,.95) 100%)}
.proj h3{color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.75)}
.proj .loc{color:var(--gold-lt);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.proj .tags span{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(2px)}
.cat::after{background:linear-gradient(180deg,rgba(8,8,9,.10) 0%,rgba(8,8,9,.62) 48%,rgba(8,8,9,.95) 100%)}
.new-card .ov{background:linear-gradient(180deg,transparent 30%,rgba(10,10,12,.92))}
.gallery figcaption{background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));left:0;right:0;bottom:0;padding:26px 16px 14px}

/* =====================================================================
   26. LUXURY FX — nâng cấp thị giác & hiệu ứng tinh tế
   Chỉ CSS thuần: parallax dùng biến --py/--glow do assets/js/fx.js gán,
   không đổi nội dung chữ, chỉ tinh chỉnh trình bày + chuyển động.
   ===================================================================== */

:root{
  --ease-lux:  cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.19,1,.22,1);
  --shadow-gold-sm: 0 10px 30px -18px rgba(198,147,32,.55);
  --shadow-gold-lg: 0 30px 70px -30px rgba(198,147,32,.45);
  --ring-gold: 0 0 0 4px rgba(198,147,32,.16), 0 0 0 1px rgba(198,147,32,.55);
}

/* Cuộn mượt hơn nhưng vẫn tôn trọng reduced-motion (đã có media query ở cuối) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));border-radius:8px;border:2px solid var(--ink-2)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
html{scrollbar-color:var(--gold) var(--ink-2);scrollbar-width:thin}

/* Focus bàn phím sang trọng, thay thế outline mặc định của trình duyệt */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(198,147,32,.6);outline-offset:3px;border-radius:2px;
}

/* ---- 26.1 Đánh số khối theo biên tập (CSS counter — không đụng HTML/nội dung) ---- */
main{counter-reset:secnum}
.section{counter-increment:secnum}
.section::before{
  content:counter(secnum,decimal-leading-zero);
  position:absolute;top:6px;right:var(--gut);z-index:-1;
  font-family:var(--ff-display);font-size:clamp(64px,9vw,148px);font-weight:800;
  line-height:1;letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1px rgba(198,147,32,.16);
  pointer-events:none;user-select:none;
}
@media(max-width:760px){.section::before{display:none}}

/* ---- 26.2 Đường kẻ vàng mảnh tại các mép cấu trúc ---- */
.site-header{position:sticky}
.site-header::after,
.hero::after,
.toolbar::after,
.stats::after,
.site-footer::before{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(198,147,32,.55) 50%,transparent);
}
.site-header::after{bottom:-1px}
.hero::after{bottom:0;z-index:6}
.toolbar{position:relative}
.toolbar::after{bottom:-1px}
.stats{position:relative}
.stats::after{bottom:-1px}
.site-footer{position:relative}
.site-footer::before{top:-1px}

/* ---- 26.3 Reveal khi cuộn — mượt hơn, có chiều sâu (scale+blur nhẹ) ---- */
[data-reveal]{
  opacity:0;transform:translateY(34px) scale(.98);filter:blur(4px);
  transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft),filter .9s var(--ease-soft);
  will-change:opacity,transform,filter;
}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}

/* ---- 26.4 Hero: crossfade + scale nhẹ, progress bar rực hơn ---- */
.slide{
  transition:opacity 1.15s var(--ease-lux),visibility 1.15s,transform 1.5s var(--ease-lux);
  transform:scale(1.035);
}
.slide.active{transform:scale(1)}
.dots button.on::after{box-shadow:0 0 12px 1px rgba(233,185,73,.6)}
.arrows button{transition:background .35s var(--ease-lux),color .35s var(--ease-lux),transform .3s var(--ease-lux)}
.arrows button:hover{transform:translateY(-1px)}

/* ---- 26.5 Nút: ánh kim quét qua + hiệu ứng từ tính (magnetic, do fx.js gán --mx/--my) ---- */
.btn{
  transition:color .4s var(--ease-lux),border-color .4s var(--ease-lux),
             transform .35s var(--ease-lux),box-shadow .4s var(--ease-lux);
  transform:translate(var(--mx,0px),var(--my,0px));
}
.btn:hover{box-shadow:var(--shadow-gold-sm)}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.65) 48%,transparent 100%);
  transform:skewX(-18deg);opacity:0;
}
.btn:hover::after{opacity:.7;animation:btnShine .95s var(--ease-lux) forwards}
@keyframes btnShine{from{left:-60%}to{left:130%}}
.icon-btn,.chip,.sortbox{transition:border-color .3s var(--ease-lux),color .3s var(--ease-lux),transform .3s var(--ease-lux),box-shadow .3s var(--ease-lux),background .3s var(--ease-lux)}
.icon-btn:hover{transform:translateY(-2px)}
.chip:hover{border-color:var(--gold);color:var(--gold-dk);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.96)}
.chip.on{box-shadow:var(--shadow-gold-sm)}

/* ---- 26.6 Chữ vàng lấp lánh (gradient text) — dịch chuyển nhẹ khi hiện ra ---- */
.gold,.slide-txt h2 em{background-size:220% 100%;background-position:0% 50%;
  transition:background-position 1.4s var(--ease-soft)}
[data-reveal].in .gold,.slide.active .slide-txt h2 em{background-position:100% 50%}

/* ---- 26.7 Parallax nhẹ cho ảnh (biến --py do fx.js cập nhật theo cuộn, transform:none nếu prefers-reduced-motion) ---- */
.cat img{transform:translateY(var(--py,0px));transition:transform 1.1s var(--ease-lux),opacity .6s}
.cat:hover img{transform:translateY(var(--py,0px)) scale(1.09)}
.card .thumb{position:relative}
.card .thumb img{transform:translateY(var(--py,0px));transition:transform 1.1s var(--ease-lux)}
.card:hover .thumb img{transform:translateY(var(--py,0px)) scale(1.08)}
.proj img{transform:translateY(var(--py,0px));transition:transform 1.2s var(--ease-lux),opacity .5s}
.proj:hover img{transform:translateY(var(--py,0px)) scale(1.08)}
.new-card img{transform:translateY(var(--py,0px));transition:transform 1.15s var(--ease-lux)}
.new-card:hover img{transform:translateY(var(--py,0px)) scale(1.07)}
.prod .ph img{transform:translateY(var(--py,0px));transition:transform .8s var(--ease-lux)}
.prod:hover .ph img{transform:translateY(var(--py,0px)) scale(1.08) rotate(-1.5deg)}
.gallery img{transform:translateY(var(--py,0px));transition:transform 1.1s var(--ease-lux),opacity .5s}
.gallery button:hover img{transform:translateY(var(--py,0px)) scale(1.07)}
.frame img{transform:translateY(var(--py,0px));transition:transform .6s var(--ease-lux)}
.page-hero::after{transform:translateY(var(--glow,0px));transition:transform .3s linear}

/* ---- 26.8 Ánh kim quét qua khi hover — thẻ sản phẩm / dự án / gallery / ảnh mới ---- */
.card .thumb::after,.prod .ph::after,.proj::after,.new-card::after,.gallery button::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .85s var(--ease-lux);
}
.card:hover .thumb::after,.prod:hover .ph::after,.proj:hover::after,.new-card:hover::after,.gallery button:hover::after{
  transform:translateX(130%);
}

/* ---- 26.9 Khối/thẻ: viền vàng + đổ bóng nâng cao khi hover ---- */
.card:hover{box-shadow:0 22px 50px -24px rgba(198,147,32,.5),0 2px 10px -6px rgba(0,0,0,.25)}
.prod{transition:background .4s var(--ease-lux),box-shadow .4s var(--ease-lux)}
.prod:hover{box-shadow:inset 0 0 0 1px rgba(198,147,32,.4)}
.proj{transition:box-shadow .4s var(--ease-lux)}
.proj:hover{box-shadow:0 26px 60px -28px rgba(198,147,32,.55)}
.new-card{transition:box-shadow .4s var(--ease-lux),transform .4s var(--ease-lux)}
.new-card:hover{box-shadow:0 26px 60px -28px rgba(198,147,32,.5)}
.cat{transition:box-shadow .5s var(--ease-lux),transform .4s var(--ease-lux)}
.cat:hover{box-shadow:inset 0 0 0 1px rgba(198,147,32,.35)}

/* ---- 26.10 Form: focus vàng sang trọng ---- */
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--gold);box-shadow:var(--ring-gold);
}
.subscribe:focus-within{box-shadow:var(--ring-gold)}
.search-lb input:focus{box-shadow:none}

/* ---- 26.11 Số liệu chỉ số: căn số đều tăm tắp khi đếm ---- */
.stat b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- 26.12 Nghiêng nhẹ theo con trỏ (tilt) cho thẻ nổi bật — biến --rx/--ry do fx.js gán ---- */
@media (hover:hover) and (pointer:fine){
  .grid-3,.new-grid,.cats{perspective:1400px}
  .card,.new-card,.cat{transform-style:preserve-3d}
  .card:hover,.new-card:hover{transform:translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .cat:hover{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}

/* ---- 26.13 Tôn trọng prefers-reduced-motion cho toàn bộ hiệu ứng mới ---- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{filter:none;transform:none;opacity:1;transition:none}
  .slide{transform:none}
  .btn,.cat img,.card .thumb img,.proj img,.new-card img,.prod .ph img,.gallery img,.frame img{transform:none!important}
  .card:hover,.new-card:hover,.cat:hover{transform:none!important}
  .btn::after,.card .thumb::after,.prod .ph::after,.proj::after,.new-card::after,.gallery button::after{display:none}
}

/* ---------- 27. HERO: TRAN VIEN + CHUYEN SLIDE MUOT ---------- */
.slide{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.15s cubic-bezier(.4,0,.2,1), visibility 1.15s;
  will-change:opacity;
}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.slide-link{display:block;width:100%;height:100%;position:relative;overflow:hidden}
.slide-link img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.07);transition:none;will-change:transform;
}
/* Ken Burns chi chay tren slide dang hien — muot va khong giat */
.slide.active .slide-link img{
  animation:kenburns 9s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}

/* Thanh dieu huong hero: nen chuyen muot, khong vien cung */
.hero-ui{
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.78));
  border-top:0;backdrop-filter:none;padding-top:26px;
}
.dots button{transition:background .4s var(--ease),transform .3s var(--ease)}
.dots button:hover{transform:scaleY(2.2)}

@media (prefers-reduced-motion:reduce){
  .slide.active .slide-link img{animation:none;transform:none}
  .slide{transition:opacity .2s linear}
}

/* ---------- 28. HEADER CAN DOI (bo cuc kieu simon.vn) ---------- */
/* Truoc: logo dinh trai, menu don het sang phai -> trong rat lech.
   Nay: logo trai — menu can giua khoang trong — tim kiem phai. */
.site-header .wide.hd{
  width:min(100% - 48px, 1720px);
  display:flex;align-items:center;gap:clamp(16px,2.2vw,40px);
}
.site-header .brand{flex:0 0 auto;margin-right:clamp(8px,2vw,32px)}
.site-header .nav{
  margin-left:auto;margin-right:auto;
  display:flex;align-items:center;gap:clamp(12px,1.7vw,30px);
  flex-wrap:nowrap;
}
.site-header .nav > li > a{padding:22px 0;font-size:13px;letter-spacing:.11em;white-space:nowrap}
.site-header .hd-actions{flex:0 0 auto;margin-left:clamp(8px,1.6vw,28px)}

/* Logo gon lai cho can voi chieu cao thanh */
:root{--header-h:88px}
.site-header .brand{padding:8px 16px;border-radius:3px}
.site-header .brand-img{height:56px}

@media(max-width:1400px){
  .site-header .nav > li > a{font-size:12.5px;letter-spacing:.08em}
  .site-header .nav{gap:clamp(10px,1.3vw,22px)}
}
@media(max-width:1080px){
  .site-header .nav{display:none}
  .site-header .brand{margin-right:0}
  .site-header .hd-actions{margin-left:auto}
}
@media(max-width:900px){
  :root{--header-h:78px}
  .site-header .brand{padding:7px 13px}
  .site-header .brand-img{height:50px}
}
@media(max-width:480px){
  :root{--header-h:68px}
  .site-header .brand{padding:6px 10px}
  .site-header .brand-img{height:42px}
}

/* Topbar can doi theo cung be rong voi header */
.topbar .wide{width:min(100% - 48px, 1720px)}

/* =====================================================================
   29. HEADER THEO BO CUC SIMON.VN
   [logo]  |  hang tren: o tim kiem   |  hang duoi: menu chinh
   ===================================================================== */
:root{--header-h:auto}

.site-header .wide.hd{
  width:min(100% - 56px, 1400px);
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(20px,3vw,56px);
  align-items:center;
  height:auto;
  padding:10px 0 0;
}
.site-header .brand{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  margin:0;padding:8px 16px;border-radius:3px;
}
.site-header .brand-img{height:64px}

.hd-right{
  grid-column:2;grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.hd-search{align-self:flex-end}

/* --- O tim kiem dang hop, dat hang tren ben phai (giong simon) --- */
.hd-search{
  display:flex;align-items:stretch;width:min(320px,32vw);
  border:1px solid var(--line-2);border-radius:2px;overflow:hidden;
  background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hd-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,147,32,.16)}
.hd-search input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  padding:9px 14px;font-size:13.5px;color:var(--paper);
}
.hd-search input::placeholder{color:#A9A9A9}
.hd-search button{
  flex:none;width:44px;display:grid;place-items:center;
  background:var(--gold);color:#241A03;
  background-image:var(--grad-gold);transition:filter .3s;
}
.hd-search button:hover{filter:brightness(1.08)}

/* --- Menu chinh: hang duoi, trai dai sat mep phai --- */
.site-header .nav{
  /* menu bat dau ngay sau logo va trai deu toi mep phai — dung nhu simon */
  margin:0;display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:clamp(10px,1.4vw,24px);flex-wrap:nowrap;
}
.site-header .nav > li > a{
  padding:14px 0 16px;font-size:13.5px;letter-spacing:.06em;white-space:nowrap;
}
.site-header .nav > li > a::after{bottom:10px}

/* Mega menu bam theo chieu cao that cua header */
.mega{top:auto}
.site-header{position:sticky;top:0}

@media(max-width:1500px){
  .site-header .nav{gap:clamp(12px,1.5vw,26px)}
  .site-header .nav > li > a{font-size:12.5px;letter-spacing:.04em}
  .hd-search{width:min(260px,26vw)}
}
@media(max-width:1180px){
  .site-header .nav > li > a{font-size:12px}
  .hd-search{width:210px}
}
@media(max-width:1080px){
  .site-header .wide.hd{
    grid-template-columns:auto 1fr auto;grid-template-rows:auto;
    padding:12px 0;align-items:center;
  }
  .site-header .brand{grid-row:1;grid-column:1}
  .hd-right{grid-column:2;grid-row:1;align-items:flex-end;justify-content:center}
  .site-header .nav{display:none}
  .hd-search{width:min(320px,46vw)}
  .burger{grid-column:3;grid-row:1;justify-self:end}
}
@media(max-width:700px){
  .site-header .wide.hd{width:min(100% - 32px,1500px);column-gap:12px}
  .site-header .brand{padding:6px 11px}
  .site-header .brand-img{height:44px}
  .hd-search{display:none}
  .hd-right{display:none}
}

/* =====================================================================
   30. HEADER — CHINH THEO SO DO THUC CUA SIMON.VN
   Simon: logo 145x65 | menu gap deu ~40px gom ve phai | search cao 32px
   ===================================================================== */

/* Khoang cach doc giua o tim kiem va menu (simon: 27px) */
.hd-right{gap:14px}

/* --- Logo to hon, khoi den gon lai --- */
.site-header .brand{padding:9px 18px;border-radius:4px}
.site-header .brand-img{height:72px}

/* --- O tim kiem thanh manh nhu simon --- */
.hd-search{width:min(300px,28vw);border-radius:3px}
.hd-search input{padding:7px 14px;font-size:13px}
.hd-search button{width:40px}

/* --- Menu: KHONG gian toi da, dung khoang cach deu roi gom ve phai --- */
.site-header .nav{
  justify-content:flex-end;
  gap:clamp(20px,2.6vw,42px);
  width:auto;margin-left:auto;
}
.site-header .nav > li > a{
  font-size:14.5px;letter-spacing:.045em;padding:10px 0 14px;
}
.site-header .nav > li > a::after{bottom:8px}

/* Chieu cao header can doi hon */
.site-header .wide.hd{padding:12px 0 4px;row-gap:0}

@media(max-width:1600px){
  .site-header .nav{gap:clamp(16px,2vw,32px)}
  .site-header .nav > li > a{font-size:13.5px}
}
@media(max-width:1360px){
  .site-header .nav{gap:clamp(12px,1.5vw,22px)}
  .site-header .nav > li > a{font-size:12.5px;letter-spacing:.02em}
  .site-header .brand-img{height:62px}
  .hd-search{width:min(250px,24vw)}
}
@media(max-width:1080px){
  .site-header .brand-img{height:56px}
  .hd-search{width:min(320px,44vw)}
}

/* ---- 30b. Tinh chinh cuoi cho khop simon ---- */
.hd-right{gap:22px}                       /* simon: 27px giua search va menu */
.site-header .brand-img{height:78px}      /* logo to hon cho can voi be ngang menu */
.site-header .nav{gap:clamp(24px,3.1vw,56px)}   /* menu trai dai hon, bot trong o giua */
.site-header .nav > li > a{font-size:15px;letter-spacing:.05em}
.site-header .wide.hd{padding:14px 0 6px}
@media(max-width:1600px){
  .site-header .nav{gap:clamp(18px,2.3vw,38px)}
  .site-header .nav > li > a{font-size:14px}
}
@media(max-width:1360px){
  .site-header .nav{gap:clamp(12px,1.6vw,24px)}
  .site-header .nav > li > a{font-size:12.8px}
  .site-header .brand-img{height:64px}
}

/* ---- 30c. Thu khung header dung ty le simon (container ~1145/1905 = 60%) ---- */
.site-header .wide.hd{width:min(100% - 56px, 1150px)}
.topbar .wide{width:min(100% - 56px, 1150px)}
.site-header .nav{gap:clamp(20px,2.4vw,40px)}
@media(max-width:1250px){
  .site-header .wide.hd,.topbar .wide{width:min(100% - 40px,1150px)}
  .site-header .nav{gap:clamp(14px,1.8vw,26px)}
  .site-header .nav > li > a{font-size:13px}
}

/* =====================================================================
   31. LOGO HOA VAO NEN — bo khoi den dan tren header trang
   Header dung ban logo-light (da chinh do dam cho nen sang),
   footer nen toi van dung ban goc.
   ===================================================================== */
.site-header .brand,
.drawer .drawer-head .brand-img{
  background:none;padding:0;border-radius:0;box-shadow:none;
}
.site-header .brand-img{
  height:74px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.10));
  transition:filter .35s var(--ease),transform .35s var(--ease);
}
.site-header .brand:hover .brand-img{
  filter:drop-shadow(0 4px 12px rgba(198,147,32,.35));
  transform:translateY(-1px);
}
.drawer .drawer-head .brand-img{height:54px}

@media(max-width:1360px){.site-header .brand-img{height:64px}}
@media(max-width:1080px){.site-header .brand-img{height:58px}}
@media(max-width:700px){.site-header .brand-img{height:48px}}

/* =====================================================================
   32. LOGO — DUNG NGUYEN FILE GOC, CHI CAN DOI KICH THUOC
   Khong boc khoi den, khong doi mau. Chi dat kich thuoc hai hoa voi
   chieu cao thanh header va do dai menu.
   ===================================================================== */
.site-header .brand{background:none;padding:0;border-radius:0;box-shadow:none}
.site-header .brand-img{
  height:86px;width:auto;
  filter:none;                     /* giu nguyen mau file goc */
  transition:transform .35s var(--ease);
}
.site-header .brand:hover .brand-img{transform:translateY(-1px)}
.site-header .wide.hd{padding:16px 0 8px}

.drawer .drawer-head .brand-img{height:60px;background:none;padding:0}

@media(max-width:1360px){.site-header .brand-img{height:74px}}
@media(max-width:1080px){.site-header .brand-img{height:66px}}
@media(max-width:700px){.site-header .brand-img{height:54px}}

/* =====================================================================
   33. HEADER NEN TOI (phuong an A)
   Logo goc duoc thiet ke cho nen den -> dat tren nen toi de giu tron
   ve dep kim loai, khong phai chinh mau file.
   ===================================================================== */

/* ---- Topbar: toi nhat, tao lop tren cung ---- */
.topbar{background:#1F1F1F;border-bottom:1px solid rgba(255,255,255,.08);color:#9C9C9C}
.topbar a{color:#B9B9B9}
.topbar a:hover{color:var(--gold-lt)}
.topbar-l .dot{background:var(--gold-lt);box-shadow:0 0 0 3px rgba(233,185,73,.18)}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(233,185,73,0)}}

/* ---- Thanh header: cung mau voi footer ---- */
.site-header{
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:none;
}
.site-header.scrolled{
  background:#272727;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.75);
}

/* ---- Menu: chu sang, nhan vang ---- */
.site-header .nav > li > a{color:#EDEDED}
.site-header .nav > li > a:hover{color:var(--gold-lt)}
.site-header .nav > li.active > a{color:var(--gold-lt)}
.site-header .nav > li > a::after{background:var(--gold-lt)}

/* ---- O tim kiem hop voi nen toi ---- */
.hd-search{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}
.hd-search:focus-within{
  border-color:var(--gold-lt);
  box-shadow:0 0 0 3px rgba(233,185,73,.18);
  background:rgba(255,255,255,.09);
}
.hd-search input{color:#F1F1F1}
.hd-search input::placeholder{color:#8F8F8F}

/* ---- Nut icon / burger tren nen toi ---- */
.site-header .icon-btn{color:#EDEDED}
.site-header .icon-btn:hover{border-color:rgba(255,255,255,.25);color:var(--gold-lt)}

/* ---- Mega menu theo tong toi ---- */
.mega{background:#262626;border-color:rgba(255,255,255,.10)}
.mega-in{background:rgba(255,255,255,.10)}
.mega-in a{background:#262626}
.mega-in a:hover{background:#2F2F2F}
.mega-in h4{color:#F2F2F2}
.mega-in a:hover h4{color:var(--gold-lt)}
.mega-in p{color:#A5A5A5}

/* ---- Menu keo ra tren dien thoai ---- */
.drawer{background:#262626;border-left-color:rgba(255,255,255,.10)}
.drawer nav a{color:#EFEFEF;border-bottom-color:rgba(255,255,255,.10)}
.drawer nav a:hover{color:var(--gold-lt)}
.drawer .sub a{color:#A5A5A5}
.drawer .sub a:hover{color:var(--gold-lt)}
.drawer .drawer-head button{color:#EFEFEF}

/* ---- Lop tim kiem toan man: theo tong toi cho lien mach ---- */
.search-lb{background:rgba(26,26,26,.97)}
.search-lb input{color:#F2F2F2;border-bottom-color:rgba(255,255,255,.22)}
.search-lb input::placeholder{color:#6E6E6E}
.search-lb input:focus{border-bottom-color:var(--gold-lt)}
.search-hint{color:#9A9A9A}
.search-hint b{color:var(--gold-lt)}
.search-res{background:rgba(255,255,255,.10)}
.search-res a{background:#262626;color:#EDEDED}
.search-res a:hover{background:#2F2F2F;color:var(--gold-lt)}
.search-res .tag{color:#8F8F8F}
.close-x{color:#B0B0B0}
.close-x:hover{color:var(--gold-lt)}

/* ---- Logo: giu nguyen file goc, chi can doi kich thuoc ---- */
.site-header .brand-img{filter:none}
.drawer .drawer-head .brand-img{filter:none}

/* ---- Duong vien vang manh ngan header voi phan than sang ---- */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,185,73,.55),transparent);
}