/* Giao dien Vinhomes Global Gate — CSS chinh */

/* He mau: xanh Vinhomes #002A89 (lay tu globalgate.vinhomes.vn) + diem nhan vang dong. */


/* ============ TOKENS ============ */
:root{
  --paper:#EDF1F7;
  --surface:#F8FAFD;
  --surface-2:#DEE6F2;
  --ink:#101C38;
  --ink-2:#3A4A70;
  --muted:#64708C;
  --line:#C9D2E3;
  --line-soft:#DCE3F0;
  --brand:#002A89;
  --brand-2:#001E63;
  --brand-soft:#E6EFFF;
  --brass:#A9781F;
  --brass-2:#C29338;
  --brass-soft:#F1E5CB;
  --shadow:0 1px 2px rgba(16,28,56,.05),0 12px 32px -18px rgba(16,28,56,.28);
  --maxw:1180px;
  --pad:clamp(18px,4vw,52px);
  --r:2px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#080E1C;
    --surface:#101C38;
    --surface-2:#18264A;
    --ink:#E7ECF7;
    --ink-2:#B6C2DC;
    --muted:#8C97B3;
    --line:#28365A;
    --line-soft:#1E2C4C;
    --brand:#7BAEE1;
    --brand-2:#B0CDFF;
    --brand-soft:#13223F;
    --brass:#D6A458;
    --brass-2:#E6BE7D;
    --brass-soft:#2B2314;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#080E1C;
  --surface:#101C38;
  --surface-2:#18264A;
  --ink:#E7ECF7;
  --ink-2:#B6C2DC;
  --muted:#8C97B3;
  --line:#28365A;
  --line-soft:#1E2C4C;
  --brand:#7BAEE1;
  --brand-2:#B0CDFF;
  --brand-soft:#13223F;
  --brass:#D6A458;
  --brass-2:#E6BE7D;
  --brass-soft:#2B2314;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--r)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ============ TYPE ROLES ============ */
.display{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.015em;
}
.display em{font-style:italic;font-weight:400;color:var(--brand)}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);line-height:1.4;
}
.kicker{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)
}
.lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--ink-2);line-height:1.75;max-width:62ch}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============ LAYOUT ============ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px,8vw,104px);position:relative}
.sec--tint{background:var(--surface)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec__head{display:flex;flex-direction:column;gap:14px;max-width:66ch;margin-bottom:clamp(32px,4.5vw,52px)}
.sec__title{font-size:clamp(30px,4.6vw,52px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ornament: vòng thành Cổ Loa */
.rings{position:absolute;inset:auto;pointer-events:none;color:var(--brand);opacity:.16}


/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,3vw,34px);min-height:68px}
/* Co logo anh thi header cao hon mot chut cho logo tho duoc. */
.hdr__in:has(.brand img){min-height:clamp(62px,7vw,84px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand__mark{color:var(--brand);display:block;flex:0 0 auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.brand__txt i{font-family:"Playfair Display",Georgia,serif;font-style:normal;font-size:21px;font-weight:500;letter-spacing:.01em;margin-top:3px}
/* Logo dự án xếp dọc 4 tầng nên cần chiều cao, ép thấp quá là không đọc được
   dòng "VINHOMES GLOBAL GATE" dưới cùng. Muốn logo to/nhỏ hơn thì sửa đúng
   con số 64px ở đây, header tự giãn theo. */
.brand img{height:clamp(46px,5.2vw,64px);width:auto;max-width:200px;display:block}
/* Doi logo theo che do sang/toi.
   Viet tuong minh chu khong dung bien CSS trong thuoc tinh display: neu bien
   khong giai ra duoc thi display roi ve gia tri ke thua, hau qua la hien ca
   hai logo hoac hien nham ban. Viet thang thi khong the sai. */
.brand--2logo .custom-logo{display:block}
.brand--2logo .vgg-logo-toi{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand--2logo .custom-logo{display:none}
  :root:not([data-theme="light"]) .brand--2logo .vgg-logo-toi{display:block}
}
:root[data-theme="dark"] .brand--2logo .custom-logo{display:none}
:root[data-theme="dark"] .brand--2logo .vgg-logo-toi{display:block}
:root[data-theme="light"] .brand--2logo .custom-logo{display:block}
:root[data-theme="light"] .brand--2logo .vgg-logo-toi{display:none}
.nav{display:flex;gap:clamp(10px,1.7vw,24px);margin-left:auto}
.nav a{text-decoration:none;font-size:14px;color:var(--ink-2);padding:6px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--brass);transition:right .3s ease}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.hdr__side{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr__tel{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;text-align:right}
.hdr__tel span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hdr__tel b{font-size:15px;font-weight:600;color:var(--brand)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;cursor:pointer}
.burger svg{display:block}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:.03em;
  border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn--primary{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--brass{background:var(--brass);color:#1A1206;border-color:var(--brass)}
.btn--brass:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn--sm{padding:9px 16px;font-size:13px}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding-block:clamp(44px,6.5vw,84px) 0}
.hero__rings{position:absolute;top:-190px;right:-230px;width:760px;height:760px;color:var(--brand);opacity:.13;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(26px,4vw,60px);align-items:center;position:relative}
.hero__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero__eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--brass);flex:0 0 auto}
.hero h1{font-size:clamp(42px,7.2vw,86px);margin-bottom:24px}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.tag{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:6px 13px;border-radius:100px;font-size:12.5px;color:var(--ink-2);background:var(--surface)
}
.tag b{font-weight:600;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* cổng vòm — hero visual */
.arch{position:relative;aspect-ratio:4/4.6;max-height:600px;margin-inline:auto;width:100%}
.arch__frame{
  position:absolute;inset:0;border-radius:50% 50% 3px 3px/34% 34% 3px 3px;
  overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-2)
}
.arch__frame svg,.arch__frame img{width:100%;height:100%;display:block;object-fit:cover}
.arch__ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:112%;aspect-ratio:1;
  border:1px solid var(--line);border-radius:50%;opacity:.5;pointer-events:none
}
.arch__ring--2{width:126%;opacity:.3}
.slot{
  position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;
  background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--line);
  padding:5px 11px;border-radius:100px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap;backdrop-filter:blur(6px)
}

/* ledger chỉ số */
.ledger{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);margin-top:clamp(40px,6vw,70px)
}
.ledger__i{padding:26px 22px 30px;border-right:1px solid var(--line-soft)}
.ledger__i:last-child{border-right:0}
.ledger__i:first-child{padding-left:0}
.ledger__v{font-family:"Playfair Display",Georgia,serif;font-size:clamp(38px,5vw,58px);font-weight:300;line-height:1;display:flex;align-items:baseline;gap:5px}
.ledger__v span{font-family:"Be Vietnam Pro",sans-serif;font-size:15px;font-weight:500;color:var(--muted)}
.ledger__l{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}

/* ============ TỔNG QUAN ============ */
.ovw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,68px);align-items:start}
.spec{border-top:1px solid var(--line)}
.spec__row{display:grid;grid-template-columns:minmax(120px,.62fr) minmax(0,1fr);gap:18px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.spec__k{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.spec__v{font-size:15px;font-weight:500}
.spec__v em{font-style:normal;color:var(--brand);font-weight:600}
.note{
  display:flex;gap:11px;align-items:flex-start;margin-top:24px;padding:14px 16px;
  background:var(--brass-soft);border-left:2px solid var(--brass);font-size:13.5px;color:var(--ink-2);line-height:1.6
}
.note b{color:var(--ink)}

/* ============ VỊ TRÍ ============ */
.loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.radar{position:relative;aspect-ratio:1;width:100%;max-width:480px;margin-inline:auto}
.radar svg{width:100%;height:100%;display:block}
.dist{border-top:1px solid var(--line)}
.dist__r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.dist__t{font-family:"Playfair Display",Georgia,serif;font-size:30px;font-weight:400;line-height:1;min-width:72px;font-variant-numeric:tabular-nums}
.dist__t i{font-family:"Be Vietnam Pro",sans-serif;font-style:normal;font-size:12px;color:var(--muted);margin-left:3px}
.dist__n{font-size:15px;font-weight:500}
.dist__n small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.dist__bar{width:clamp(50px,12vw,110px);height:2px;background:var(--line);position:relative;border-radius:2px}
.dist__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--brand);border-radius:2px;display:block}


:root{--on-accent:#F8FAFD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--on-accent:#080E1C}}
:root[data-theme="dark"]{--on-accent:#080E1C}

/* ============ THE GRAND EXPO ============ */
.expo{background:var(--ink);color:#E7ECF7;position:relative;overflow:hidden}
.expo .sec__title{color:#E7ECF7}
.expo .display em{color:#B0CDFF}
.expo .lead{color:#B6C2DC}
.expo .eyebrow{color:#D6A458}
.expo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.expo__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(231,236,247,.14);margin-top:34px;border:1px solid rgba(231,236,247,.14)}
.expo__s{background:var(--ink);padding:20px 22px}
.expo__s b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:34px;font-weight:300;line-height:1.05;color:#E7ECF7}
.expo__s span{display:block;font-size:12.5px;color:#96A2C0;margin-top:6px;line-height:1.5}
.expo__art{position:relative;border:1px solid rgba(231,236,247,.16);aspect-ratio:5/4;overflow:hidden}
.expo__art svg,.expo__art img{width:100%;height:100%;display:block;object-fit:cover}
.expo .slot{background:rgba(8,14,28,.82);border-color:rgba(231,236,247,.2);color:#96A2C0}

/* ============ PHAN KHU ============ */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.zone{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);transition:border-color .25s,transform .25s}
.zone:hover{border-color:var(--brand);transform:translateY(-3px)}
.zone__art{aspect-ratio:16/10;border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.zone__art svg,.zone__art img{width:100%;height:100%;display:block;object-fit:cover}
.zone__b{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.zone__n{font-family:"Playfair Display",Georgia,serif;font-size:28px;font-weight:500;line-height:1.1}
.zone__c{font-size:13px;color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums}
.zone__d{font-size:14px;color:var(--ink-2);line-height:1.65}
.zone__l{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:11.5px;padding:3px 9px;border:1px solid var(--line);border-radius:100px;color:var(--muted)}

/* ============ BANG SAN PHAM ============ */
.tblwrap{overflow-x:auto;border:1px solid var(--line-soft);background:var(--surface)}
table.prod{width:100%;border-collapse:collapse;min-width:660px}
table.prod th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:15px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
table.prod td{padding:17px 18px;border-bottom:1px solid var(--line-soft);font-size:14.5px;vertical-align:top}
table.prod tr:last-child td{border-bottom:0}
table.prod tbody tr:hover{background:var(--brand-soft)}
.prod__n{font-weight:600;font-size:15px}
.prod__n small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.prod__p{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:500;color:var(--brand);white-space:nowrap;font-variant-numeric:tabular-nums}
.prod__p small{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:11.5px;color:var(--muted);font-weight:400}

/* ============ TIEN ICH ============ */
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.amen__i{background:var(--paper);padding:26px 24px 30px;display:flex;flex-direction:column;gap:12px;transition:background .25s}
.amen__i:hover{background:var(--surface)}
.amen__ic{color:var(--brand)}
.amen__t{font-size:16px;font-weight:600}
.amen__t span{display:block;font-size:12px;font-weight:600;color:var(--brass);letter-spacing:.08em;margin-top:3px}
.amen__d{font-size:13.5px;color:var(--ink-2);line-height:1.62}

/* ============ TIEN DO THANH TOAN ============ */
.payscroll{overflow-x:auto}
.pay{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);min-width:620px}
.pay__s{background:var(--surface);padding:20px 16px 24px}
.pay__n{font-family:"Playfair Display",Georgia,serif;font-size:15px;color:var(--brass);font-weight:600;letter-spacing:.08em}
.pay__t{font-size:13.5px;font-weight:600;margin-top:9px;line-height:1.45}
.pay__d{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.policy{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(26px,4vw,40px)}
.policy__i{border-top:2px solid var(--brand);padding-top:16px}
.policy__v{font-family:"Playfair Display",Georgia,serif;font-size:34px;font-weight:400;line-height:1}
.policy__l{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.55}

/* ============ THU VIEN ============ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px}
.gal__i{position:relative;overflow:hidden;border:1px solid var(--line-soft);background:var(--surface-2)}
.gal__i svg{width:100%;height:100%;display:block}
.gal__i:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal__i:nth-child(4){grid-row:span 2}
.gal__i:nth-child(5){grid-column:span 2}

/* ============ FORM ============ */
.cta{background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.cta__l{padding:clamp(28px,4vw,52px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;justify-content:center}
.cta__r{padding:clamp(28px,4vw,52px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:14.5px;padding:11px 13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);width:100%}
.field textarea{resize:vertical;min-height:82px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.55}
.check input{margin-top:4px;accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto}
.trust{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.trust__i{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);align-items:flex-start}
.trust__i svg{color:var(--brand);flex:0 0 auto;margin-top:3px}
.formnote{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.6}

/* ============ FOOTER ============ */
.ft{background:var(--ink);color:#B6C2DC;padding-block:clamp(44px,6vw,68px) 30px}
.ft a{color:#B6C2DC;text-decoration:none}
.ft a:hover{color:#B0CDFF}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,4vw,48px)}
.ft__t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7D89A8;font-weight:600;margin-bottom:15px}
.ft li{margin-bottom:9px;font-size:14px}
.ft__brand i{font-family:"Playfair Display",Georgia,serif;font-style:normal;font-size:25px;color:#E7ECF7;font-weight:500}
.ft__dis{font-size:12.5px;line-height:1.65;color:#7D89A8;margin-top:16px;max-width:46ch}
.ft__bot{margin-top:36px;padding-top:22px;border-top:1px solid rgba(231,236,247,.14);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;color:#7D89A8}

/* sticky mobile bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:9px 12px;gap:9px}
.mbar .btn{flex:1;padding:12px 10px}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero__grid,.ovw,.loc,.expo__grid,.cta{grid-template-columns:1fr}
  .cta__l{border-right:0;border-bottom:1px solid var(--line)}
  .zones,.amen{grid-template-columns:repeat(2,1fr)}
  .ft__grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:14px var(--pad) 20px;gap:2px}
  .nav.open a{padding:10px 0;border-bottom:1px solid var(--line-soft)}
  .burger{display:block;order:3}
  .hdr__cta{display:none}
  .gal{grid-template-columns:repeat(2,1fr)}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .ledger__i{border-bottom:1px solid var(--line-soft)}
  .ledger__i:nth-child(2n){border-right:0}
  .ledger__i:nth-child(3){padding-left:0}
  .policy{grid-template-columns:repeat(2,1fr)}
  .arch{max-height:460px}
}
@media (max-width:680px){
  body{padding-bottom:64px}
  .mbar{display:flex}
  .zones,.amen,.ft__grid,.form{grid-template-columns:1fr}
  .hero__rings{width:520px;height:520px;right:-200px;top:-120px}
  .spec__row{grid-template-columns:1fr;gap:3px}
  .hdr__tel{display:none}
  .gal{grid-auto-rows:120px}
  .gal__i:nth-child(1){grid-column:span 2}
  .gal__i:nth-child(5){grid-column:span 2}
}


/* ============ ROUTER / PAGE ============ */
.nav a.active{color:var(--ink);font-weight:600}
.nav a.active::after{right:0}

.phero{position:relative;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--line-soft);padding-block:clamp(38px,5.2vw,70px) clamp(32px,4.4vw,56px)}
.phero__rings{position:absolute;top:-280px;right:-170px;width:640px;height:640px;color:var(--brand);opacity:.1;pointer-events:none}
.phero__in{position:relative;max-width:72ch}
.phero h1{font-size:clamp(32px,5.2vw,58px);margin:14px 0 16px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;opacity:.45}
.crumb b{font-weight:500;color:var(--ink-2)}

/* ============ HOME: KHÁM PHÁ ============ */
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.exp{background:var(--paper);padding:26px 24px 28px;text-decoration:none;display:flex;flex-direction:column;gap:9px;transition:background .25s}
.exp:hover{background:var(--surface)}
.exp__k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600}
.exp__n{font-family:"Playfair Display",Georgia,serif;font-size:25px;font-weight:500;line-height:1.15}
.exp__d{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.exp__go{margin-top:auto;padding-top:14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:8px}
.exp:hover .exp__go svg{transform:translateX(4px)}
.exp__go svg{transition:transform .25s}

/* ============ BĂNG CTA NGẮN ============ */
.band{background:var(--ink);color:#E7ECF7;padding-block:clamp(38px,5vw,62px)}
.band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.band h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(26px,3.4vw,38px);font-weight:300;color:#E7ECF7;line-height:1.15}
.band p{font-size:14.5px;color:#96A2C0;margin-top:8px;max-width:48ch}
.qform{display:flex;flex-wrap:wrap;gap:10px}
.qform input{font:inherit;font-size:14.5px;padding:12px 14px;background:rgba(231,236,247,.07);border:1px solid rgba(231,236,247,.2);color:#E7ECF7;border-radius:var(--r);min-width:172px}
.qform input::placeholder{color:#7D89A8}

/* ============ TIẾN ĐỘ ============ */
.tline{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:clamp(30px,4vw,44px)}
.tline__i{position:relative}
.tline__i::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3vw,32px) - 5px);top:9px;width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--paper)}
.tline__i--next::before{background:var(--paper);border:1.5px solid var(--line)}
.tline__d{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}
.tline__t{font-family:"Playfair Display",Georgia,serif;font-size:clamp(22px,2.6vw,28px);font-weight:500;margin-top:5px;line-height:1.2}
.tline__x{font-size:14.5px;color:var(--ink-2);margin-top:9px;max-width:62ch;line-height:1.65}
.tline__art{margin-top:16px;border:1px solid var(--line-soft);position:relative;overflow:hidden;aspect-ratio:16/6;max-width:640px}
.tline__art svg{width:100%;height:100%;display:block}

/* ============ TIN TỨC ============ */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.ncard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);text-decoration:none;transition:border-color .25s,transform .25s}
.ncard:hover{border-color:var(--brand);transform:translateY(-3px)}
.ncard__art{aspect-ratio:16/10;border-bottom:1px solid var(--line-soft);overflow:hidden}
.ncard__art svg{width:100%;height:100%;display:block}
.ncard__b{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.ncard__m{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;gap:9px;align-items:center}
.ncard__m em{font-style:normal;color:var(--brass)}
.ncard__t{font-size:17.5px;font-weight:600;line-height:1.4}
.ncard__x{font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ============ BÀI VIẾT ============ */
.article{max-width:72ch;margin-inline:auto}
.article__art{border:1px solid var(--line-soft);aspect-ratio:16/7;overflow:hidden;margin-bottom:clamp(26px,4vw,40px);position:relative}
.article__art svg{width:100%;height:100%;display:block}
.article p{margin-bottom:20px;color:var(--ink-2)}
.article h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(24px,3vw,32px);font-weight:500;margin:clamp(30px,4vw,44px) 0 14px;line-height:1.2}
.article ul{list-style:disc;padding-left:22px;margin-bottom:20px;color:var(--ink-2)}
.article li{margin-bottom:9px}
.article blockquote{margin:28px 0;padding:18px 22px;border-left:2px solid var(--brass);background:var(--surface);font-family:"Playfair Display",Georgia,serif;font-size:21px;line-height:1.5;color:var(--ink)}
.article__meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:var(--muted);padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line-soft)}

/* ============ LIÊN HỆ ============ */
.ctct{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:clamp(26px,4vw,42px)}
.ctct__i{background:var(--paper);padding:24px 22px 28px;display:flex;flex-direction:column;gap:8px}
.ctct__k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ctct__v{font-size:17px;font-weight:600;line-height:1.45}
.ctct__v a{text-decoration:none;color:var(--brand)}
.ctct__x{font-size:13px;color:var(--ink-2)}
.mapslot{border:1px solid var(--line-soft);aspect-ratio:16/6;position:relative;overflow:hidden;background:var(--surface-2)}
.mapslot svg,.mapslot img{width:100%;height:100%;display:block;object-fit:cover}
.mapslot--anh{aspect-ratio:auto;background:var(--surface)}
.mapslot--anh img{height:auto;object-fit:contain}

/* ============ SƠ ĐỒ WEBSITE ============ */
.smap{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,24px)}
.smap__g{border:1px solid var(--line-soft);background:var(--surface);padding:24px 22px 20px}
.smap__h{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.smap__n{font-family:"Playfair Display",Georgia,serif;font-size:23px;font-weight:500}
.smap__x{font-size:13px;color:var(--ink-2);margin-bottom:14px;line-height:1.6}
.smap li{font-size:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.smap li:last-child{border-bottom:0}
.smap li code{font-size:12px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.badge{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap}
.badge--page{background:var(--brand-soft);color:var(--brand)}
.badge--cpt{background:var(--brass-soft);color:var(--brass)}
.badge--arch{background:var(--surface-2);color:var(--ink-2)}

@media (max-width:1000px){
  .explore,.news,.ctct{grid-template-columns:repeat(2,1fr)}
  .smap{grid-template-columns:1fr}
}
@media (max-width:680px){
  .explore,.news,.ctct{grid-template-columns:1fr}
  .band__in{flex-direction:column;align-items:flex-start}
  .qform{width:100%}
  .qform input{flex:1}
}


/* ============ BỘ LỌC TÌM KIẾM ============ */
.filter{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;background:var(--line-soft);border:1px solid var(--line);box-shadow:var(--shadow)}

/* Dai nut loai hinh tren trang Mua ban. Tren dien thoai thi truot ngang
   thay vi xuong dong, de khong day thanh loc xuong qua sau. */
.lhbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lhbar__t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:4px}
.lhbar__i{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:7px 13px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);text-decoration:none;font-size:14px;border-radius:var(--r);
  transition:border-color .18s ease,color .18s ease;
}
.lhbar__i b{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.lhbar__i:hover,.lhbar__i:focus-visible{border-color:var(--brand);color:var(--brand)}
.lhbar__i:hover b,.lhbar__i:focus-visible b{color:var(--brand)}
@media (max-width:620px){
  .lhbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .lhbar__i{flex:0 0 auto}
  .lhbar__t{flex:0 0 auto}
}

/* Gach ngan trong danh sach chan trang */
.ft__sep{height:1px;background:rgba(231,236,247,.16);margin:10px 0;list-style:none}
.filter__f{background:var(--paper);padding:11px 15px;display:flex;flex-direction:column;gap:3px;min-width:0}
.filter__f label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.filter__f select,.filter__f input{font:inherit;font-size:14.5px;border:0;background:transparent;color:var(--ink);padding:2px 0;width:100%;min-width:0}
.filter__f select:focus,.filter__f input:focus{outline:none}
.filter__f:focus-within{background:var(--surface)}
.filter__go{background:var(--brand);color:var(--on-accent);border:0;cursor:pointer;padding:0 26px;font-size:13.5px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:9px}
.filter__go:hover{background:var(--brand-2)}

/* ============ THẺ TIN RAO ============ */
.lotbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:clamp(20px,3vw,30px)}
.lotbar__c{font-size:14px;color:var(--muted)}
.lotbar__c b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:13px;padding:6px 14px;border:1px solid var(--line);border-radius:100px;text-decoration:none;color:var(--ink-2);transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-accent);font-weight:600}

.lots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px)}
.lot{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-soft);text-decoration:none;transition:border-color .25s,transform .25s}
.lot:hover{border-color:var(--brand);transform:translateY(-3px)}
.lot__art{position:relative;aspect-ratio:16/11;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.lot__art svg,.lot__art img{width:100%;height:100%;display:block;object-fit:cover}
.lot__tag{position:absolute;top:10px;left:10px;background:var(--brass);color:#1A1206;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 10px}
.lot__code{position:absolute;top:10px;right:10px;background:rgba(8,14,28,.78);color:#E7ECF7;font-size:11px;padding:4px 9px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.lot__b{padding:17px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.lot__t{font-size:15.5px;font-weight:600;line-height:1.45}
.lot__p{font-family:"Playfair Display",Georgia,serif;font-size:27px;font-weight:500;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.lot__p span{font-family:"Be Vietnam Pro",sans-serif;font-size:12.5px;color:var(--muted);font-weight:400;margin-left:6px}
.lot__loc{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.lot__loc svg{flex:0 0 auto;margin-top:3px}
.lot__specs{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-2);padding-top:13px;border-top:1px solid var(--line-soft);margin-top:auto}
.lot__specs b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ============ PHÂN TRANG ============ */
.pager{display:flex;gap:7px;justify-content:center;margin-top:clamp(28px,4vw,44px);flex-wrap:wrap}
.pager a{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);text-decoration:none;font-size:14px;font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s}
.pager a.on{background:var(--brand);border-color:var(--brand);color:var(--on-accent);font-weight:600}
.pager a:hover:not(.on){border-color:var(--brand);color:var(--brand)}
.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}

/* ============ CHI TIẾT TIN RAO ============ */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:clamp(24px,3.6vw,48px);align-items:start}
.dgal{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dgal__m{grid-column:1/-1;border:1px solid var(--line-soft);overflow:hidden;aspect-ratio:16/9;position:relative}
.dgal__i{border:1px solid var(--line-soft);overflow:hidden;aspect-ratio:16/11;position:relative}
.dgal svg{width:100%;height:100%;display:block}
.dprice{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);align-items:baseline;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:clamp(22px,3vw,32px) 0}
.dprice__v{font-family:"Playfair Display",Georgia,serif;font-size:clamp(32px,4.4vw,44px);font-weight:500;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.dprice__v small{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:7px}
.dkeys{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:clamp(24px,3.4vw,36px)}
.dkeys__i{background:var(--paper);padding:16px 16px 18px}
.dkeys__k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dkeys__v{font-size:16px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
.agent{position:sticky;top:86px;border:1px solid var(--line);background:var(--surface);padding:26px 24px 28px;display:flex;flex-direction:column;gap:14px}
.agent__av{width:56px;height:56px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",Georgia,serif;font-size:24px;font-weight:600}
.agent__n{font-size:17px;font-weight:600}
.agent__r{font-size:12.5px;color:var(--muted)}
.agent__tel{font-family:"Playfair Display",Georgia,serif;font-size:30px;color:var(--brand);text-decoration:none;font-variant-numeric:tabular-nums;line-height:1.1;display:block}
.agent__acts{display:flex;flex-direction:column;gap:9px}

/* ============ KÝ GỬI ============ */
.consign{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:clamp(28px,4vw,44px)}
.consign__i{background:var(--paper);padding:26px 24px 30px;display:flex;flex-direction:column;gap:10px}
.consign__n{font-family:"Playfair Display",Georgia,serif;font-size:15px;color:var(--brass);font-weight:600;letter-spacing:.1em}
.consign__t{font-size:16.5px;font-weight:600}
.consign__x{font-size:13.5px;color:var(--ink-2);line-height:1.62}

/* ============ GIỚI THIỆU ============ */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:clamp(30px,4vw,46px)}
.vals__i{background:var(--paper);padding:24px 22px 28px}
.vals__v{font-family:"Playfair Display",Georgia,serif;font-size:38px;font-weight:400;line-height:1;color:var(--brand)}
.vals__l{font-size:13.5px;color:var(--ink-2);margin-top:9px;line-height:1.55}

@media (max-width:1000px){
  .filter{grid-template-columns:repeat(2,1fr)}
  .filter__go{grid-column:1/-1;padding:14px}
  .lots{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .agent{position:static}
  .consign,.dkeys{grid-template-columns:repeat(2,1fr)}
  .intro{grid-template-columns:1fr}
}
@media (max-width:680px){
  .lots,.consign,.vals{grid-template-columns:1fr}
  .dkeys{grid-template-columns:repeat(2,1fr)}
  .dgal{grid-template-columns:repeat(2,1fr)}
}


/* ============ FAQ (tblItem: Cauhoi1-10 / Traloi1-10) ============ */
.faq{border-top:1px solid var(--line);margin-top:6px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;padding:16px 0;font-size:15.5px;font-weight:600;line-height:1.5;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Playfair Display",Georgia,serif;font-size:26px;line-height:.9;color:var(--brand);flex:0 0 auto}
.faq details[open] summary::after{content:"‘2"}
.faq summary:hover{color:var(--brand)}
.faq__a{padding:0 0 20px;font-size:14.5px;color:var(--ink-2);line-height:1.72;max-width:68ch}

/* ============================================================
   Bổ sung cho WordPress
   Bản thiết kế chạy trong khung có sẵn reset; WordPress thì không,
   nên phần dưới bù lại và thêm các lớp riêng của WordPress.
   ============================================================ */

html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none !important}

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.screen-reader-text:focus{
  position:static;width:auto;height:auto;margin:0;clip:auto;
  padding:10px 16px;background:var(--ink);color:var(--paper);z-index:99
}

/* Ảnh trong nội dung bài viết */
.article img,.zone__d img{border:1px solid var(--line-soft)}
.wp-caption{max-width:100%;margin:0 0 20px}
.wp-caption-text,figcaption{
  font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5;text-align:center
}
.alignleft{float:left;margin:6px 24px 18px 0;max-width:50%}
.alignright{float:right;margin:6px 0 18px 24px;max-width:50%}
.aligncenter{display:block;margin-inline:auto}
.alignwide,.alignfull{margin-block:28px}

/* Thẻ tin rao khi chưa gắn ảnh */
.lot__khong-anh,.ncard__khong-anh{
  display:block;width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--surface) 12px 24px)
}

/* Bộ lọc: hàng sắp xếp */
.lotbar__sap{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:8px 14px;background:var(--surface)
}
.lotbar__sap label{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap
}
.lotbar__sap select{
  font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);
  padding:2px 0;cursor:pointer
}
.lotbar__sap select:focus{outline:none}

/* Trạng thái căn */
.tt{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:4px 10px;border-radius:100px;white-space:nowrap
}
.tt--tot{background:var(--brand-soft);color:var(--brand)}
.tt--canh-bao{background:var(--brass-soft);color:var(--brass)}
.tt--tat{background:var(--surface-2);color:var(--muted)}

/* Khi danh sách rỗng */
.rong{
  border:1px dashed var(--line);padding:clamp(34px,6vw,64px) 24px;text-align:center;
  color:var(--muted);background:var(--surface)
}
.rong h3{
  font-family:"Playfair Display",Georgia,serif;font-size:26px;font-weight:500;
  color:var(--ink);margin-bottom:10px
}
.rong p{font-size:14.5px;max-width:46ch;margin-inline:auto;line-height:1.7}
.rong .btn{margin-top:22px}

/* Phân trang do WordPress sinh ra */
.pager .page-numbers{
  min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line);text-decoration:none;font-size:14px;
  font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s
}
.pager .page-numbers.current{
  background:var(--brand);border-color:var(--brand);color:var(--on-accent);font-weight:600
}
.pager .page-numbers:hover:not(.current){border-color:var(--brand);color:var(--brand)}
.pager .dots{border-color:transparent}

/* Thanh gọi nhanh trên điện thoại: chừa chỗ cuối trang */
@media (max-width:680px){ body{padding-bottom:64px} }

/* Thông báo sau khi gửi form */
.baoform{
  padding:13px 16px;margin:0 0 18px;font-size:14px;line-height:1.6;
  border-left:2px solid transparent
}
.baoform--tot{background:var(--brand-soft);border-left-color:var(--brand);color:var(--ink)}
.baoform--loi{background:var(--brass-soft);border-left-color:var(--brass);color:var(--ink)}