/* tamnhathat.com – bản bố cục OneHousing, màu Tâm Nhà Thật (đen–đỏ). Token: xem gen/TNT-DESIGN.md */
:root{
  --red:#D0122F;--red2:#A80D25;--red-50:#FDF0F2;--red-100:#FADCE1;
  --ink:#14110F;--ink2:#3D3836;--mute:#6E6764;--line:#E8E4E2;--line2:#F1EEEC;
  --bg:#FFFFFF;--soft:#FBF7F6;--gold:#D9A537;--ok:#13804A;--ok-50:#EAF6EF;--warn:#8A4D00;--warn-50:#FFF4E5;
  --f:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:6px;--r:10px;--r-lg:16px;--r-xl:20px;
  --sh:0 1px 2px rgba(20,17,15,.06),0 4px 16px rgba(20,17,15,.06);--sh2:0 10px 30px rgba(20,17,15,.12);
  --wmax:1180px;color-scheme:light
}
*{box-sizing:border-box}
html{scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.w{max-width:var(--wmax);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid rgba(208,18,47,.4);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* nút */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:var(--r-sm);padding:12px 20px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;line-height:1.2}
.btn:active{transform:scale(.98)}
.btn.sm{padding:9px 14px;font-size:14px}
.bp{background:var(--red);color:#fff}.bp:hover{background:var(--red2)}
.bd{background:var(--ink);color:#fff}.bd:hover{background:#000}
.bo{background:#fff;color:var(--red);border-color:var(--red)}.bo:hover{background:var(--red-50)}
.btn:disabled{opacity:.6;cursor:wait}
.hot{font-style:normal;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:4px;padding:2px 5px;margin-left:4px;vertical-align:2px;letter-spacing:.02em}

/* đầu trang */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line2);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.hd-in{display:flex;align-items:center;gap:28px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:28px;height:auto}
.logo b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.logo small{display:block;font-size:10.5px;color:var(--mute);font-weight:600}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink2)}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a.on{color:var(--red)}
.hd-zl{margin-left:auto}
.hd-menu{display:none;margin-left:8px;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.hd-menu span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;flex-direction:column;padding:8px 16px 16px;border-bottom:1px solid var(--line);box-shadow:var(--sh2);margin:0}
  .nav.open{display:flex}.nav a{padding:14px 8px;border-bottom:1px solid var(--line2);font-size:16px}
  .hd-menu{display:flex}.hd-in{gap:12px}
}
@media (max-width:420px){.hd-zl{padding:8px 10px;font-size:13px}.logo small{display:none}}

/* hero */
.hero{background:linear-gradient(180deg,#FDECEE 0%,#FFF5F6 62%,#fff 62%);padding-top:44px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:700;line-height:1.16;letter-spacing:-.025em}
.hero-l{margin-top:14px;color:var(--ink2);font-size:17px;max-width:46ch}
.hero-s{margin-top:26px;display:flex;align-items:baseline;gap:10px}
.hero-s b{font-size:30px;font-weight:800;color:var(--red);letter-spacing:-.02em}
.hero-s span{color:var(--mute);font-size:15px;font-weight:600}
.hero-p{position:relative;height:330px}
.hero-p img{position:absolute;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh2)}
.hp1{right:24%;top:30px;width:50%;height:76%;object-position:62% 40%}
.hp2{right:6%;bottom:0;width:56%;height:100%;object-fit:cover;object-position:top center;background:#F4E4E6}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.hero-p{display:none}.hero{padding-top:28px}}
.sbox{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh2);margin-top:34px;position:relative}
.stabs{display:flex;gap:4px;padding:6px 10px 0;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.stabs button{border:0;background:none;padding:14px 14px 12px;font-weight:700;font-size:15px;color:var(--mute);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.stabs button[aria-selected="true"]{color:var(--red);border-bottom-color:var(--red)}
.spanel{padding:18px}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;gap:10px;align-items:stretch}
#a-ky.sgrid{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.sf{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;background:#fff;min-width:0;cursor:pointer}
.sf:focus-within{border-color:var(--ink)}
.sf>span{font-size:12px;color:var(--mute);font-weight:600}
.sf select,.sf input{border:0;outline:0;background:transparent;font-weight:700;font-size:15px;padding:2px 0;min-width:0;width:100%}
.sck{grid-auto-flow:column;align-items:center;justify-content:start;gap:8px;white-space:nowrap}
.sck input{width:18px;height:18px;accent-color:var(--red);margin:0}.sck span{font-size:14px!important;color:var(--ink)!important;font-weight:700!important}
.sgo{min-height:52px}
.scode{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.scode span{font-size:14px;color:var(--mute);font-weight:600}
.scode input{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-weight:700;letter-spacing:.06em;width:150px;outline:0}
.scode input:focus{border-color:var(--ink)}
.shint{font-size:13.5px;color:var(--mute);margin-top:10px}
@media (max-width:980px){.sgrid,#a-ky.sgrid{grid-template-columns:1fr 1fr}.sgo{grid-column:1/-1}}
@media (max-width:420px){.spanel{padding:14px}}

/* AI */
.ai{display:grid;gap:10px}
.ai-in{display:flex;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:6px}
.ai-in:focus-within{border-color:var(--ink)}
.ai-in textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;font-size:16px;line-height:1.45;padding:8px 10px}
.ai-ex{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.ai-ex span{color:var(--mute)}
.ai-ex button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer}
.ai-ex button:hover{border-color:var(--red);color:var(--red)}
.aiout{display:grid;gap:10px;margin:0 0 16px;padding:16px;border-radius:var(--r);background:var(--red-50)}
.aiout .msg{display:flex;gap:10px;align-items:flex-start}
.aiout .msg i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center}
.aiout .nx{display:flex;flex-wrap:wrap;gap:6px;padding-left:38px}
.aiout .nx button{border:1px solid var(--red-100);background:#fff;color:var(--red2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer}
.aiout .meta{padding-left:38px;font-size:12.5px;color:var(--mute)}
.aiout .clear{border:0;background:none;color:var(--mute);text-decoration:underline;cursor:pointer;font-size:12.5px;padding:0}
.dots::after{content:"";animation:dt 1.2s steps(4) infinite}@keyframes dt{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.why{font-size:13.5px;color:var(--red2);background:var(--red-50);border-radius:var(--r-sm);padding:8px 10px;line-height:1.45;margin-top:10px}

/* kết quả + thẻ căn */
.res{padding-top:36px}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.rhead h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.rhead select{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;background:#fff;font-weight:600;font-size:14px}
.msgx{padding:12px 14px;border-radius:var(--r);background:var(--soft);color:var(--ink2);font-size:14.5px;margin-bottom:14px}
.msgx a{color:var(--red);font-weight:700}
.loading{padding:28px 4px;color:var(--mute)}
.empty{padding:32px 18px;text-align:center;color:var(--mute);border:1.5px dashed var(--line);border-radius:var(--r-lg);grid-column:1/-1}
.empty a{color:var(--red);font-weight:700}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1060px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cgrid,.cgrid.c3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:480px){.cgrid,.cgrid.c3{grid-template-columns:1fr}}
.more{display:flex;margin:22px auto 0}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;min-width:0}
.card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.cph{position:relative;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.cph img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.cph .area-ph{filter:saturate(.85) brightness(.92)}
.cph .tagd{position:absolute;left:10px;top:10px;background:var(--red);color:#fff;font-size:12px;font-weight:800;border-radius:4px;padding:4px 8px}
.cph .code{position:absolute;right:10px;top:10px;background:rgba(20,17,15,.78);color:#fff;font-size:12px;font-weight:700;border-radius:4px;padding:4px 8px;letter-spacing:.04em}
.cph .phn{position:absolute;left:10px;bottom:8px;color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cbd{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.cpr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cpr b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cpr small{font-size:13px;color:var(--mute);font-weight:600}
.cic{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--ink2)}
.cic span{display:inline-flex;align-items:center;gap:5px}.cic svg{color:var(--mute);flex:none}
.cloc{display:flex;gap:6px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.cloc svg{flex:none;color:var(--red);margin-top:2px}
.cdr{font-size:12.5px;color:var(--ok);font-weight:700;background:var(--ok-50);border-radius:4px;padding:3px 8px;align-self:flex-start}

/* khối căn giảm giá (nền đỏ) */
.drops{margin-top:44px;background:var(--red);color:#fff;border-radius:var(--r-xl);padding:32px;position:relative;overflow:hidden}
.drops::before{content:"";position:absolute;right:-80px;top:-120px;width:420px;height:520px;background:var(--red2);transform:rotate(28deg);opacity:.55}
.drops::after{content:"";position:absolute;right:120px;top:-160px;width:120px;height:620px;background:#B50F28;transform:rotate(28deg);opacity:.6}
.drops>*{position:relative;z-index:1}
.drops-h{display:flex;justify-content:space-between;align-items:end;gap:16px 40px;flex-wrap:wrap}
.drops-h h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.drops-h p{max-width:46ch;color:#FFE1E5;font-size:15px}
.dtabs{display:flex;gap:8px;margin:22px 0 20px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dtabs button{border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.dtabs button[aria-selected="true"]{background:#fff;color:var(--red);border-color:#fff}
.drops .card{border:0}
.drops .loading{color:#FFE1E5}
.drops .more-card{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px;background:#fff;color:var(--ink);border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;text-align:left;font:inherit}
.drops .more-card small{color:var(--mute);font-weight:600}.drops .more-card b{font-size:20px}
@media (max-width:600px){.drops{padding:22px 16px;border-radius:var(--r-lg)}}

/* tiêu đề khối */
.sec{padding-top:56px}
.sh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.sh h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em}
.sh-a{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap}

/* khu vực */
.areas{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px 190px;gap:14px}
.ar{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;display:block}
.ar img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ar:hover img{transform:scale(1.04)}
.ar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.65))}
.ar span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1}
.ar b{display:block;font-size:19px;font-weight:700}.ar small{font-size:13px;opacity:.92}
.ar-big{grid-row:1/3}.ar-big b{font-size:24px}
.areas .ar:nth-child(2){grid-column:2/4}.areas .ar:nth-child(6){grid-column:2/4}
@media (max-width:760px){.areas{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:150px}.ar-big{grid-column:1/-1;grid-row:auto}.areas .ar:nth-child(2),.areas .ar:nth-child(6){grid-column:auto}.areas .ar:nth-child(6){grid-column:1/-1}}

/* tiện ích */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tools a{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.tools a:hover{border-color:var(--ink);box-shadow:var(--sh)}
.tools i{font-style:normal;font-size:26px;width:48px;height:48px;border-radius:var(--r);background:var(--red-50);display:grid;place-items:center;flex:none}
.tools b{display:block;font-size:16px;margin-bottom:2px}.tools small{color:var(--mute);font-size:13.5px;line-height:1.45;display:block}
@media (max-width:980px){.tools{grid-template-columns:1fr 1fr}}@media (max-width:520px){.tools{grid-template-columns:1fr}}

/* báo chí */
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;background:#fff;transition:box-shadow .2s}
a.pc:hover{box-shadow:var(--sh2)}
.pc img{aspect-ratio:16/10;object-fit:cover;width:100%}
.pc-v{position:relative;display:block}.pc-v i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(208,18,47,.92);color:#fff;display:grid;place-items:center}
.pc>span:last-child,.pc-ch>span{padding:16px;display:flex;flex-direction:column;gap:6px}
.pc small{color:var(--mute);font-weight:600;font-size:13px}.pc b{font-size:17px;line-height:1.35}
.pc em{font-style:normal;color:var(--red);font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center;margin-top:auto}
.pc-ch{background:var(--ink);color:#fff;justify-content:space-between;border:0}.pc-ch small{color:#B9B0AC}
.chan{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 18px}
.chan a{border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 16px;font-weight:700;text-decoration:none;font-size:14px}
.chan a:hover{background:#fff;color:var(--ink)}
@media (max-width:860px){.news{grid-template-columns:1fr}}

/* kiến thức */
.kbm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kbc{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;transition:box-shadow .2s,border-color .2s}
.kbc:hover{box-shadow:var(--sh);border-color:var(--ink)}
.kbc i{font-style:normal;color:var(--red);font-weight:800;font-size:13px}.kbc b{font-size:17px;line-height:1.35}.kbc span{color:var(--mute);font-size:14.5px}
@media (max-width:860px){.kbm{grid-template-columns:1fr}}
.kb-list{border-top:1px solid var(--line)}
.kb-i{border-bottom:1px solid var(--line)}
.kb-i summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:2px 14px;padding:18px 4px;align-items:baseline}
.kb-i summary::-webkit-details-marker{display:none}
.kb-i summary::after{content:"+";grid-column:3;grid-row:1;font-size:22px;font-weight:700;color:var(--red);line-height:1;text-align:right}
.kb-i[open] summary::after{content:"–"}
.kb-n{grid-row:1/3;font-size:14px;font-weight:800;color:var(--red)}
.kb-i summary b{font-size:18px;font-weight:700}
.kb-i summary em{grid-column:2/4;font-style:normal;font-size:15px;color:var(--mute)}
.kb-b{padding:0 4px 20px 58px;display:grid;gap:10px;color:var(--ink2);max-width:76ch}
.kb-ft{font-size:13px;color:var(--mute);margin-top:14px}
@media (max-width:520px){.kb-i summary{grid-template-columns:30px minmax(0,1fr) 20px}.kb-b{padding-left:4px}}

/* gửi mã Zalo */
.zg{background:var(--ink);color:#fff;margin-top:64px}
.zg-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:52px}
@media (max-width:860px){.zg-in{grid-template-columns:1fr;gap:26px;padding-block:40px}}
.zg h2{font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.zg-st{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;counter-reset:z}
.zg-st li{counter-increment:z;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 12px}
.zg-st li::before{content:counter(z);grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}
.zg-st b{font-size:16px}.zg-st span{font-size:14.5px;color:#C9C0BC}
.zg-st code{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 6px;font-weight:700;color:#fff;font-family:inherit}
.zg-f{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:22px;display:grid;gap:10px}
.zg-f label{font-size:13px;font-weight:700;color:var(--ink2)}
.zg-f input{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;font-weight:800;font-size:22px;letter-spacing:.06em;outline:0;min-width:0}
.zg-f input:focus{border-color:var(--ink)}
.zg-pv{background:var(--soft);border-radius:var(--r-sm);padding:11px 13px;font-size:14.5px;color:var(--ink2)}
.zg-er{color:var(--red);font-size:14px;margin:0}

/* trang con */
.phero{background:linear-gradient(180deg,#FDECEE,#FFF8F8);padding:28px 0 34px}
.phero h1{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.18;margin-top:8px}
.phero p{color:var(--ink2);max-width:62ch;margin-top:10px}
.phero p.crumb{margin:0;font-size:14px;color:var(--mute)}.crumb a{color:var(--ink2);text-decoration:none;font-weight:600}.crumb a:hover{color:var(--red)}
.vh-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:end}
.vh-in img{max-width:300px;justify-self:end;border-radius:var(--r-lg);background:#F4E4E6}
@media (max-width:760px){.vh-in{grid-template-columns:1fr}.vh-in img{max-width:200px;justify-self:start}}
.dtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 30px;align-items:end;margin-top:10px}
.dtop .cd{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;background:var(--ink);color:#fff;border-radius:4px;padding:4px 10px}
.dtop h1{margin-top:12px}.dtop .sub{color:var(--mute);margin-top:6px;font-weight:600}
.pz{text-align:right}.pz b{display:block;font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--red);letter-spacing:-.02em;line-height:1}
.pz span{color:var(--mute);font-size:14px;font-weight:600}
@media (max-width:700px){.dtop{grid-template-columns:1fr}.pz{text-align:left}}
.dph{margin-top:22px;border-radius:var(--r-lg);overflow:hidden;max-height:420px;background:var(--soft)}
.dph img{width:100%;max-height:420px;object-fit:cover}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding-block:36px 48px;align-items:start}
@media (max-width:960px){.dgrid{grid-template-columns:1fr;gap:28px}}
.lbl{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.gonebox{margin-bottom:20px;padding:14px 16px;border-radius:var(--r);background:var(--warn-50);color:var(--warn)}
.spec-t{width:100%;border-collapse:collapse;font-size:15.5px;border-top:2px solid var(--ink)}
.spec-t th,.spec-t td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-t th{width:36%;font-weight:600;color:var(--mute);padding-right:14px}
.spec-t small{display:block;font-size:13px;color:var(--mute)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.note{border-radius:var(--r);padding:18px;background:var(--soft)}
.note.good{background:var(--ok-50)}.note.bad{background:var(--warn-50)}
.note h3{font-size:15.5px;font-weight:800;margin-bottom:6px}.note p{font-size:15px;color:var(--ink2)}
@media (max-width:760px){.notes{grid-template-columns:1fr}}
.auto{font-size:13px;color:var(--mute);margin-top:10px}
.mb{margin-top:28px;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.mb .row2{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline}
.mb b{font-size:22px;font-weight:800}
.tag{font-size:13.5px;font-weight:800;border-radius:4px;padding:5px 10px}.tag.lo{background:var(--ok-50);color:var(--ok)}
.side{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:14px;box-shadow:var(--sh)}
.side .who{display:flex;gap:12px;align-items:center}
.side .who img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;background:var(--red-50)}
.side .who b{display:block;font-size:17px}.side .who span{font-size:13px;color:var(--mute)}
.side p{font-size:15px;color:var(--ink2)}.side p b{color:var(--red)}
.side .zl{padding:14px;font-size:16px}
.side .ph{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:var(--r-sm);padding:11px 14px}
.side .ph b{font-size:19px;user-select:all}
.side .ph button{border:0;background:none;color:var(--red);font-weight:700;cursor:pointer}
@media (max-width:960px){.side{position:static}}
.dsim{padding-bottom:56px}
.dsim .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.dsim .head h2{font-size:24px;font-weight:700}.dsim .head a{color:var(--red);font-weight:700;text-decoration:none}
.mbar{display:none}
@media (max-width:960px){.mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.mbar .zl{flex:1;padding:13px}.mbar button{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:0 16px;font-weight:700}.has-mbar .fab{display:none}.has-mbar .foot{padding-bottom:80px}}

/* form */
.fwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;padding-block:44px 64px;align-items:start}
@media (max-width:900px){.fwrap{grid-template-columns:1fr;gap:28px;padding-block:28px 48px}}
.pts{display:grid;border-top:2px solid var(--ink)}
.pts div{padding:16px 0;border-bottom:1px solid var(--line)}
.pts b{display:block;font-size:17px;font-weight:700}.pts span{font-size:15px;color:var(--ink2)}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:14px;box-shadow:var(--sh)}
.fcard h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.fcard .hint{font-size:14px;color:var(--mute);margin-top:-8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:520px){.g2{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;min-width:0}.fld>span{font-size:13px;font-weight:700;color:var(--ink2)}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:11px 13px;font-size:16px;outline:0}
.fld textarea{min-height:96px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink)}
.fld .er{display:none;font-size:13px;color:var(--red);font-style:normal}.fld.bad .er{display:block}.fld.bad input,.fld.bad select{border-color:var(--red)}
.seg2{display:flex;gap:6px;flex-wrap:wrap}
.seg2 button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.send{padding:15px;font-size:16px}
.done{display:none;text-align:center;padding:24px 8px}.done b{display:block;font-size:24px;margin-bottom:6px}
.fcard.sent form{display:none}.fcard.sent .done{display:block}
.fmsg{font-size:14px;color:var(--red);margin:0;min-height:1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.story{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;margin-top:26px}
.story img{width:120px;height:150px;object-fit:cover;border-radius:var(--r)}
.story b{display:block;font-size:17px;margin-bottom:4px}.story p{font-size:15px;color:var(--ink2)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,380px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.strip figure{margin:0;scroll-snap-align:start}.strip img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--r)}
.strip figcaption{font-size:14px;color:var(--mute);margin-top:8px}
[data-view="lam-cung-tam"] .sec,[data-view="ve-tam"] .sec{padding-block:44px 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.head h2{font-size:clamp(22px,2.6vw,28px);font-weight:700}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.facts div{padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}.facts div+div{padding-left:22px;border-left:1px solid var(--line)}
.facts b{display:block;font-size:26px;font-weight:800;margin-bottom:4px}.facts span{font-size:15px;color:var(--ink2)}
@media (max-width:760px){.facts{grid-template-columns:1fr}.facts div+div{padding-left:0;border-left:0}}
section.press{background:var(--ink);color:#fff;padding-block:64px;margin-top:44px}
section.press .w{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
section.press q{display:block;font-size:clamp(24px,3.4vw,40px);font-weight:700;line-height:1.2;quotes:"“" "”"}
section.press .by{margin-top:18px;color:#C9C0BC}section.press .by a{color:#fff}
section.press img{border-radius:var(--r-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:820px){section.press .w{grid-template-columns:1fr}}
.momq{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.25;max-width:24ch}
.momq small{display:block;font-size:15px;font-weight:500;color:var(--mute);margin-top:10px}

/* chân trang + nút nổi */
.foot{background:var(--soft);border-top:1px solid var(--line);margin-top:0;font-size:14.5px;color:var(--ink2)}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;padding-block:40px 24px}
.foot-in>div{display:flex;flex-direction:column;gap:8px}.foot-in a{text-decoration:none}.foot-in a:hover{color:var(--red)}
.foot-in b{color:var(--ink);font-size:15px}.foot-ph{font-size:20px;font-weight:800;color:var(--ink)}
.foot-b{display:flex;flex-direction:column;gap:6px;padding-block:16px 28px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.credit{font-size:11.5px}
@media (max-width:760px){.foot-in{grid-template-columns:1fr 1fr}.foot-in>div:first-child{grid-column:1/-1}}
.fab{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;text-decoration:none;font-size:12px;font-weight:700;box-shadow:var(--sh2);color:var(--ink)}
.fab svg{color:var(--red)}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1}

.pc-me img{object-fit:contain;object-position:bottom center;background:var(--red-50)}
.pc img{object-position:center 30%}
.news .pc:first-child img{object-position:35% 80%}
.pc-me i{left:auto;right:16px;top:auto;bottom:16px;transform:none;width:48px;height:48px}

/* thẻ căn thả nội dung */
.card.on{box-shadow:0 0 0 2px var(--ink);transform:none}
.cx{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.23,1,.32,1)}
.cx.open{grid-template-rows:1fr}
.cx-in{overflow:hidden;min-height:0}
.cx-w{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .45s cubic-bezier(.23,1,.32,1)}
.cx.open .cx-w{opacity:1;transform:none}
.cx-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cx-h b{display:block;font-size:18px;font-weight:700;line-height:1.35;margin-top:4px}
.cx-c{font-size:13px;font-weight:700;color:var(--mute);letter-spacing:.02em}
.cx-x{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.cx-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cx-x:hover{border-color:var(--ink)}
.cx-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 32px;margin-top:14px}
.cx-pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.cx-pr b{font-size:26px;font-weight:800;letter-spacing:-.02em}.cx-pr small{color:var(--mute);font-size:14px}
.cx-dr{display:inline-block;margin:8px 0 0;font-size:14px;font-weight:700;color:#0F7A3F;background:#EAF7EF;border-radius:6px;padding:4px 10px}
.cx-t{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.cx-t div{border-top:1px solid var(--line2);padding-top:8px;min-width:0}.cx-t dt{font-size:12px;color:var(--mute)}.cx-t dd{margin:2px 0 0;font-weight:600;font-size:15px}
.cx-sm{margin:12px 0 0;font-size:13px;color:var(--mute)}
.cx-r{display:grid;gap:12px;align-content:start}
.cx-r div{background:var(--line2);border-radius:var(--r);padding:12px 14px}.cx-r h4{font-size:13px;font-weight:700;margin:0 0 4px}.cx-r p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.cx-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cx-ld{display:flex;align-items:center;gap:10px;color:var(--mute);margin:16px 0 0}
.cx-ld span{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--red);animation:cxSp .8s linear infinite}
@keyframes cxSp{to{transform:rotate(360deg)}}
.cx-err,.cx-gone{margin:14px 0 0;color:var(--ink2)}
.drops .cx-w{border:0}
@media (max-width:760px){.cx-w{padding:18px 16px}.cx-g{grid-template-columns:1fr}.cx-a .btn{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.cx,.cx-w{transition:none}}

/* bộ lọc chọn từ – đến */
#a-need.sgrid{grid-template-columns:repeat(5,minmax(0,1fr)) auto auto}
.rf{padding:0;cursor:default}
.rf-b{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;width:100%;height:100%;padding:8px 12px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;border-radius:var(--r-sm)}
.rf-b>span{font-size:12px;color:var(--mute);font-weight:600;grid-column:1}
.rf-b>b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1;padding:2px 0}
.rf-ch{flex:none;grid-column:2;grid-row:1/3;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.rf-b[aria-expanded=true] .rf-ch{transform:rotate(180deg)}
.rf.set{border-color:var(--ink)}.rf.set .rf-b>b{color:var(--red)}
.rf-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sck2{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:6px 12px}
.sck2 .sck{display:flex;gap:8px;align-items:center;cursor:pointer}
.sbox{z-index:5}
.rf-pop{position:absolute;z-index:40;width:360px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(20,17,15,.18);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .18s ease-out,transform .22s cubic-bezier(.23,1,.32,1)}
.rf-pop.on{opacity:1;transform:none}
.rf-in{padding:16px 16px 6px;max-height:min(62vh,460px);overflow:auto;overscroll-behavior:contain}
.rf-ttl{font-weight:800;font-size:16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}.rf-ttl small{font-weight:600;font-size:12px;color:var(--mute)}
.rf-io{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.rf-io label{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px}
.rf-io label:focus-within{border-color:var(--ink)}
.rf-io span{font-size:12px;color:var(--mute);font-weight:600}
.rf-io input{border:0;outline:0;font:inherit;font-size:16px;font-weight:700;width:100%;padding:0;min-width:0}
.rf-io i{font-style:normal;color:var(--mute);font-weight:700}
.rf-sl{position:relative;height:36px;margin:12px 10px 0}
.rf-tr{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:2px;background:var(--line)}
.rf-fill{position:absolute;top:0;bottom:0;background:var(--ink);border-radius:2px}
.rf-sl input{position:absolute;left:-10px;right:-10px;width:calc(100% + 20px);top:6px;height:24px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rf-sl input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:grab}
.rf-sl input::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:grab}
.rf-sl input::-webkit-slider-runnable-track{background:none}.rf-sl input::-moz-range-track{background:none}
.rf-sl input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--red);outline-offset:2px}
.rf-mm{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);font-weight:600;margin:2px 0 10px}
.rf-ps{display:grid;border-top:1px solid var(--line2);margin:0 -16px}
.rf-ps button{border:0;background:none;text-align:left;font:inherit;font-size:15px;padding:12px 16px;cursor:pointer;color:var(--ink);transition:background-color .15s ease}
.rf-ps button:hover{background:var(--line2)}.rf-ps button.on{background:var(--red-50);color:var(--red);font-weight:700}
.rf-dl{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin:0 -6px}
.rf-dc{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:var(--r-sm);cursor:pointer;font-size:15px}
.rf-dc:hover{background:var(--line2)}.rf-dc input{width:18px;height:18px;accent-color:var(--red);margin:0;flex:none}
.rf-ft{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--line2)}
.rf-clr{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:0 18px;min-height:46px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.rf-ok{min-height:46px;justify-content:center}
.rf-clr:active,.rf-ok:active{transform:scale(.97)}
@media (max-width:1180px){#a-need.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}#a-need .sgo{grid-column:auto}}
@media (max-width:760px){#a-need.sgrid{grid-template-columns:1fr 1fr}#a-need .sck2{gap:8px}#a-need .sgo{grid-column:1/-1}
  .rf-pop{position:fixed;z-index:1000;left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-width:none;border-radius:20px 20px 0 0;transform:translateY(24px);transform-origin:bottom center}
  .rf-pop.on{transform:none}.rf-in{max-height:62vh}.rf-ft{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.rf-pop,.rf-ch{transition:none}}

/* giá bán màu đỏ */
.cpr b{color:var(--red)}.cx-pr b{color:var(--red)}
