/* ---- p_43_bl-venues.css ---- */
/* =====================================================================
   BLOG · EVENT VENUES (.sk-bv) - bản vẽ mặt bằng (blueprint)
   Hình khối: lưới ô, thước kích thước, ký hiệu số trong vòng tròn, góc cắt (crop mark), góc vuông 3px.
   Nhịp tối/sáng: hero xanh-đen -> đen, các widget trên lưới, phiếu khảo sát in trên giấy #f5f4f1.
   Hệ màu: cam #ff6a13 / đen / trắng (+ xám). Một font Be Vietnam Pro (Anton chỉ cho dấu "CHỐT / XEM LẠI / LOẠI").
   Mobile trước; mở rộng ở 700px, 760px, 900px và 1025px.
   ===================================================================== */
.sk-bv{--r:3px;--bw:1px;--hfw:800;--hls:-.035em;--bg:#090b0e;--bg2:#0d1116;--card:#10151b;--ink:#f5f5f6;--mut:#a9abb5;--ln:rgba(255,255,255,.17);--aci:#0a0a0c}
.sk-bv h2,.sk-bv h3,.sk-bv h4{margin:0}
.sk-bv button{font-family:var(--fb);-webkit-tap-highlight-color:transparent}
.bv-sec{scroll-margin-top:84px;isolation:isolate;padding-block:clamp(32px,8vw,104px)}
.sk-bv .bv-sec .s-head{margin-bottom:clamp(18px,4vw,56px)}
/* lưới ô: 20px nhỏ, 100px lớn, mờ dần ra mép */
.bv-gr::before,.bv-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;-webkit-mask-image:radial-gradient(120% 70% at 78% 8%,#000 18%,transparent 74%);mask-image:radial-gradient(120% 70% at 78% 8%,#000 18%,transparent 74%)}
.bv-gr::before{-webkit-mask-image:radial-gradient(110% 60% at 8% 0,#000 10%,transparent 72%);mask-image:radial-gradient(110% 60% at 8% 0,#000 10%,transparent 72%)}
.sk-bv :focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ---------- đầu mục kiểu khung tên bản vẽ ---------- */
.sk-bv .bv-sh{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:700 12px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.bv-sh i{display:grid;place-items:center;flex:none;min-width:42px;height:26px;padding:0 8px;border-radius:2px;background:var(--ac);color:#0a0a0c;font-style:normal;letter-spacing:.06em}
.bv-sh span{flex:none;max-width:70%}
.bv-sh::after{content:"";flex:1;min-width:20px;height:1px;background:linear-gradient(90deg,var(--ln),transparent)}
.bv-head .s-h{text-wrap:balance}
.sk-bv .bv-in{color:var(--ac);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bv-pn{position:relative;border:1px solid var(--ln);border-radius:var(--r);background:var(--card)}
.bv-pn::before,.bv-pn::after{content:"";position:absolute;width:12px;height:12px;pointer-events:none;border:2px solid var(--ac)}
.bv-pn::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.bv-pn::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.sk-bv .bv-fine{max-width:78ch;margin:18px 0 0;font:400 13.5px/1.6 var(--fb);color:var(--mut)}

/* =====================  HERO  ===================== */
.bv-hero{background:linear-gradient(180deg,#0b1520 0,#0a0e13 42%,#090b0e 100%)}
.bv-hg{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "p" "l";gap:16px}
.bv-hg>*,.bv-ht,.bv-pw>*{min-width:0}
.bv-ht{grid-area:t}
.bv-pw{display:contents}
.bv-plan{grid-area:p;margin:0;padding:8px 8px 0}
.bv-leg{grid-area:l}
.sk-bv .bv-kick{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bv-kick i{display:grid;place-items:center;height:24px;min-width:40px;padding:0 8px;border-radius:2px;background:var(--ac);color:#0a0a0c;font-style:normal;letter-spacing:.06em}
.sk-bv .bv-title{font-size:clamp(62px,19.5vw,118px);line-height:.9;letter-spacing:-.05em;font-weight:800;text-transform:uppercase}
.bv-title em{font-style:normal;color:var(--ac)}
.bv-ol{color:transparent;-webkit-text-stroke:1.6px #fff;paint-order:stroke fill}
.sk-bv .bv-sub{max-width:46ch;margin-top:14px;font-size:16px;line-height:1.55}
.sk-bv .bv-btns{margin-top:16px;gap:10px;flex-wrap:nowrap}
.sk-bv .bv-btns .btn{flex:1 1 0;min-width:0;padding-inline:10px;white-space:nowrap}
.bv-svg{display:block;width:100%;height:auto;overflow:visible;color:#fff}
.bv-wall{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:square}
.bv-door{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.bv-stage{stroke:rgba(255,255,255,.85);stroke-width:1.2}
.bv-led{fill:none;stroke:var(--ac);stroke-width:3.5;stroke-linecap:round}
.bv-lobby{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1;stroke-dasharray:4 3}
.bv-tx{fill:rgba(255,255,255,.78);font:700 9.5px var(--fb);letter-spacing:.14em}
.bv-tx2{font-size:11px;fill:#fff}
.bv-tx3{fill:var(--ac);font-size:11px;opacity:0;transition:opacity .3s}
.bv-plan[data-z="3"] .bv-tx3{opacity:1}
.bv-tc{fill:#0c1117;stroke:#fff;stroke-width:1.3}
.bv-ch{fill:rgba(255,255,255,.92)}
.bv-tc,.bv-ch{transform-box:fill-box;transform-origin:center}
.bv-tn{fill:rgba(255,255,255,.55);font:600 8.5px var(--fb);text-anchor:middle}
.bv-ch,.bv-tc{transition:fill .35s}
.bv-plan[data-z="2"] .bv-vip .bv-ch{fill:var(--ac)}
.bv-plan[data-z="2"] .bv-vip .bv-tc{fill:rgba(255,106,19,.25);stroke:var(--ac)}
.bv-z{fill:var(--ac);fill-opacity:0;stroke:var(--ac);stroke-opacity:0;stroke-width:1.2;stroke-dasharray:5 3;transition:fill-opacity .4s,stroke-opacity .4s}
.bv-plan[data-z="1"] .bv-z1,.bv-plan[data-z="2"] .bv-z2,.bv-plan[data-z="3"] .bv-z3,.bv-plan[data-z="4"] .bv-z4{fill-opacity:.22;stroke-opacity:1}
.bv-mk circle{fill:#0a0c10;stroke:#fff;stroke-width:1.2;transition:fill .3s,stroke .3s}
.bv-mk path{fill:none;stroke:#fff;stroke-width:1}
.bv-mk text{fill:#fff;font:700 10.5px var(--fb);text-anchor:middle}
.bv-mk .is-on circle{fill:var(--ac);stroke:var(--ac)}
.bv-mk .is-on text{fill:#0a0a0c}
.bv-dim path{fill:none;stroke:rgba(255,255,255,.68);stroke-width:1}
.bv-dim text{fill:rgba(255,255,255,.88);font:600 11px var(--fb);letter-spacing:.04em}
.bv-scan{pointer-events:none}
.bv-scan line{stroke:var(--ac);stroke-width:1.6}
.bv-tb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px -8px 0;border-top:1px solid var(--ln)}
.bv-tb span{min-width:0;padding:10px 12px 12px;border-left:1px solid var(--ln)}
.bv-tb span:first-child{border-left:0}
.bv-tb small{display:block;font:600 12px/1.2 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.bv-tb b{display:block;margin-top:4px;font:800 clamp(17px,4.6vw,22px)/1.1 var(--fb);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bv-tb em{font-style:normal;color:var(--ac)}
.sk-bv .bv-lt{margin:0 0 10px;font:500 13px/1.45 var(--fb);color:var(--mut)}
.bv-lgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bv-lg{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--ln);border-radius:var(--r);background:rgba(255,255,255,.03);color:var(--ink);font:600 14px/1.2 var(--fb);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.bv-lg i{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;font:700 13px/1 var(--fb);font-style:normal;transition:background .25s,color .25s,border-color .25s}
.bv-lg.is-on{border-color:var(--ac);background:rgba(255,106,19,.12)}
.bv-lg.is-on i{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.bv-zt{display:grid;margin-top:10px}
.bv-zt>div{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .35s}
.bv-zt>div.is-on{visibility:visible;opacity:1}
.sk-bv .bv-zt p{font-size:15px;line-height:1.55;color:#d9dae0}
.sk-bv .bv-zl{display:inline-flex;align-items:center;min-height:44px;color:var(--ac);font:700 13.5px/1.2 var(--fb);letter-spacing:.02em;text-decoration:underline;text-underline-offset:4px}

/* =====================  A-02 · SỨC CHỨA  ===================== */
.bv-cp{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bv-cp>*{min-width:0}
.bv-ctl{display:grid;gap:14px;padding:clamp(16px,3vw,24px)}
.bv-fl{position:relative;display:grid;gap:4px}
.bv-lb{font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bv-ar{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--ac)}
.bv-num{width:100%;min-width:0;min-height:58px;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:800 clamp(40px,12vw,58px)/1 var(--fb);letter-spacing:-.045em;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;outline:none}
.bv-num::-webkit-outer-spin-button,.bv-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bv-ar span{font:700 20px var(--fb);color:var(--ac)}
.bv-fl.is-bad::after{content:"Nhập từ 50 đến 3.000 m²";position:absolute;right:0;top:0;font:700 12px/1.2 var(--fb);color:var(--ac)}
.bv-qk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bv-qk button{min-height:46px;border:1px solid var(--ln);border-radius:var(--r);background:transparent;color:var(--ink);font:700 14px var(--fb);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.bv-qk button.on{border-color:var(--ac);background:rgba(255,106,19,.14);color:var(--ac)}
.bv-sw{border-top:1px solid var(--ln);padding-top:12px}
.bv-ro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sk-bv .bv-ro p{margin:0;padding:10px 12px;border:1px dashed var(--ln);border-radius:var(--r)}
.bv-ro small{display:block;font:600 12px/1.3 var(--fb);color:var(--mut)}
.bv-ro b{display:block;margin-top:3px;font:800 17px/1.2 var(--fb);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bv-ls{display:flex;flex-direction:column;border-top:1px solid var(--ln)}
.bv-lr{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:58px;padding:8px 12px 12px;border:1px solid var(--ln);border-top:0;border-radius:0;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.bv-lr[aria-pressed=true]{background:rgba(255,106,19,.1);border-color:rgba(255,106,19,.55)}
.bv-ix{font:700 12px var(--fb);letter-spacing:.08em;color:var(--mut)}
.bv-ln{min-width:0}
.bv-ln b{display:flex;align-items:center;gap:8px;font:700 16px/1.2 var(--fb)}
.bv-ln small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--fb);color:var(--mut)}
.bv-mx{padding:3px 6px 2px;border-radius:2px;background:var(--ac);color:#0a0a0c;font:800 12px/1 var(--fb);font-style:normal;letter-spacing:.08em}
.bv-mx[hidden]{display:none}
.bv-lv{text-align:right}
.bv-lv b{display:block;font:800 23px/1 var(--fb);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.bv-lv small{display:block;margin-top:2px;font:600 12px var(--fb);color:var(--mut)}
.bv-bar{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--w,0)*100%);background:var(--ac);opacity:.5;transition:width .6s cubic-bezier(.16,1,.3,1),opacity .3s}
.bv-lr[aria-pressed=true] .bv-bar{opacity:1}
.bv-fig{margin:0;padding:12px 12px 10px}
.bv-ls .bv-fig{border-top:0}
.bv-fh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px}
.bv-fh b{font:800 18px var(--fb);letter-spacing:-.02em}
.bv-fh span{font:500 13.5px var(--fb);color:var(--mut)}
.bv-dg{display:block;width:100%;height:auto}
.sk-bv .bv-fc{margin-top:8px;font:500 12.5px/1.45 var(--fb);color:var(--mut)}
.bv-sd:empty{display:none}
.bv-dg .gl{fill:none;stroke:rgba(255,255,255,.07);stroke-width:.5}
.bv-dg .wl{fill:none;stroke:#fff;stroke-width:1.8}
.bv-dg .st{fill:url(#bv-ph);stroke:rgba(255,255,255,.8);stroke-width:1}
.bv-dg .tb{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1}
.bv-dg .tq{stroke:rgba(255,255,255,.9);stroke-linecap:butt}
.bv-dg .tu{fill:none;stroke:rgba(255,255,255,.9);stroke-linejoin:miter}
.bv-dg .c{fill:none;stroke:var(--ac);stroke-linecap:round}
.bv-dg .q{stroke:var(--ac);stroke-linecap:square}
.bv-dg .dm{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1}
.bv-dg text{fill:rgba(255,255,255,.85);font:600 10px var(--fb)}
.bv-dg .sl{fill:rgba(255,255,255,.9);font-size:9px;letter-spacing:.12em}

/* =====================  A-03 · CHỌN LOẠI VENUE  ===================== */
.bv-fd{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bv-fd>*{min-width:0}
.bv-fq{display:grid;gap:14px;align-content:start;padding:clamp(16px,3vw,24px)}
.bv-fg{display:grid;gap:8px}
.sk-bv .bv-fp{margin:0;font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bv-sg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.bv-sg button{min-height:46px;padding:0 4px;border:0;border-left:1px solid var(--ln);border-radius:0;background:transparent;color:var(--ink);font:600 14px/1.15 var(--fb);cursor:pointer;transition:background .25s,color .25s}
.bv-sg button:first-child{border-left:0}
.bv-sg button.on{background:var(--ac);color:#0a0a0c}
.bv-cn{display:grid;gap:2px;padding-top:12px;border-top:1px dashed var(--ln)}
.sk-bv .bv-cn p{font-size:15px;line-height:1.55;color:#d9dae0}
.bv-cn [hidden]{display:none}
.sk-bv .bv-fine2{margin:0}
.bv-vl{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.bv-vt{border:1px solid var(--ln);border-radius:var(--r);background:var(--card);overflow:hidden;transition:border-color .3s}
.bv-vt.is-open{border-color:rgba(255,106,19,.65)}
.bv-vh{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto 14px;align-items:center;gap:10px;width:100%;min-height:72px;padding:12px 14px 17px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.bv-rk{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ln);border-radius:50%;font:700 13px var(--fb);font-style:normal;transition:background .3s,color .3s,border-color .3s}
.bv-vt[data-rank="1"] .bv-rk{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.bv-vn{min-width:0}
.bv-vn b{display:block;font:700 15.5px/1.25 var(--fb)}
.bv-vn small{display:block;margin-top:3px;font:500 12.5px/1.35 var(--fb);color:var(--mut)}
.bv-fit{text-align:right}
.bv-fit b{display:block;font:800 23px/1 var(--fb);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bv-fit b::after{content:"%";margin-left:1px;font-size:.55em;color:var(--mut)}
.bv-fit small{display:block;margin-top:2px;font:700 12px var(--fb);color:var(--ac)}
.bv-vt[data-lv="2"] .bv-fit small,.bv-vt[data-lv="3"] .bv-fit small{color:var(--mut)}
.bv-chv{width:10px;height:10px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s}
.bv-vt.is-open .bv-chv{transform:rotate(-135deg) translate(-2px,-2px)}
.bv-gauge{position:absolute;left:14px;right:14px;bottom:7px;height:4px;background:rgba(255,255,255,.1)}
.bv-gauge::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(9,11,14,.9) 0 1px,transparent 1px 10%);pointer-events:none}
.bv-gauge u{display:block;height:100%;width:calc(var(--f,0)*100%);background:var(--ac);transition:width .8s cubic-bezier(.16,1,.3,1)}
.bv-vb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.bv-vt.is-open .bv-vb{grid-template-rows:1fr}
.bv-vl.is-sort .bv-vb{transition:none}
.bv-vbi{display:grid;min-height:0;overflow:hidden}
.bv-tbs{display:none}
.bv-col{padding:12px 14px 4px}
.bv-col:last-child{padding-bottom:16px}
.sk-bv .bv-col h4{margin:0 0 8px;font:700 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.sk-bv .bv-no h4{color:var(--mut)}
.sk-bv .bv-col ul,.sk-bv .bv-col ol{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.bv-col li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:#d9dae0}
.bv-col ul li::before{content:"";position:absolute;left:2px;top:.68em;width:9px;height:2px;background:var(--ac)}
.bv-no ul li::before{background:var(--mut)}
.bv-qs ol{counter-reset:bq}
.bv-qs li{counter-increment:bq}
.bv-qs li::before{content:counter(bq);position:absolute;left:0;top:.2em;width:16px;height:16px;border:1px solid var(--ac);border-radius:50%;font:700 12px/14px var(--fb);text-align:center;color:var(--ac)}

/* =====================  A-04 · PHIẾU KHẢO SÁT (giấy)  ===================== */
.bv-paper::before{content:"";position:absolute;inset:0 0 auto;height:10px;z-index:-1;background:repeating-linear-gradient(90deg,rgba(10,10,12,.5) 0 1px,transparent 1px 12px);opacity:.5}
.bv-sc{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bv-sc>*{min-width:0}
.bv-form{padding:clamp(14px,3vw,24px);background:#fff;border-color:rgba(10,10,12,.16)}
.bv-fhd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:2px solid #0a0a0c}
.bv-fhd b{font:800 17px var(--fb);letter-spacing:-.02em}
.bv-fhd span{flex:none;font:700 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--mut)}
.bv-nm{margin-top:14px}
.bv-nm input{background:#faf9f6}
.sk-bv .bv-key{margin:12px 0 2px;font:600 12.5px/1.4 var(--fb);color:var(--mut)}
.bv-its{list-style:none;margin:0;padding:0}
.bv-it{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(10,10,12,.22)}
.bv-it:last-child{border-bottom:0}
.bv-n{font:700 12px var(--fb);font-style:normal;letter-spacing:.08em;color:var(--mut)}
.bv-tx9{min-width:0}
.bv-tx9 b{display:flex;align-items:center;gap:8px;font:700 15.5px/1.2 var(--fb)}
.bv-tx9 small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--fb);color:var(--mut)}
.bv-fl9{padding:3px 5px 2px;border:1.5px solid var(--ac);border-radius:2px;font:700 12px/1 var(--fb);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0c}
.bv-s3{display:flex;gap:4px}
.bv-s3 button{width:46px;height:46px;padding:0;border:1.5px solid rgba(10,10,12,.3);border-radius:var(--r);background:#fff;color:#0a0a0c;font:700 17px var(--fb);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.bv-s3 button:active{transform:scale(.94)}
.bv-s3 button[aria-pressed=true]{border-color:#0a0a0c}
.bv-s3 button[aria-pressed=true][data-v="0"]{background:#0a0a0c;color:#fff}
.bv-s3 button[aria-pressed=true][data-v="1"]{background:#cfcec9;color:#0a0a0c}
.bv-s3 button[aria-pressed=true][data-v="2"]{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.bv-res{--ink:#f5f5f6;--mut:#a9abb5;--ln:rgba(255,255,255,.18);position:relative;display:grid;gap:14px;align-content:start;padding:clamp(16px,3vw,24px);border-radius:var(--r);background:#0a0b0e;color:var(--ink);scroll-margin-top:90px}
.bv-rh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bv-rh small{font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bv-rh span{font:600 13px var(--fb);color:var(--mut)}
.bv-pcw{display:flex;align-items:baseline;gap:4px}
.bv-pc{font:800 clamp(56px,16vw,96px)/.9 var(--fb);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.bv-pcw span{font:800 28px var(--fb);color:var(--ac)}
.bv-rl{position:relative;display:grid;grid-template-columns:50fr 25fr 25fr;height:14px;margin:6px 0 26px}
.bv-rl i{display:block;height:100%}
.bv-r0{background:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 2px,transparent 2px 6px)}
.bv-r1{background:repeating-linear-gradient(135deg,var(--ac) 0 2px,transparent 2px 6px)}
.bv-r2{background:var(--ac)}
.bv-rl em{position:absolute;top:21px;font:700 12px/1 var(--fb);font-style:normal;color:var(--mut);transform:translateX(-50%)}
.bv-rl em:nth-of-type(1){left:25%}.bv-rl em:nth-of-type(2){left:62.5%}.bv-rl em:nth-of-type(3){left:87.5%}
.bv-rl u{position:absolute;top:-7px;left:calc(var(--p,0)*1%);width:2px;height:28px;margin-left:-1px;background:#fff;transition:left .9s cubic-bezier(.16,1,.3,1)}
.bv-rl u::before{content:"";position:absolute;left:-5px;top:-1px;border:6px solid transparent;border-top:8px solid #fff;border-bottom:0}
.bv-vd{display:grid;gap:8px}
.bv-st{justify-self:start;padding:6px 14px 4px;border:3px solid currentColor;border-radius:4px;font-size:clamp(30px,8.6vw,46px);line-height:1;letter-spacing:.02em;color:var(--mut);transform:rotate(-3deg)}
.bv-st[data-s=chot]{background:var(--ac);border-color:var(--ac);color:#0a0a0c}
.bv-st[data-s=xem]{color:#fff}
.bv-st[data-s=loai]{color:#fff;border-style:dashed}
.sk-bv .bv-vd p{font-size:15px;line-height:1.55;color:#d9dae0}
.bv-hm{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.bv-hm i{display:grid;place-items:center;height:26px;border:1px dashed rgba(255,255,255,.3);border-radius:2px;font:700 12px var(--fb);font-style:normal;color:var(--mut);transition:background .3s,color .3s,border-color .3s}
.bv-hm i.h0{border:1px solid rgba(255,255,255,.5);background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 2px,transparent 2px 5px);color:#fff}
.bv-hm i.h1{border:1px solid var(--ac);background:linear-gradient(0deg,var(--ac) 0 48%,transparent 48%);color:#fff}
.bv-hm i.h2{border:1px solid var(--ac);background:var(--ac);color:#0a0a0c}
.bv-wk{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bv-wk:empty{display:none}
.bv-wk small{flex:none;width:100%;font:700 12px/1.2 var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bv-wk span{padding:6px 10px;border:1px solid var(--ac);border-radius:99px;font:600 13px/1.2 var(--fb);color:#fff}
.bv-wk span.w0{background:var(--ac);color:#0a0a0c}
.bv-ac{display:flex;gap:10px}
.bv-ac .btn{flex:1 1 0;min-width:0;padding-inline:10px}
.sk-bv .bv-hot{font-size:13.5px;line-height:1.55;color:var(--mut)}
.sk-bv .bv-tel{color:var(--ac);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bv-dock{z-index:6;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s}
.bv-dock.is-off{opacity:0;transform:translateY(24px);visibility:hidden;pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
@keyframes bvSlam{0%{transform:rotate(-12deg) scale(1.7);opacity:0}60%{transform:rotate(-2deg) scale(.96);opacity:1}100%{transform:rotate(-3deg) scale(1)}}

/* =====================  A-05 · BÀI VIẾT & DỰ ÁN  ===================== */
.bv-posts{gap:14px}
.bv-cw{min-width:0;display:flex;flex-direction:column}
.bv-cw>.card,.bv-cw>.bv-tile{flex:1}
.sk-bv .bv-cl{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 12px/1.25 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bv-cl::before{content:"";flex:none;width:14px;height:2px;background:var(--ac)}
.sk-bv a.bv-tile{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:230px;padding:22px;border:1px dashed var(--ac);border-radius:var(--r);background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 20px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/20px 100%,#0c1015;transition:border-color .3s,background-color .3s}
.bv-tile small{font:700 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.bv-tile b{font:800 clamp(21px,5.4vw,27px)/1.2 var(--fb);letter-spacing:-.03em}
.bv-tile span{display:flex;align-items:center;gap:10px;font:600 14px var(--fb);color:var(--mut)}
.bv-tile svg{width:18px;height:18px;color:var(--ac)}

/* =====================  A-06 · TÁM CÂU HỎI  ===================== */
.bv-ql{--pg:0;position:relative;list-style:none;margin:0;padding:0 0 0 40px}
.bv-ql::before,.bv-ql::after{content:"";position:absolute;left:15px;top:32px;bottom:32px;width:2px}
.bv-ql::before{background:var(--ln)}
.bv-ql::after{background:var(--ac);transform-origin:50% 0;transform:scaleY(var(--pg))}
.bv-qi{position:relative;border-bottom:1px solid var(--ln)}
.bv-qi::before{content:"";position:absolute;left:-32px;top:24px;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--ln);border-radius:50%;background:var(--bg2);z-index:1;transition:background .3s,border-color .3s}
.bv-qi.is-pass::before,.bv-qi.is-open::before{border-color:var(--ac)}
.bv-qi.is-open::before{background:var(--ac)}
.bv-qq{display:grid;grid-template-columns:auto minmax(0,1fr) 28px;gap:12px;align-items:center;width:100%;min-height:64px;padding:12px 0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.bv-qq i{font:700 12px var(--fb);font-style:normal;letter-spacing:.08em;color:var(--ac)}
.bv-qq span{font:600 16px/1.38 var(--fb)}
.bv-qq b{position:relative;display:block;width:28px;height:28px;border:1px solid var(--ln);border-radius:50%;background:linear-gradient(var(--ac),var(--ac)) center/12px 2px no-repeat,linear-gradient(var(--ac),var(--ac)) center/2px 12px no-repeat;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.bv-qi.is-open .bv-qq b{transform:rotate(135deg)}
.bv-qb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1)}
.bv-qb>div{min-height:0;overflow:hidden}
.bv-qi.is-open .bv-qb{grid-template-rows:1fr}
.sk-bv .bv-qb p{padding:0 8px 12px 30px;font-size:15px;line-height:1.6;color:#d3d4da}
.sk-bv .bv-qb p:last-child{padding-bottom:18px}
.bv-qb strong{color:#fff}
.bv-qact{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:22px}
.bv-qact span{font-size:14px;color:var(--mut)}
.bv-sec .fq{max-width:900px}
.sk-bv .fq-q{gap:12px;padding-right:2px}

/* ---------- related / pager gọn trên mobile ---------- */
@media(max-width:699px){
  .bv-it{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 0}
  .bv-n{display:none}
  .bv-its{counter-reset:it}
  .bv-it{counter-increment:it}
  .bv-tx9 b::before{content:counter(it,decimal-leading-zero);font:700 12px var(--fb);letter-spacing:.08em;color:var(--mut)}
  .bv-s3 button{width:44px;height:44px}
  .sk-bv .bv-fc{display:none}
  .bv-lgs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .bv-lg{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:62px;padding:8px 8px 8px 10px;font-size:13px}
  .bv-qq i{display:none}
  .bv-qact span{display:none}
  .bv-qact .btn{flex:1 1 100%}
  .bv-res{gap:10px}
  .bv-rl{margin:4px 0 24px}
  .bv-qq{grid-template-columns:minmax(0,1fr) 28px}
  .bv-tbs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:12px 14px 0;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
  .bv-tbs button{min-height:44px;padding:0 4px;border:0;border-left:1px solid var(--ln);border-radius:0;background:transparent;color:var(--ink);font:700 14px var(--fb);cursor:pointer;transition:background .25s,color .25s}
  .bv-tbs button:first-child{border-left:0}
  .bv-tbs button[aria-pressed=true]{background:var(--ac);color:#0a0a0c}
  .bv-vbi[data-tab="0"]>.bv-col:nth-child(n+3),.bv-vbi[data-tab="1"]>.bv-col:nth-child(2),.bv-vbi[data-tab="1"]>.bv-col:nth-child(4),.bv-vbi[data-tab="2"]>.bv-col:nth-child(-n+3){display:none}
  .sk-bv .s-relw{padding-block:30px 4px}
  .sk-bv .s-relw .s-head{margin-bottom:14px}
  .sk-bv .s-rel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:4px var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .sk-bv .s-rel::-webkit-scrollbar{display:none}
  .sk-bv .s-rel a{flex:0 0 min(72%,270px);scroll-snap-align:start;min-height:84px;padding:14px 16px;gap:8px}
  .kx-js .sk-bv .s-rel [data-r]{opacity:1;transform:none;clip-path:none;filter:none}
  .sk-bv .s-pager{grid-template-columns:1fr 1fr;gap:10px;padding-block:10px 22px}
  .sk-bv .s-pager a{padding:12px 14px}
  .sk-bv .s-pager .r{text-align:right}
  .sk-bv .s-pager b{font-size:16px;line-height:1.25}
  .sk-bv .bv-posts{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 14px;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .bv-posts::-webkit-scrollbar{display:none}
  .bv-cw{flex:0 0 min(80%,300px);scroll-snap-align:start}
}

/* =====================  iPad dọc và lớn hơn  ===================== */
@media(min-width:700px){
  .sk-bv .bv-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .bv-ht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;align-items:end}
  .bv-ht>.s-crumb,.bv-ht>.bv-kick{grid-column:1/-1}
  .bv-ht>.bv-title{grid-column:1}
  .sk-bv .bv-title{font-size:calc((100vw - 92px)/9)}
  .bv-hs{grid-column:2;padding-bottom:6px}
  .bv-lgs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bv-fq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .bv-fq>.bv-cn{grid-column:1/-1}
  .bv-vbi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bv-col{padding-inline:16px}
  .bv-col+.bv-col{border-left:1px dashed var(--ln)}
}
@media(min-width:760px){
  .bv-cp{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"c s" "l s";column-gap:22px;align-items:start}
  .bv-ctl{grid-area:c}
  .bv-ls{grid-area:l}
  .bv-sd{grid-area:s;position:sticky;top:100px}
  .bv-ctl[data-r],.bv-ls[data-r]{min-width:0}
  .bv-vb .bv-col{padding-inline:14px}
}
@media(min-width:900px){
  .bv-hg{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"t p" "l p";column-gap:clamp(36px,4vw,60px);row-gap:26px;align-items:start}
  .bv-ht{display:block}
  .bv-hs{padding:0}
  .sk-bv .bv-title{font-size:clamp(64px,calc((100vw - 56px - 4vw)*.0947),104px)}
  .sk-bv .bv-btns{flex-wrap:wrap}
  .sk-bv .bv-btns .btn{flex:0 1 auto;padding-inline:22px}
  .bv-lgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bv-plan{padding:12px 12px 0}
  .bv-tb{margin:10px -12px 0}
  .bv-sc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:start}
  .bv-res{position:sticky;top:100px}
  .bv-dock{display:none}
}
@media(min-width:1025px){
  .bv-fd{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:24px;align-items:start}
  .bv-fq{grid-template-columns:minmax(0,1fr);position:sticky;top:100px;grid-column:1;grid-row:1/span 2}
  .bv-vl{grid-column:2;grid-row:1}
  .bv-fine2{grid-column:2;grid-row:2}
  .bv-cp{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:30px}
  .bv-ql{max-width:900px}
}
@media(min-width:1280px){
  .bv-fd{column-gap:32px}
}

/* ---------- phản hồi khi chạm ---------- */
.bv-lr:active,.bv-vh:active{background:rgba(255,255,255,.07)}
.bv-lg:active,.bv-qk button:active,.bv-sg button:active,.bv-tbs button:active{transform:scale(.97)}
.bv-qq:active span{color:var(--ac)}

/* ---------- hover tinh tế: chỉ chuột ---------- */
@media(hover:hover) and (pointer:fine){
  .bv-lr:hover,.bv-vh:hover{background:rgba(255,255,255,.04)}
  .bv-lg:hover{border-color:var(--ac)}
  .bv-sg button:not(.on):hover,.bv-qk button:not(.on):hover{background:rgba(255,106,19,.12)}
  .bv-s3 button:not([aria-pressed=true]):hover{border-color:#0a0a0c}
  .bv-qq:hover span{color:var(--ac)}
  .sk-bv a.bv-tile:hover{border-color:#fff;background-color:#11161c}
  .sk-bv a.bv-tile:hover svg{transform:translateX(4px)}
  .bv-tile svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}
}

/* =====================  CHUYỂN ĐỘNG  ===================== */
@media(prefers-reduced-motion:no-preference){
  /* hero: bản vẽ được quét và vẽ dần, ghế hiện đúng chỗ khi đường quét đi qua */
  .kx-js .bv-plan:not(.is-in) :is(.bv-tc,.bv-ch,.bv-tn,.bv-stage,.bv-tx,.bv-door,.bv-lobby,.bv-mk,.bv-scan,.bv-dim text){opacity:0}
  .kx-js .bv-plan:not(.is-in) :is(.bv-wall,.bv-led,.bv-dim path){stroke-dasharray:1;stroke-dashoffset:1}
  .kx-js .bv-plan.is-in .bv-wall{stroke-dasharray:1;animation:bvDraw 1.2s cubic-bezier(.6,0,.25,1) both}
  .kx-js .bv-plan.is-in .bv-led{stroke-dasharray:1;animation:bvDraw .9s ease .55s both}
  .kx-js .bv-plan.is-in .bv-dim path{stroke-dasharray:1;animation:bvDraw .9s ease 2.7s both}
  .kx-js .bv-plan.is-in :is(.bv-stage,.bv-door,.bv-lobby,.bv-tx){animation:bvFade .8s ease .5s both}
  .kx-js .bv-plan.is-in .bv-dim text{animation:bvFade .6s ease 2.9s both}
  .kx-js .bv-plan.is-in .bv-mk{animation:bvFade .6s ease 3s both}
  .kx-js .bv-plan.is-in :is(.bv-tc,.bv-ch){animation:bvPop .5s cubic-bezier(.3,1.5,.5,1) var(--dl,0s) both}
  .kx-js .bv-plan.is-in .bv-tn{animation:bvFade .4s ease var(--dl,0s) both}
  .kx-js .bv-plan.is-in .bv-scan{animation:bvScan 2.3s linear .45s both}
  .kx-js .bv-plan.is-in.is-live .bv-led{animation:bvLed 3.2s ease-in-out 4s infinite alternate}
  .kx-js .bv-lg.is-on i{animation:bvPulse 1.8s ease-out infinite}
  /* A-02: sơ đồ vẽ lại từng hàng khi đổi kiểu bố trí */
  .kx-js .bv-dg.is-draw .bv-g{animation:bvG .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0)*22ms)}
  /* A-04: dấu kết luận đóng xuống như con dấu */
  .kx-js .bv-st.is-slam{animation:bvSlam .55s cubic-bezier(.2,.9,.3,1.2) both}
  /* A-03 (mobile): cột nội dung trượt vào khi đổi tab */
  @media(max-width:699px){.kx-js .bv-vbi>.bv-col{animation:bvTab .45s cubic-bezier(.16,1,.3,1) both}}
  /* đầu mục: đường kẻ vẽ ra khi hiện */
  .kx-js .bv-head .bv-sh::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.16,1,.3,1) .25s}
  .kx-js .bv-head.kx-in .bv-sh::after{transform:none}
}
@keyframes bvDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bvFade{from{opacity:0}to{opacity:1}}
@keyframes bvPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes bvScan{0%{transform:translateX(0);opacity:1}92%{opacity:1}100%{transform:translateX(404px);opacity:0}}
@keyframes bvLed{from{opacity:.55}to{opacity:1}}
@keyframes bvPulse{0%{box-shadow:0 0 0 0 rgba(255,106,19,.6)}100%{box-shadow:0 0 0 10px rgba(255,106,19,0)}}
@keyframes bvTab{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes bvG{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bv-scan{display:none}
  .bv-sec *,.bv-hero *{transition:none!important;animation:none!important}
}