/* Be Vietnam Pro - SIL Open Font License 1.1. Tu phuc vu tu may chu cua site. */
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/be-vietnam-pro-400-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/be-vietnam-pro-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/be-vietnam-pro-500-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/be-vietnam-pro-500-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/be-vietnam-pro-500-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/be-vietnam-pro-600-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/be-vietnam-pro-600-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/be-vietnam-pro-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/be-vietnam-pro-700-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/be-vietnam-pro-700-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/be-vietnam-pro-700-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:800; font-display:swap;
  src:url(fonts/be-vietnam-pro-800-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:800; font-display:swap;
  src:url(fonts/be-vietnam-pro-800-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro"; font-style:normal; font-weight:800; font-display:swap;
  src:url(fonts/be-vietnam-pro-800-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   Cho Thue Xuong — Giao dien website
   Token mau lay tu giao dien hien tai: xanh than #263548, xanh la #4B8606, do #BD0A0D
   Tac gia: Truong Thanh Design
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root{
  --brand:#263548;
  --brand-soft:#34455E;
  --brand-deep:#182230;
  --brand-tint:#EEF2F7;
  /* --accent: xanh la cua nut "Ky gui" va nhan VIP hien tai — chu trang tren no dat 4.6:1 */
  --accent:#4B8606;
  --accent-strong:#3C6C05;
  --accent-tint:#EAF3DD;
  --on-accent:#FFFFFF;
  /* --price: do cua tieu de khoi va dai chan trang hien tai */
  --price:#BD0A0D;
  --hot:#BD0A0D;

  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#EDF1F6;
  --text:#18212D;
  --muted:#5B6678;
  --line:#DFE5EE;
  --shadow:24 34 48;

  --r-s:8px; --r-m:12px; --r-l:18px;
  --e-1:0 1px 2px rgb(var(--shadow)/.06),0 2px 8px rgb(var(--shadow)/.05);
  --e-2:0 6px 16px rgb(var(--shadow)/.08),0 18px 40px rgb(var(--shadow)/.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D131B; --surface:#161F2C; --surface-2:#1E2A3A; --brand-tint:#1B2635;
    --text:#E8EDF4; --muted:#9AA8BC; --line:#293649;
    --brand:#1B2636; --brand-soft:#2B3B52; --brand-deep:#0A0F16;
    --accent:#7CC21E; --accent-strong:#93D63B; --accent-tint:#22330F; --on-accent:#0F1B02;
    --price:#FF8078; --hot:#D9342B; --shadow:0 0 0;
  }
}
:root[data-theme="dark"]{
  --bg:#0D131B; --surface:#161F2C; --surface-2:#1E2A3A; --brand-tint:#1B2635;
  --text:#E8EDF4; --muted:#9AA8BC; --line:#293649;
  --brand:#1B2636; --brand-soft:#2B3B52; --brand-deep:#0A0F16;
  --accent:#7CC21E; --accent-strong:#93D63B; --accent-tint:#22330F; --on-accent:#0F1B02;
  --price:#FF8078; --hot:#D9342B; --shadow:0 0 0;
}

/* ---------- 2. Nen tang ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.wrap{width:min(1280px,100%); margin-inline:auto; padding-inline:24px}
h1,h2,h3{text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.012em}
.ic{width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.16em}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip{position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--on-accent);
  padding:8px 14px; border-radius:6px; z-index:99; font-weight:700}
.skip:focus{left:8px}

/* ---------- 3. Nut ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--r-s);
  font-weight:700; font-size:.9rem; white-space:nowrap; line-height:1.2;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--accent); color:var(--on-accent); box-shadow:0 6px 16px rgb(75 134 6/.28)}
.btn-accent:hover{background:var(--accent-strong)}
.btn-brand{background:var(--brand); color:#fff}
.btn-brand:hover{background:var(--brand-soft)}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand-soft); background:var(--surface-2)}
.btn-light{border:1px solid rgb(255 255 255/.34); color:#fff}
.btn-light:hover{background:rgb(255 255 255/.12)}
.btn-block{width:100%}

/* ---------- 4. Header ---------- */
.topbar{background:var(--brand-deep); color:rgb(255 255 255/.78); font-size:.775rem}
.topbar .wrap,.site-header .wrap{width:min(1400px,100%)}
.topbar .wrap{display:flex; gap:16px; align-items:center; min-height:38px; white-space:nowrap}
.topbar a{display:inline-flex; align-items:center; gap:6px}
.topbar a:hover{color:#fff}
.topbar .hot{font-weight:700; color:#fff; font-variant-numeric:tabular-nums}
.topbar .sep{flex:1}
.ctx-lang{display:inline-flex; gap:2px; order:2}
.ctx-lang button{font:inherit; font-weight:700; letter-spacing:.04em; color:var(--muted); background:none; border:1px solid var(--line); border-radius:var(--r-s); padding:3px 10px; cursor:pointer}
.ctx-lang button:hover{color:var(--accent-strong); border-color:var(--accent)}
.ctx-lang button[aria-pressed="true"]{color:#fff; background:var(--accent); border-color:var(--accent)}
/* Ẩn thanh công cụ và bóng chú thích mặc định của Google Translate; trang không bị đẩy xuống */
iframe.skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip{display:none!important}
body{top:0!important}
.goog-text-highlight{background:none!important; box-shadow:none!important}
.topbar .tm{display:flex; gap:14px}
.topbar .div{width:1px; height:14px; background:rgb(255 255 255/.2)}
.lang{display:flex; gap:2px; align-items:center; border:1px solid rgb(255 255 255/.18); border-radius:6px; padding:2px}
.lang a{font-size:.7rem; padding:2px 7px; border-radius:4px; font-weight:700}
.lang a[aria-current]{background:#fff; color:var(--brand-deep)}

.site-header{position:sticky; top:0; z-index:40; background:var(--brand); color:#fff;
  box-shadow:0 1px 0 rgb(255 255 255/.06),0 8px 24px rgb(0 0 0/.18)}
.site-header .wrap{display:flex; align-items:center; gap:14px; min-height:72px}
.logo{display:flex; align-items:center; flex:none}
.logo img{height:46px; width:auto}
.mainnav{margin-left:auto; display:flex; align-items:stretch; align-self:stretch}
.mainnav > *{position:relative; display:flex; align-items:center}
.mainnav > * > a{font-weight:600; font-size:.84rem; padding:8px 9px; border-radius:var(--r-s); white-space:nowrap;
  display:inline-flex; align-items:center; gap:3px; color:rgb(255 255 255/.9)}
.mainnav > * > a .ic{width:.8em; height:.8em; opacity:.7}
.mainnav > * > a:hover,.mainnav > .has-sub:hover > a{background:rgb(255 255 255/.1); color:#fff}
.mainnav a.is-active{color:#fff}
.mainnav > * > a.is-active::after{content:""; position:absolute; left:11px; right:11px; bottom:0; height:3px;
  background:var(--accent); border-radius:3px 3px 0 0}
.subnav{position:absolute; top:100%; left:0; padding:14px; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:0 0 var(--r-m) var(--r-m);
  box-shadow:var(--e-2); display:none; z-index:5; grid-template-columns:repeat(3,minmax(196px,1fr)); gap:0 8px}
.has-sub:nth-last-child(-n+4) .subnav{left:auto; right:0}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:grid}
@media (min-width:1341px){.mainnav:hover .has-sub:not(:hover) .subnav{display:none}}
.subnav a{display:block; font-weight:500; font-size:.85rem; padding:7px 10px; border-radius:6px}
.subnav a:hover{background:var(--accent-tint); color:var(--accent-strong)}
.only-m{display:none}
.navtoggle{display:none; margin-left:auto; padding:10px 14px; border-radius:var(--r-s); background:rgb(255 255 255/.12);
  font-weight:700; font-size:.85rem; align-items:center; gap:8px}
.header-cta{flex:none}

/* ---------- 5. Slide banner dau trang ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(900px 480px at 86% 0%,rgb(75 134 6/.24),transparent 62%),
             linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 78%)}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 47px,rgb(255 255 255/.045) 47px 48px),
             repeating-linear-gradient(90deg,transparent 0 47px,rgb(255 255 255/.045) 47px 48px)}
.hero .wrap{padding-block:24px 118px; position:relative}
.hero .note{position:absolute; left:40px; top:36px; z-index:4}
.slider{position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--brand-deep);
  box-shadow:0 26px 60px rgb(0 0 0/.4); border:1px solid rgb(255 255 255/.14)}
.slides{display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start; display:block; aspect-ratio:3/1}
.slide img{width:100%; height:100%; object-fit:cover}
.bnav{position:absolute; top:50%; translate:0 -50%; width:44px; height:44px; border-radius:50%; background:rgb(10 16 24/.55);
  color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); border:1px solid rgb(255 255 255/.2);
  opacity:0; transition:opacity .2s ease,background .2s ease}
.slider:hover .bnav,.bnav:focus-visible{opacity:1}
.bnav:hover{background:var(--accent); color:var(--on-accent)}
.bnav.prev{left:14px} .bnav.next{right:14px}
.dots{position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:7px}
.dots button{width:9px; height:9px; border-radius:9px; background:rgb(255 255 255/.5); transition:width .25s ease,background .25s ease}
.dots button[aria-current="true"]{width:28px; background:#fff}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; padding:5px 12px; border-radius:999px; background:var(--accent-tint); color:var(--accent-strong)}
.kicker i{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}
.intro{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px 48px; align-items:center; margin-bottom:34px}
.intro h1{font-size:clamp(1.55rem,1.1rem+1.9vw,2.4rem); line-height:1.18; font-weight:800; margin-top:14px; letter-spacing:-.02em}
.intro h1 em{font-style:normal; color:var(--accent-strong)}
.lede{margin:12px 0 0; color:var(--muted); max-width:62ch}
.stats{display:grid; grid-template-columns:repeat(4,auto); margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--e-1); position:relative}
.stats div{display:flex; flex-direction:column-reverse; padding:18px 20px; border-left:1px solid var(--line)}
.stats div:first-child{border-left:0}
.stats dt{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.stats dd{margin:0; font-size:1.65rem; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--brand)}
:root[data-theme="dark"] .stats dd{color:var(--text)}
.stats .note{position:absolute; right:8px; top:-12px}

/* ---------- 6. Khung tim kiem ---------- */
.searchwrap{margin-top:-90px; position:relative; z-index:3}
.searchcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--e-2); padding:18px 20px 20px}
.search-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px}
.search-top h2{font-size:1rem; display:flex; align-items:center; gap:8px}
.tabs{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:10px}
.tabs button{padding:8px 22px; border-radius:7px; font-size:.86rem; font-weight:700; color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--brand); color:#fff; box-shadow:var(--e-1)}
.searchrow{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.searchrow .wide{grid-column:span 4}
.searchrow .act{grid-column:span 2; align-self:end}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.field select,.field input,.field textarea{width:100%; height:46px; padding:0 12px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:.92rem;
  transition:border-color .15s ease,box-shadow .15s ease}
.field select:hover,.field input:hover{border-color:var(--brand-soft)}
.field select:focus,.field input:focus,.field textarea:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgb(75 134 6/.18)}
.quick{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.quick b{font-size:.78rem; color:var(--muted); font-weight:600; margin-right:2px}
.chip{font-size:.8rem; padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-weight:600; transition:all .15s ease}
.chip:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-tint)}

/* ---------- 7. O nhom san pham ---------- */
.cats{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.cat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 16px; display:flex;
  flex-direction:column; gap:10px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cat:hover{transform:translateY(-3px); box-shadow:var(--e-2); border-color:var(--accent)}
.cat-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand);
  transition:background .18s ease,color .18s ease}
.cat-ic .ic{width:24px; height:24px; stroke-width:1.7}
.cat:hover .cat-ic{background:var(--accent); color:var(--on-accent)}
.cat b{font-size:.95rem; line-height:1.3}
.cat span{font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; display:flex; align-items:center;
  justify-content:space-between; margin-top:auto}
.cat span .ic{color:var(--accent-strong)}
:root[data-theme="dark"] .cat-ic{color:#fff}

/* ---------- 8. Section chung ---------- */
.section{padding-block:clamp(44px,5vw,72px)}
.section.tight{padding-block:clamp(28px,3.4vw,44px)}
.section.first{padding-top:clamp(30px,3.6vw,46px)}
.hero ~ .section{padding-block:clamp(18px,2.2vw,30px)} /* trang chủ: các khối nằm sát nhau hơn */
.hero ~ .section .section-head{margin-bottom:18px}
.band{background:var(--surface); border-block:1px solid var(--line)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.section-head h2{font-size:clamp(1.3rem,1.05rem+1.1vw,1.8rem); line-height:1.22; position:relative; padding-bottom:12px}
.section-head h2::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--price) 0 62%,var(--accent) 62% 100%)}
.link-more{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.86rem; color:var(--brand);
  padding:9px 15px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface)}
.link-more:hover{border-color:var(--accent); color:var(--accent-strong)}
:root[data-theme="dark"] .link-more{color:var(--text)}

/* ---------- 9. The tin dang ---------- */
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.pgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.pgrid.c5{grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px}
@media (max-width:1100px){.pgrid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; display:flex;
  flex-direction:column; box-shadow:var(--e-1); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pcard:hover,.pcard:focus-within{transform:translateY(-4px); box-shadow:var(--e-2); border-color:rgb(75 134 6/.55)}
.pcard-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); display:block}
.pcard-media > a{display:block; width:100%; height:100%}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.badges{position:absolute; top:10px; left:10px; display:flex; gap:6px}
.tag{font-size:.66rem; font-weight:800; letter-spacing:.07em; padding:4px 9px; border-radius:6px; background:var(--accent);
  color:var(--on-accent); box-shadow:0 2px 6px rgb(0 0 0/.25)}
.tag.hot{background:var(--hot); color:#fff}
.tag.dark{background:rgb(16 24 34/.78); color:#fff; backdrop-filter:blur(4px)}
.fav{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:50%; background:rgb(255 255 255/.94);
  color:#5B6678; display:grid; place-items:center; box-shadow:0 2px 8px rgb(0 0 0/.2); transition:all .15s ease}
.fav:hover{color:#BD0A0D; transform:scale(1.08)}
.fav[aria-pressed="true"]{background:#BD0A0D; color:#fff}
.fav[aria-pressed="true"] .ic{fill:currentColor}
.pcard-main{display:flex; flex-direction:column; flex:1; min-width:0}
.pcard-body{padding:14px 16px 12px; display:flex; flex-direction:column; gap:9px; flex:1}
.price{font-size:1.2rem; font-weight:800; color:var(--price); font-variant-numeric:tabular-nums; line-height:1.15; letter-spacing:-.01em}
.price span{font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:0}
.pcard h3{font-size:.95rem; font-weight:600; line-height:1.42; letter-spacing:0; overflow-wrap:anywhere} /* hiện đủ tiêu đề, không cắt bằng "…" (khách yêu cầu) */
.pcard h3 a:hover{color:var(--accent-strong)}
.excerpt{margin:0; font-size:.85rem; color:var(--muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.meta{display:flex; flex-direction:column; gap:5px; margin-top:auto; font-size:.82rem; color:var(--muted)}
.meta span{display:flex; align-items:center; gap:7px; min-width:0}
.meta span b{font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meta .ic{color:var(--accent-strong)}
.pcard-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px;
  border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); background:linear-gradient(var(--surface),var(--bg))}
.pcard-foot a{font-weight:700; color:var(--brand); display:inline-flex; align-items:center; gap:5px}
.pcard-foot a:hover{color:var(--accent-strong)}
.pgrid.c5 .pcard-foot{padding:10px 10px; gap:4px; font-size:.72rem} /* 5 cột: thẻ hẹp, giữ "Cập nhật ..." và "Chi tiết" trên một dòng */
.pgrid.c5 .pcard-foot > span{white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.pgrid.c5 .pcard-foot > span .ic{display:none}
.pgrid.c5 .pcard-foot a{white-space:nowrap}
:root[data-theme="dark"] .pcard-foot a{color:var(--text)}
.pgrid.list{grid-template-columns:1fr; gap:16px}
.pgrid.list .pcard{flex-direction:row}
.pgrid.list .pcard-media{width:270px; flex:none; aspect-ratio:auto; min-height:196px}
.pgrid.list .meta{flex-direction:row; flex-wrap:wrap; gap:6px 18px}
.pgrid:not(.list) .excerpt{display:none}

/* ---------- 10. Tin tuc + xem nhieu ---------- */
.split{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:36px; align-items:start}
.split > *{min-width:0}
.newslist{display:flex; flex-direction:column; gap:12px}
.nfeat{display:block; border-radius:var(--r-m); overflow:hidden; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--e-1)}
.nfeat img{width:100%; aspect-ratio:16/9; object-fit:cover}
.nfeat div{padding:14px 16px 16px}
.nfeat b{display:block; font-size:1.02rem; line-height:1.4; font-weight:700}
.nfeat p{margin:6px 0 0; font-size:.85rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.nitem{display:flex; gap:12px; align-items:center; padding:8px; border-radius:var(--r-m); border:1px solid transparent}
.nitem:hover{background:var(--bg); border-color:var(--line)}
.nitem img{width:96px; height:68px; object-fit:cover; border-radius:var(--r-s); flex:none}
.nitem b{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:.88rem;
  font-weight:600; line-height:1.42}
.nitem:hover b,.nfeat:hover b{color:var(--accent-strong)}
.toplists{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.toplist{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:22px 24px; box-shadow:var(--e-1)}
.toplist h2{font-size:1.06rem; margin-bottom:8px; display:flex; align-items:center; gap:9px}
.toplist h2 .ic{color:var(--price)}
.toplist ol{margin:0; padding:0; list-style:none; counter-reset:n}
.toplist li{counter-increment:n; display:flex; gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line);
  font-size:.9rem}
.toplist li::before{content:counter(n,decimal-leading-zero); font-weight:800; font-size:.8rem; color:var(--muted);
  font-variant-numeric:tabular-nums; flex:none}
.toplist li:nth-child(-n+3)::before{color:var(--price)}
.toplist a:hover{color:var(--accent-strong)}

/* ---------- 11. Khoi tu van ---------- */
.consult{position:relative; overflow:hidden; color:#fff; border-radius:var(--r-l); padding:clamp(24px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center;
  background:radial-gradient(700px 360px at 0% 100%,rgb(75 134 6/.3),transparent 60%),
             linear-gradient(135deg,var(--brand-soft),var(--brand-deep))}
.consult > *{min-width:0}
.consult .eyebrow{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#A6E24A}
.consult h2{font-size:clamp(1.3rem,1.05rem+1.1vw,1.75rem); margin-top:8px; line-height:1.25}
.agent{display:flex; gap:16px; align-items:center; margin-top:22px; padding:16px; border-radius:var(--r-m);
  background:rgb(255 255 255/.07); border:1px solid rgb(255 255 255/.14)}
.agent img{width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgb(255 255 255/.25); flex:none}
.agent h3{font-size:1.05rem}
.agent .role{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; font-weight:700}
.agent .lines{margin-top:9px; display:flex; flex-wrap:wrap; gap:8px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:.82rem;
  font-weight:700; background:rgb(255 255 255/.12); border:1px solid rgb(255 255 255/.2); font-variant-numeric:tabular-nums}
.pill:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.formcard{background:var(--surface); color:var(--text); border-radius:var(--r-m); padding:22px; box-shadow:0 24px 60px rgb(0 0 0/.3);
  display:grid; grid-template-columns:1fr 1fr; gap:12px}
.formcard h3{grid-column:1/-1; font-size:1.06rem}
.formcard .field.full,.formcard .btn,.formcard .formmsg,.formcard .fine{grid-column:1/-1}
.field textarea{height:auto; padding:11px 12px; resize:vertical; min-height:88px}
.formmsg{font-size:.84rem; margin:0; padding:9px 12px; border-radius:var(--r-s); background:var(--accent-tint); color:var(--accent-strong); font-weight:600}
.fine{font-size:.76rem; color:var(--muted); margin:0; display:flex; gap:6px; align-items:center}
.hp{position:absolute; left:-9999px}

/* ---------- 12. Footer ---------- */
.site-footer{background:var(--brand-deep); color:rgb(255 255 255/.74); margin-top:clamp(40px,5vw,72px); border-top:4px solid var(--price)}
.footer-grid{display:grid; grid-template-columns:1fr 1.15fr 1fr 1.2fr; gap:36px; padding-block:52px 40px}
.fbrand img{height:50px; width:auto}
.fbrand address{font-style:normal; font-size:.88rem; display:flex; flex-direction:column; gap:9px; margin-top:0}
.fsocial + address{margin-top:18px}
.fbrand .fsocial{margin-top:0}
.fagent{display:flex; gap:14px; align-items:center; margin-bottom:14px}
.fagent img{width:84px; height:96px; object-fit:cover; border-radius:6px; flex:none}
.fagent b{display:block; color:#fff; font-size:1rem; line-height:1.3}
.fagent .role{display:block; font-size:.82rem; color:rgb(255 255 255/.7); margin-top:3px}
.fcontact{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.88rem}
.fcontact li{display:flex; gap:9px; align-items:center}
.fcontact .ic{color:#A6E24A}
.fcontact a:hover{color:#fff}
.fbrand address b{color:#fff; font-size:.92rem}
.fbrand address span{display:flex; gap:9px; align-items:flex-start}
.fbrand address .ic{margin-top:.28em; color:#A6E24A}
.fbrand a:hover{color:#fff}
.site-footer h2{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:700; margin-bottom:16px}
.fmenu{display:flex; flex-direction:column; gap:10px; font-size:.88rem}
.fmenu a{display:inline-flex; gap:8px; align-items:baseline; line-height:1.45}
.fmenu a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; translate:0 -2px}
.fmenu a:hover{color:#fff}
.fsocial{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.fsocial a{padding:7px 12px; border-radius:var(--r-s); background:rgb(255 255 255/.08); border:1px solid rgb(255 255 255/.1);
  font-size:.76rem; font-weight:700; color:#fff}
.fsocial a:hover{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.fbottom{border-top:1px solid rgb(255 255 255/.1); padding-block:16px; font-size:.8rem; display:flex; flex-wrap:wrap;
  gap:8px 20px; justify-content:space-between; align-items:center; color:rgb(255 255 255/.6)}

/* ---------- 13. Dau trang con / thanh loc / phan trang ---------- */
.pagehead{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff; padding-block:20px 44px}
.crumb{font-size:.8rem; color:rgb(255 255 255/.7); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumb a:hover{color:#fff; text-decoration:underline}
.crumb [aria-current]{color:#fff}
.page-title{font-size:clamp(1.5rem,1.1rem+1.7vw,2.2rem); line-height:1.22; margin-top:12px; font-weight:800}
.pagehead p{margin:8px 0 0; color:rgb(255 255 255/.76); font-size:.92rem}
.pagehead p b{color:#fff}
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:12px 14px; margin-block:-26px 26px; position:relative; box-shadow:var(--e-2)}
.toolbar select{height:42px; padding:0 10px; border-radius:var(--r-s); border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-size:.86rem; font-weight:600; min-width:0}
.toolbar .grow{flex:1}
.viewtoggle{display:flex; gap:4px; background:var(--surface-2); border-radius:var(--r-s); padding:3px}
.viewtoggle button{padding:7px 13px; border-radius:6px; font-size:.8rem; font-weight:700; color:var(--muted)}
.viewtoggle button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--e-1)}
.pager{display:flex; gap:6px; justify-content:center; padding-block:30px 6px; flex-wrap:wrap}
.pager a{min-width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-s); border:1px solid var(--line);
  font-size:.88rem; font-weight:700; padding-inline:11px; background:var(--surface)}
.pager a[aria-current]{background:var(--brand); color:#fff; border-color:var(--brand)}
.pager a:hover:not([aria-current]){border-color:var(--accent); color:var(--accent-strong)}
.sibling-links{display:flex; flex-wrap:wrap; gap:8px}
.seo-text{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 28px;
  color:var(--muted); font-size:.92rem; margin-top:28px}
.seo-text h2{font-size:1.14rem; color:var(--text); margin-bottom:8px}
.seo-text p{margin:0 0 8px}

/* ---------- 14. Trang chi tiet ---------- */
.detail-top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 32px; justify-content:space-between; margin-top:12px}
.detail-top h1{font-size:clamp(1.4rem,1.1rem+1.4vw,2rem); line-height:1.26; max-width:30ch; font-weight:800}
.dmeta{margin-top:10px; font-size:.85rem; color:rgb(255 255 255/.78); display:flex; flex-wrap:wrap; gap:6px 18px}
.dmeta span{display:inline-flex; align-items:center; gap:6px}
.detail-price{flex:none}
.detail-price .price{font-size:2rem; color:#fff}
.detail-price .price span{color:rgb(255 255 255/.72)}
.actionbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,1fr); gap:10px; margin-top:-24px; position:relative}
.gallery figure{margin:0; border-radius:var(--r-m); overflow:hidden; position:relative; aspect-ratio:4/3; background:var(--surface-2);
  box-shadow:var(--e-1)}
.gallery .main{grid-row:span 2; aspect-ratio:auto; min-height:260px}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery .more{position:absolute; inset:0; background:rgb(10 16 26/.62); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:.92rem}
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; align-items:start; padding-block:28px 0}
.detail-grid > *{min-width:0}
.block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 26px; margin-bottom:20px;
  box-shadow:var(--e-1)}
.block > h2{font-size:1.14rem; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.block > h2::before{content:""; width:4px; height:20px; border-radius:4px; background:var(--price)}
.factgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0}
.fact{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; display:flex; gap:11px}
.fact .ic{width:20px; height:20px; color:var(--accent-strong); margin-top:2px}
.fact dt{font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700}
.fact dd{margin:2px 0 0; font-size:.94rem; font-weight:700; line-height:1.35}
.prose{font-size:.96rem}
.prose h3{font-size:1.02rem; margin:20px 0 8px}
.prose h3:first-of-type{margin-top:0}
.prose ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px}
.prose li{display:flex; gap:9px; align-items:flex-start}
.prose li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; margin-top:.6em}
.prose .small{font-size:.82rem; color:var(--muted); margin:18px 0 0; padding-top:14px; border-top:1px dashed var(--line)}
.mapbox{aspect-ratio:16/7; border-radius:var(--r-s); overflow:hidden; border:1px solid var(--line);
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgb(125 140 160/.2) 38px 39px),
             repeating-linear-gradient(90deg,transparent 0 38px,rgb(125 140 160/.2) 38px 39px),var(--surface-2);
  display:grid; place-items:center; font-size:.86rem; font-weight:600; color:var(--muted); text-align:center; padding:12px}
.side{position:sticky; top:92px; display:flex; flex-direction:column; gap:18px}
.agentbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--e-1)}
.agentbox .hd{padding:13px 18px; font-weight:700; font-size:.9rem; border-bottom:1px solid var(--line); background:var(--bg)}
.agentbox .bd{padding:18px; display:flex; gap:14px; align-items:center}
.agentbox img{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none}
.agentbox h3{font-size:1rem}
.agentbox .role{font-size:.78rem; color:var(--muted)}
.tel{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-weight:800; font-size:1.08rem; color:var(--price);
  font-variant-numeric:tabular-nums}
.agentbox .acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 18px 18px}
.inquiry{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:var(--r-m);
  box-shadow:var(--e-1); padding:18px}
.inquiry h2{font-size:1rem; margin-bottom:12px; line-height:1.35}
.inquiry form{display:flex; flex-direction:column; gap:10px}

/* ---------- 15. Nut noi ---------- */
.floaters{position:fixed; right:18px; bottom:18px; z-index:45; display:flex; flex-direction:column; gap:10px; align-items:center}
.floaters a,.totop{width:50px; height:50px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 10px 26px rgb(var(--shadow)/.34); position:relative; font-weight:800; font-size:.72rem}
.floaters .ic{width:22px; height:22px}
.floaters .f-call{background:var(--hot)}
.floaters .f-call::before{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--hot);
  animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(.86); opacity:.9} to{transform:scale(1.3); opacity:0}}
.floaters .f-zalo{background:#0068FF}
.floaters .f-req{background:var(--accent); color:var(--on-accent)}
.floaters a::after{content:attr(data-label); position:absolute; right:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--brand-deep); color:#fff; font-size:.76rem; font-weight:700; padding:6px 10px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease}
.floaters a:hover::after{opacity:1}
.totop{background:var(--brand); opacity:0; pointer-events:none; transition:opacity .25s ease; width:42px; height:42px}
.totop.show{opacity:1; pointer-events:auto}

/* ---------- 17. Responsive ---------- */
@media (max-width:1340px){
  .topbar .tm,.topbar .tm + .div{display:none}
  .mainnav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--brand-deep); padding:10px 16px 18px; max-height:calc(100vh - 72px); overflow:auto;
    border-top:1px solid rgb(255 255 255/.1)}
  .mainnav.open{display:flex}
  .mainnav > *{flex-direction:column; align-items:stretch}
  .mainnav > * > a{white-space:normal; padding:11px 10px; justify-content:space-between}
  .mainnav > * > a.is-active::after{display:none}
  .subnav{position:static; display:none; grid-template-columns:1fr 1fr; box-shadow:none; margin:2px 0 8px; border-radius:var(--r-s)}
  .has-sub:hover .subnav{display:none}
  .has-sub:focus-within .subnav{display:grid}
  .only-m{display:flex}
  .navtoggle{display:inline-flex}
  .header-cta{display:none}
  .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .intro{grid-template-columns:minmax(0,1fr)}
  .searchrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .searchrow .wide,.searchrow .act{grid-column:1/-1}
  .pgrid,.pgrid.c3,.pgrid.c5{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .split,.toplists,.consult,.detail-grid{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px}
  .factgrid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:none}
  .gallery .main{grid-column:span 2; grid-row:auto}
  .prose ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .topbar .mail{display:none}
  .topbar .wrap{gap:10px}
  .kicker{font-size:.64rem; letter-spacing:.06em; border-radius:10px}
  .lang a{padding:2px 5px}
  .fact .ic{display:none}
  .site-header .wrap{min-height:62px}
  .logo img{height:38px}
  .hero .wrap{padding-block:14px 104px}
  .slide{aspect-ratio:1/1}
  .bnav{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .stats dd{font-size:1.35rem}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .pgrid,.pgrid.c3,.pgrid.c5{grid-template-columns:minmax(0,1fr)}
  .pgrid.list .pcard{flex-direction:column}
  .pgrid.list .pcard-media{width:100%; aspect-ratio:4/3; min-height:0}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .formcard{grid-template-columns:1fr}
  .subnav{grid-template-columns:1fr}
  .toolbar select{flex:1 1 44%}
  .toolbar .grow{display:none}
  .floaters{right:12px; bottom:12px}
  .block{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- 18. Bo sung cho ban chay that ---------- */
.logo b{font-size:1.2rem; font-weight:800; letter-spacing:.01em}
.btn-tall{height:46px}
.searchwrap.no-banner{margin-top:24px}
.empty{padding:40px 20px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line); border-radius:var(--r-m)}
.page-body{padding-block:28px 0}
.page-title small{font-size:.5em; font-weight:600; opacity:.75}
.page-title.article-title{max-width:26ch; font-size:clamp(1.4rem,1.1rem+1.4vw,2rem)}
.pagehead p{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pagehead + .wrap > .toolbar:first-child{margin-top:-26px}
.pagehead + .wrap:not(:has(> .toolbar:first-child)):not(:has(> .gallery:first-child)){padding-top:28px}
form.toolbar .btn{padding:0 16px; height:42px}
.sibs-head{margin-top:34px}
.news-cats{margin-bottom:22px}
.formmsg.is-error{background:#FBE9E9; color:#8E0C0E}
.fbottom a:hover{color:#fff}
.flangs{display:flex; gap:14px; flex-wrap:wrap}
.detail-grid.no-gallery{padding-top:28px}

/* luoi tin tuc */
.ngrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.ncard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--e-1);
  display:flex; flex-direction:column; transition:transform .2s ease,box-shadow .2s ease}
.ncard:hover{transform:translateY(-3px); box-shadow:var(--e-2)}
.ncard-media{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.ncard-media img{width:100%; height:100%; object-fit:cover}
.ncard-body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:7px}
.ncard time{font-size:.78rem; color:var(--muted)}
.ncard h2{font-size:1rem; line-height:1.42; font-weight:700; letter-spacing:0}
.ncard h2 a:hover{color:var(--accent-strong)}
.ncard p{margin:0; font-size:.86rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* bai viet */
.article-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:30px; align-items:start; padding-top:28px}
.article-grid > *{min-width:0}
.article-lede{font-size:1.06rem; font-weight:600; color:var(--text)}
.newslist.pad{padding:10px}
.newslist.pad .nitem img{width:84px; height:60px}

/* noi dung do quan tri soan */
.rich{overflow-wrap:anywhere}
.rich > *:first-child{margin-top:0}
.rich p{margin:0 0 14px}
.rich h2{font-size:1.25rem; margin:26px 0 10px}
.rich h3{font-size:1.08rem; margin:22px 0 8px}
.rich h4{font-size:1rem; margin:18px 0 6px}
.rich ul,.rich ol{display:block; margin:0 0 14px; padding-left:22px; list-style:revert}
.rich li{display:list-item; margin-bottom:5px}
.rich li::before{content:none}
.rich a{color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px}
.rich img{height:auto; border-radius:var(--r-s)}
.rich img.aligncenter,.rich p[style*="text-align:center"] img,.rich p[style*="text-align: center"] img{display:block; margin-inline:auto}
.rich img.alignright{float:right; margin:4px 0 12px 18px}
.rich img.alignleft{float:left; margin:4px 18px 12px 0}
.rich figure{margin:0 0 14px; max-width:100%}
.rich figcaption{font-size:.84rem; color:var(--muted); text-align:center; margin-top:6px}
.rich table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:.92rem; display:block; overflow-x:auto}
.rich th,.rich td{border:1px solid var(--line); padding:8px 10px; vertical-align:top}
.rich th{background:var(--surface-2)}
.rich iframe,.rich video{max-width:100%; border:0; border-radius:var(--r-s)}
.rich blockquote{margin:0 0 14px; padding:10px 16px; border-left:4px solid var(--accent); background:var(--bg)}
.prose ul.lines{margin-bottom:16px; grid-template-columns:1fr; gap:5px}
.prose ul.lines li.is-head{font-weight:700; margin-top:10px}
.prose ul.lines li.is-head::before{content:none}
.prose ul.lines li.is-head:first-child{margin-top:0}
.hero:not(:has(.slider)) .wrap{padding-block:0 96px}
.pvideo{width:100%; border-radius:var(--r-s); background:#000}

/* anh chi tiet + xem anh lon */
.gallery figure button{display:block; width:100%; height:100%; padding:0; position:relative}
.gallery.g1{grid-template-columns:1fr; grid-template-rows:none}
.gallery.g1 .main{aspect-ratio:16/7; min-height:0; max-width:920px}
.gallery.g2{grid-template-columns:1fr 1fr; grid-template-rows:none}
.gallery.g2 .main{grid-row:auto; aspect-ratio:4/3; min-height:0}
.gallery.g3{grid-template-columns:2fr 1fr}
.gallery.g4{grid-template-columns:2fr 1fr 1fr}
.gallery.g4 figure:nth-child(2){grid-column:span 2}
.lightbox{position:fixed; inset:0; z-index:90; background:rgb(8 12 18/.94); display:grid; place-items:center; padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1400px,100%); max-height:calc(100vh - 80px); object-fit:contain; border-radius:6px}
.lb-close,.lb-nav{position:absolute; width:46px; height:46px; border-radius:50%; background:rgb(255 255 255/.14); color:#fff;
  font-size:1.6rem; line-height:1; display:grid; place-items:center}
.lb-close:hover,.lb-nav:hover{background:var(--accent)}
.lb-close{top:16px; right:16px}
.lb-prev{left:16px; top:50%; translate:0 -50%}
.lb-next{right:16px; top:50%; translate:0 -50%}
.lb-count{position:absolute; bottom:16px; left:50%; translate:-50% 0; color:#fff; font-size:.86rem; font-weight:600}
.mapbox.is-open{display:block; padding:0; background:var(--surface-2)}
.mapbox iframe{width:100%; height:100%; border:0; display:block}

@media (max-width:980px){
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .gallery.g3,.gallery.g4{grid-template-columns:1fr 1fr}
  .gallery.g4 figure:nth-child(2){grid-column:auto}
}
@media (max-width:640px){
  .ngrid{grid-template-columns:minmax(0,1fr)}
  form.toolbar .btn{flex:1 1 100%}
  .lb-nav{width:40px; height:40px}
}

/* ---------- 19. Bo cuc theo site cu (gop y cua khach): dau trang, banner + tim kiem, chi tiet tin ---------- */
.vh{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.btn-sm{padding:8px 14px; font-size:.82rem}

/* thanh tren: nen sang, muc dau to xanh, co ngon ngu */
.topbar{background:var(--surface); color:var(--muted); border-bottom:1px solid var(--line); font-size:.74rem}
.topbar .wrap{width:min(1280px,100%); min-height:40px; gap:12px}
.topbar .tm{gap:0; align-self:stretch; align-items:stretch; flex:1; min-width:0}
.topbar .tm a{padding:0 13px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; color:var(--muted); position:relative}
.topbar .tm a + a::before{content:""; position:absolute; left:0; top:50%; height:12px; translate:0 -50%; width:1px; background:var(--line)}
.topbar .tm a:hover{color:var(--accent-strong)}
.topbar .tm a:first-child{background:var(--accent); color:#fff; font-weight:800; padding:0 18px}
.topbar .tm a:first-child:hover{background:var(--accent-strong); color:#fff}
.topbar .tm a:first-child + a::before{display:none}
.topbar .hot{display:none; color:var(--price)}
.flags{display:flex; gap:6px; margin-left:auto; align-items:center}
.flags a{display:block; border-radius:4px; padding:2px; border:1px solid transparent; transition:border-color .15s ease,transform .15s ease}
.flags a:hover{transform:translateY(-1px)}
.flags a[aria-current]{border-color:var(--accent)}
.flags img{width:26px; height:26px; object-fit:contain}

/* dai logo + lien he */
.site-header{position:static; box-shadow:none; background:var(--brand)}
.site-header .wrap{width:min(1280px,100%); min-height:96px; justify-content:space-between; gap:20px}
.site-header .logo img{height:58px}
.hcontact{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.hline{display:inline-flex; align-items:baseline; gap:8px; color:#fff; font-variant-numeric:tabular-nums}
.hline span{color:#FF7A6B; font-weight:700; font-size:.9rem}
.hline b{font-size:1.28rem; font-weight:800; letter-spacing:.01em}
.hline:hover b{color:#fff; text-decoration:underline; text-underline-offset:3px}
.hsocial{display:flex; gap:6px}
.hsocial a{display:block; width:26px; height:26px; border-radius:6px; overflow:hidden; background:#fff; opacity:.86;
  transition:opacity .15s ease,transform .15s ease}
.hsocial a:hover{opacity:1; transform:translateY(-2px)}
.hsocial img{width:100%; height:100%; object-fit:cover}

/* thanh menu chinh dong khung */
.navbar{position:sticky; top:0; z-index:40; background:var(--brand)}
.navbar .wrap{width:min(1280px,100%)}
.navbox{position:relative; display:flex; align-items:stretch; min-height:52px; background:var(--brand-deep); color:#fff;
  border-radius:var(--r-s) var(--r-s) 0 0; box-shadow:0 8px 22px rgb(0 0 0/.18)}
.nav-home{display:grid; place-items:center; width:56px; flex:none; border-radius:var(--r-s) 0 0 0; border-right:1px solid rgb(255 255 255/.08)}
.nav-home .ic{width:22px; height:22px}
.nav-home:hover,.nav-home.is-active{background:var(--accent)}
.navbox .mainnav{margin-left:0; flex:1; min-width:0}
.navbox .mainnav > * > a{height:100%; border-radius:0; padding:0 13px; text-transform:uppercase; font-size:.78rem; font-weight:700;
  letter-spacing:.01em; border-right:1px solid rgb(255 255 255/.08)}
.navbox .mainnav > * > a.is-active::after{left:0; right:0; border-radius:0}
.navbox .mainnav > * > a > .ic{display:none}
.nav-fav{margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:0 16px; flex:none; font-size:.78rem; font-weight:700;
  text-transform:uppercase; white-space:nowrap; border-left:1px solid rgb(255 255 255/.08)}
.nav-fav .ic{width:22px; height:22px; color:var(--accent)}
.nav-fav .t{display:none} /* chỉ hiện biểu tượng giỏ và số lượng; chữ vẫn có trong title / aria-label */
.nav-fav:hover{background:rgb(255 255 255/.08)}
.nav-fav b{color:#fff}

/* banner trai + tim kiem phai */
.hero{background:var(--brand); overflow:visible}
.hero::before{content:none}
.hero .wrap{width:min(1280px,100%); padding-block:0 30px}
.herobox{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; padding:20px; align-items:stretch; background:var(--surface-2);
  border-radius:0 0 var(--r-m) var(--r-m)}
.herobox.no-banner{grid-template-columns:minmax(0,1fr)}
.herobox .slider{border-radius:var(--r-s); border:6px solid #fff; box-shadow:var(--e-1); min-height:0}
.herobox .slides{position:absolute; inset:0; height:auto; grid-template-rows:100%; overflow-y:hidden} /* slide không góp vào chiều cao hàng: cao đúng bằng khung tìm kiếm */
.herobox .slide img{object-fit:fill} /* khách yêu cầu: banner cao bằng khung tìm kiếm, ảnh co giãn cho vừa */
.herobox .slide{aspect-ratio:auto; height:100%; position:relative}
.herobox .slide picture{display:block; height:100%}
.herobox .cap{position:absolute; left:0; right:0; bottom:0; padding:34px 120px 14px 18px; color:#fff; font-weight:700; font-size:1.06rem;
  line-height:1.35; background:linear-gradient(transparent,rgb(8 14 22/.78)); text-shadow:0 1px 2px rgb(0 0 0/.4)}
.herobox .dots{left:auto; right:16px; bottom:18px}
.searchcard.vert{border:0; border-radius:var(--r-m); box-shadow:var(--e-1); padding:18px 18px 20px; align-self:stretch}
.side-title{font-size:1.12rem; font-weight:700; margin-bottom:14px; padding-bottom:10px; position:relative; color:var(--brand)}
.side-title::after{content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:3px; background:var(--accent)}
.vert .searchrow{grid-template-columns:minmax(0,1fr); gap:6px}
.vert .searchrow .wide,.vert .searchrow .act{grid-column:auto}
.vert .field label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.vert .field select,.vert .field input{height:36px; padding:0 10px; font-size:.86rem; background-color:var(--bg)}
.vert .btn-tall{height:42px; margin-top:4px}
.searchcard.vert{padding:14px 16px 16px}
.vert .side-title{margin-bottom:10px; padding-bottom:8px; font-size:1.05rem}
:root[data-theme="dark"] .side-title{color:var(--text)}

/* chi tiet tin */
.dpage{padding-block:18px 8px}
.dpage .crumb{color:var(--muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600; font-size:.74rem; margin-bottom:16px}
.dpage .crumb a:hover{color:var(--accent-strong)}
.dpage .crumb [aria-current]{color:var(--text)}
.dgrid{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:32px; align-items:start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); padding:24px; box-shadow:var(--e-1)}
.dgrid > *{min-width:0}
.pgal-main{display:block; width:100%; aspect-ratio:16/10; border-radius:var(--r-s); overflow:hidden; position:relative; background:var(--surface-2); padding:0}
.pgal-main img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.pgal-main:hover img{transform:scale(1.03)}
.pgal-count{position:absolute; right:10px; top:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:rgb(10 16 26/.62); color:#fff; font-size:.78rem; font-weight:700}
.pgal-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.pgal-thumbs button{flex:none; width:96px; aspect-ratio:4/3; border-radius:6px; overflow:hidden; border:2px solid transparent; padding:0;
  opacity:.72; transition:opacity .15s ease,border-color .15s ease}
.pgal-thumbs button:hover{opacity:1}
.pgal-thumbs button[aria-current="true"]{border-color:var(--accent); opacity:1}
.pgal-thumbs img{width:100%; height:100%; object-fit:cover}
.dbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 12px; padding-top:14px; border-top:1px solid var(--line)}
.dbar h2{font-size:1.02rem; display:flex; align-items:center; gap:8px; color:var(--brand)}
.dbar h2 .ic{color:var(--price)}
.dleft .mapbox{aspect-ratio:4/3}
.dleft .pvideo{margin-top:16px}
.dleft .inquiry{margin-top:20px; box-shadow:none}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.dtitle{font-size:clamp(1.25rem,1.05rem+.9vw,1.62rem); line-height:1.3; font-weight:800; color:var(--brand); padding-bottom:12px; margin-bottom:4px;
  border-bottom:2px solid var(--line)}
.dinfo{width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:18px}
.dinfo th{width:38%; text-align:left; font-weight:500; color:var(--muted); padding:9px 14px 9px 0; vertical-align:top; border-bottom:1px dashed var(--line)}
.dinfo td{padding:9px 0; font-weight:600; border-bottom:1px dashed var(--line); overflow-wrap:anywhere}
.dinfo .red{color:var(--price)}
.dprice b{font-size:1.35rem; color:var(--price); font-weight:800}
.dprice small{color:var(--muted); font-weight:600; font-size:.84rem}
.ddesc{font-size:.92rem}
.dnote{font-size:.84rem; color:var(--muted); background:var(--bg); border-left:3px solid var(--accent); padding:10px 14px; border-radius:0 6px 6px 0;
  display:flex; gap:8px; align-items:flex-start; margin:16px 0 0}
.dnote .ic{margin-top:3px; color:var(--accent-strong)}
.dcontact h2{font-size:1.08rem; color:var(--brand); margin:22px 0 6px; padding-bottom:9px; position:relative; border-bottom:2px solid var(--line)}
.dcontact h2::after{content:""; position:absolute; left:0; bottom:-2px; width:48px; height:2px; background:var(--accent)}
.dcontact p{font-size:.88rem; color:var(--muted); margin:0 0 10px}
.agent{display:flex; gap:16px; align-items:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-s); padding:14px}
.agent img{width:96px; height:112px; object-fit:cover; border-radius:6px; flex:none}
.agent h3{font-size:1rem}
.agent .role{font-size:.82rem; color:var(--muted)}
.agent ul{list-style:none; margin:8px 0 0; padding:0; font-size:.88rem}
.agent li{padding:2px 0}
.agent li a{color:var(--accent-strong); font-weight:600}
/* Thẻ tư vấn viên trong khối nền tối: khôi phục kiểu kính mờ (quy tắc .agent của trang chi tiết ở trên làm nền sáng, chữ trắng bị chìm) */
.consult .agent{align-items:center; background:rgb(255 255 255/.1); border:1px solid rgb(255 255 255/.18); border-radius:var(--r-m); padding:16px; color:#fff}
.consult .agent img{width:84px; height:84px; border-radius:50%}
.consult .agent h3{color:#fff; font-size:1.05rem}
.consult .agent .role{color:rgb(255 255 255/.78); font-size:.74rem}
.dacts{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.dacts .fav-btn[aria-pressed="true"]{background:var(--accent)}
:root[data-theme="dark"] .dtitle,:root[data-theme="dark"] .dbar h2,:root[data-theme="dark"] .dcontact h2{color:var(--text)}
.dmore{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; margin-top:34px}
.dmore > *{min-width:0}
.dmore .section-head{margin-bottom:18px}
.dmore .section-head h2{font-size:1.35rem}
.provbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--e-1); position:sticky; top:68px}
.provbox h2{background:var(--brand); color:#fff; font-size:.92rem; padding:13px 16px; text-transform:uppercase; letter-spacing:.02em}
.provbox nav{display:flex; flex-direction:column; max-height:70vh; overflow:auto}
.provbox nav a{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 16px; font-size:.87rem; border-top:1px solid var(--line)}
.provbox nav a:first-child{border-top:0}
.provbox nav a .ic{width:.8em; height:.8em; opacity:.45}
.provbox nav a:hover{background:var(--accent-tint); color:var(--accent-strong)}
.dtop{margin-top:34px}
.side{top:68px}

@media (max-width:1340px){
  .topbar .hot{display:inline-flex}
  .navbox .mainnav{top:100%; border-radius:0 0 var(--r-s) var(--r-s)}
  .navbox .mainnav > * > a{border-right:0; padding:11px 10px; height:auto}
  .nav-fav .t{display:none}
  .navbox .navtoggle{margin-left:0; border-radius:0; background:none; padding:0 16px}
  .navbox .navtoggle:hover{background:rgb(255 255 255/.08)}
}
@media (max-width:980px){
  .herobox{grid-template-columns:minmax(0,1fr)}
  .herobox .slides{position:static; height:auto; grid-template-rows:auto}
  .herobox .slide{aspect-ratio:2/1; height:auto}
  .vert .searchrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vert .searchrow .wide,.vert .searchrow .act{grid-column:1/-1}
  .dmore{grid-template-columns:minmax(0,1fr)}
  .dgrid{display:flex; flex-direction:column; gap:0}
  .dleft{display:contents}
  .pgal{order:1; margin-bottom:20px}
  .dright{order:2}
  .dbar,.dleft .mapbox,.dleft .pvideo,.dleft .inquiry{order:3}
  .provbox{position:static}
}
@media (max-width:640px){
  .topbar .wrap{min-height:36px}
  .flags img{width:22px; height:22px}
  .site-header .wrap{min-height:70px}
  .site-header .logo img{height:42px}
  .hsocial{display:none}
  .hline span{display:none}
  .hline b{font-size:1.05rem}
  .hero .wrap{padding:0}
  .navbar .wrap{padding-inline:0}
  .navbox{border-radius:0}
  .herobox{padding:12px; border-radius:0}
  .herobox .slider{border-width:3px}
  .herobox .slide{aspect-ratio:2/1}
  .herobox .cap{font-size:.86rem; padding:24px 70px 10px 12px}
  .vert .searchrow{grid-template-columns:minmax(0,1fr)}
  .dgrid{padding:16px; gap:22px}
  .frow{grid-template-columns:1fr}
  .dinfo th{width:42%}
  .agent img{width:76px; height:90px}
}
/* ---------- 20. Rieng chothuexuong.vn: logo chu, o loai BDS, luoi khu cong nghiep, chi tiet tin, so do web ---------- */
.wordmark{display:inline-flex; flex-wrap:wrap; align-items:baseline; column-gap:1px; color:#fff; line-height:1.1}
.wordmark b{font-size:1.65rem; font-weight:800; letter-spacing:.02em}
.wordmark i{font-style:normal; font-weight:700; font-size:1.1rem; color:var(--accent-strong); filter:brightness(1.6)}
.wordmark small{flex-basis:100%; font-size:.8rem; font-weight:500; font-style:italic; color:rgb(255 255 255/.72); margin-top:4px}
.site-footer .wordmark{margin-bottom:12px}
.site-footer .wordmark b{font-size:1.35rem}

.types-sec{padding-block:28px}
.typegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.typecard{position:relative; display:flex; flex-direction:column; border-radius:var(--r-m); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--e-1); transition:transform .15s ease,box-shadow .15s ease}
.typecard img{width:100%; aspect-ratio:16/10; object-fit:cover; display:block}
.typecard span{padding:10px 12px; font-weight:700; font-size:.88rem; line-height:1.3}
.typecard:hover{transform:translateY(-2px); box-shadow:var(--e-2)}
.typecard:hover span{color:var(--accent-strong)}
.typecard.is-cta{justify-content:center; align-items:center; gap:10px; text-align:center; background:var(--accent); color:var(--on-accent); border-color:var(--accent); min-height:120px}
.typecard.is-cta .ic{width:30px; height:30px}
.typecard.is-cta:hover span{color:var(--on-accent)}
.section-head .muted{color:var(--muted); font-size:.9rem}

.kcngrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:24px}
.kcncard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--e-1); transition:transform .15s ease,box-shadow .15s ease}
.kcncard img{width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--surface-2)}
.kcncard span{padding:12px 14px; font-weight:700; font-size:.92rem; line-height:1.35}
.kcncard:hover{transform:translateY(-3px); box-shadow:var(--e-2)}
.kcncard:hover span{color:var(--accent-strong)}
.kcn-intro{margin-bottom:26px}
.cat-kids{margin:0 0 20px}
.cat-kids + .toolbar{margin-top:0} /* hàng link chuyên mục đứng trên ô lọc: không cho ô lọc trồi lên đè */
.chip small{color:var(--muted); font-weight:500}
.hometop{margin-top:28px}
.hometop .link-more{display:inline-flex; margin-top:10px}

.dprice-line{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; margin:4px 0 14px;
  padding:12px 16px; border-radius:var(--r-s); background:var(--brand-tint)}
.dviews{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted)}
.dhead{font-size:1rem; color:var(--brand); text-transform:uppercase; letter-spacing:.02em; margin:18px 0 6px; padding-bottom:8px; border-bottom:2px solid var(--line); position:relative}
.dhead::after{content:""; position:absolute; left:0; bottom:-2px; width:48px; height:2px; background:var(--accent)}
.dcontact-list{list-style:none; margin:0; padding:0; font-size:.9rem}
.dcontact-list li{padding:6px 0; border-bottom:1px dashed var(--line)}
.dcontact-list span{color:var(--muted); margin-right:4px}
.dcontact-list a{font-weight:700; color:var(--price)}
div.pvideo{aspect-ratio:16/9; overflow:hidden; margin-bottom:20px}
div.pvideo iframe{width:100%; height:100%; border:0}
:root[data-theme="dark"] .dhead{color:var(--text)}

.contact-card ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.contact-card li{display:flex; gap:10px; align-items:flex-start}
.contact-card .ic{color:var(--accent); flex:none; margin-top:3px}
.sitemap-tree ul{list-style:none; margin:0; padding-left:0; display:block; columns:auto}
.sitemap-tree li{display:block; padding-left:0}
.sitemap-tree li::before{content:none}
.sitemap-tree > ul{columns:2 280px; column-gap:40px}
.sitemap-tree > ul > li{break-inside:avoid; margin-bottom:14px}
.sitemap-tree > ul > li > a{font-weight:800; color:var(--brand)}
.sitemap-tree ul ul{padding-left:16px; border-left:2px solid var(--line); margin-top:6px}
.sitemap-tree ul ul li{padding:3px 0; font-size:.9rem}
.sitemap-tree a:hover{color:var(--accent-strong)}
@media (max-width:640px){
  .wordmark b{font-size:1.25rem}
  .wordmark small{display:none}
  .typegrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
}