/* ===== Tư vấn chọn mẫu + khung chat nhân viên ===== */
.tv-sec{background:#fff}
.tv-box{margin-top:26px;background:#fff;border:1.5px solid var(--border);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:22px;max-width:760px}
.tv-prog{display:flex;gap:6px;margin-bottom:16px}
.tv-prog i{flex:1;height:6px;border-radius:4px;background:var(--border)}
.tv-prog i.on{background:var(--orange)}
.tv-q{font-size:clamp(18px,2.4vw,22px);font-weight:800;font-family:'Montserrat','Be Vietnam Pro',sans-serif;margin:0 0 14px}
.tv-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.tv-opt{min-height:56px;text-align:left;padding:12px 14px;border-radius:12px;border:1.5px solid #E3C8AE;background:#fff;font:inherit;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer}
.tv-opt small{display:block;font-weight:500;color:var(--muted);font-size:13px;margin-top:2px}
.tv-opt:hover,.tv-opt:focus-visible{border-color:var(--orange);background:var(--soft);outline:none}
.tv-back{margin-top:14px;background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:6px 0}
.tv-res .tv-k{font-size:13px;font-weight:700;color:var(--accent-dark);text-transform:uppercase;letter-spacing:.4px}
.tv-res h3{font-size:clamp(22px,3vw,28px);margin:6px 0 8px}
.tv-why{color:var(--muted);font-size:15px}
.tv-price{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.tv-price>div{border:1.5px solid var(--border);border-radius:12px;padding:12px 14px}
.tv-price>div.on{border-color:var(--orange);background:var(--soft)}
.tv-price span{display:block;font-size:13px;color:var(--muted)}
.tv-price b{font-size:20px;font-family:'Montserrat',sans-serif}
.tv-perk{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:6px;font-size:15px}
.tv-perk li::before{content:"✓ ";color:var(--accent);font-weight:800}
.tv-cta{display:flex;flex-wrap:wrap;gap:10px}
.tv-cta .btn{flex:1 1 200px}
.tv-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.tv-alt p{font-size:14px;color:var(--muted);margin-bottom:8px}
.tv-alt .alt{display:inline-flex;margin:0 8px 8px 0;padding:8px 12px;border-radius:999px;border:1.5px solid #E3C8AE;background:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tv-alt .alt:hover{border-color:var(--orange)}
.tv-foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:14px}
.tv-foot button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--accent-dark);cursor:pointer;text-decoration:underline}
.tv-warn{background:#FFF4E0;color:#8A5400;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:12px}
/* ---- khung chat ---- */
.cb-fab{position:fixed;left:14px;bottom:92px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 18px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-weight:800;font-size:15px;box-shadow:0 8px 22px rgba(217,106,0,.35);cursor:pointer}
.cb-fab:hover{background:var(--accent-dark)}
@media(min-width:760px){.cb-fab{left:22px;bottom:26px}}
.cb-panel{position:fixed;z-index:70;left:0;right:0;bottom:0;height:min(78vh,620px);background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden}
.cb-panel[hidden]{display:none}
@media(min-width:760px){.cb-panel{left:22px;right:auto;bottom:26px;width:380px;height:560px;border-radius:18px}}
.cb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--accent);color:#fff}
.cb-h b{display:block;font-size:16px}
.cb-h small{font-size:12.5px;opacity:.92}
.cb-h button{background:rgba(255,255,255,.18);border:0;color:#fff;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer;flex:none}
.cb-ms{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#FAFAFA}
.cb-m{max-width:82%;padding:9px 12px;border-radius:14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.cb-m.staff{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px}
.cb-m.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:#FAFAFA}
.cb-chips button{border:1.5px solid #E3C8AE;background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.cb-chips button:hover{border-color:var(--orange)}
.cb-f{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#fff}
.cb-f input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:44px;padding:0 12px;border:1px solid #E3C8AE;border-radius:10px}
.cb-f input:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.cb-f button{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.cb-chips[hidden]{display:none}
/* ===== nút liên hệ góc (học theo didongtot.shop) ===== */
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
@media(max-width:860px){.fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.fab-main{width:54px;height:54px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(217,106,0,.35);cursor:pointer;transition:transform .2s ease}
.fab.open .fab-main{transform:rotate(45deg)}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fab-menu[hidden]{display:none}
.fm{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:0;border-radius:999px;padding:6px 6px 6px 14px;box-shadow:0 6px 18px rgba(0,0,0,.18);font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.fm i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;font-style:normal;font-size:12px;font-weight:800}
.fm.c i{background:var(--accent)}.fm.z i{background:#0068ff}.fm.p i{background:#16a34a}.fm.m i{background:#f59e0b}
@media(max-width:560px){.fm{font-size:13px}.fab-main{width:50px;height:50px}}
.cb-panel{bottom:0}

/* điểm nổi bật: 3 tính năng, mục khác biệt được tô màu */
.sp-tn li.hl span{font-weight:800;color:var(--accent-dark)}
/* hai nút trong thẻ sản phẩm chia đều, không tràn khỏi thẻ */
.sp-nut{display:flex;gap:8px;align-items:stretch}
.sp-nut .btn{flex:1 1 0;min-width:0;padding:0 10px;white-space:nowrap;font-size:15px}
.sp-nut .btn svg{display:none}

/* quiz: lựa chọn có ảnh minh họa */
.tv-opt.has-img{display:flex;flex-direction:column;gap:8px;padding:10px}
.tv-opt img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#faf5f0;border-radius:8px}
.tv-opt .tv-t{display:block}
@media (max-width:600px){
  .tv-opt.has-img{display:grid;grid-template-columns:88px 1fr;column-gap:12px;row-gap:2px;align-items:center;padding:10px 12px}
  .tv-opt.has-img img{grid-row:1 / span 2;width:88px;height:88px;aspect-ratio:auto}
  .tv-opt.has-img .tv-t{align-self:end}
  .tv-opt.has-img small{align-self:start;margin-top:0}
}

/* quiz: 4 lựa chọn vị trí */
.tv-opts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:600px){.tv-opts{grid-template-columns:1fr}}
/* khối dưới sản phẩm: cân đối */
.sp-noi{gap:8px}
.tron-goi{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.tron-goi strong{display:inline;margin:0;font-size:17px}
.sp-noibat .tron-goi strong{display:inline}
.tv-opt img[src*="/anh/imou-"]{object-fit:contain}
.tv-opt.has-img img{height:auto}
@media (max-width:600px){.tv-opt.has-img img{height:88px}}

/* gợi ý nhanh ở đầu bảng giá */
.goi-nhanh{margin:6px 0 26px}
.gn-tieude{font-size:18px;margin:0 0 12px}
/* tên mẫu trong kết quả quiz là link xuống thẻ sản phẩm */
.tv-name{color:inherit;text-decoration:none}
.tv-name small{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-dark,#c2410c);margin-left:6px;vertical-align:middle}
.tv-alt a.alt{text-decoration:none}
.sp-flash{animation:spFlash 2s ease-out}
@keyframes spFlash{0%,40%{box-shadow:0 0 0 4px var(--accent,#f28506)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.sp-flash{animation:none;outline:3px solid var(--accent,#f28506)}}
/* Thẻ sản phẩm trên điện thoại: giữ bố cục như máy tính, ảnh bên trái, 3 tính năng bên phải, icon to rõ */
.sp-tn svg{width:26px;height:26px}
.sp-tn li{font-size:12.5px}
@media(max-width:560px){
  .sp:not(.sp-noibat){grid-template-columns:minmax(0,1fr) 116px;grid-template-areas:"hinh tn" "noi noi" "nut nut";grid-template-rows:auto auto auto}
  .sp:not(.sp-noibat) .sp-hinh{padding:42px 0 4px 12px;align-items:center}
  .sp:not(.sp-noibat) .sp-hinh img{max-width:190px}
  .sp:not(.sp-noibat) .sp-tn{flex-direction:column;justify-content:center;align-items:stretch;gap:16px;margin:0;padding:42px 12px 4px 4px;border-top:0}
  .sp:not(.sp-noibat) .sp-tn li{flex:none}
  .sp:not(.sp-noibat) .sp-noi{padding:12px 16px 0}
  .sp:not(.sp-noibat) .sp-nut{padding:12px 16px 16px}
}
@media(max-width:560px){.sp-noibat .sp-anhlon{order:-1;flex-basis:100%;min-height:0;aspect-ratio:4/3}}
@media(max-width:560px){.sp-noibat .sp-noi{padding-top:18px}}
/* Phiên bản (3MP…) và giá nằm cùng một hàng trên điện thoại (thẻ rộng cả màn hình); máy tính thẻ hẹp nên giữ xếp dọc */
@media(max-width:560px){
.sp:not(.sp-noibat) .sp-noi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ten ten" "ban nhan" "ban gia" "km km" "goi goi";column-gap:10px;row-gap:4px;align-content:start}
.sp:not(.sp-noibat) .sp-noi>h3{grid-area:ten}
.sp:not(.sp-noibat) .sp-ban{grid-area:ban;align-self:end;margin:0 0 6px}
.sp:not(.sp-noibat) .sp-gia{display:contents}
.sp:not(.sp-noibat) .gia-nhan{grid-area:nhan;justify-self:end;align-self:end;margin:0}
.sp:not(.sp-noibat) .sp-gia>b{grid-area:gia;justify-self:end;margin:0}
.sp:not(.sp-noibat) .gia-km{grid-area:km;margin-top:6px}
.sp:not(.sp-noibat) .tron-goi{grid-area:goi}
}
/* Bảo hành + quà: 1 dòng, chữ nhỏ */
.gia-km{display:flex;flex-wrap:wrap;gap:2px 12px;margin:4px 0 0;padding:0}
.gia-km li{font-size:12px;line-height:1.35;margin:0}
.sp:not(.sp-noibat) .gia-km{margin-top:2px}
/* Gợi ý nhanh nằm ngay dưới quiz */
.tv-sec .goi-nhanh{margin:28px 0 8px}
/* Đầu trang: 2 nút cùng hàng trên điện thoại */
@media(max-width:560px){.hero .nut{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero .nut .btn{width:100%;padding:0 8px;font-size:15px;white-space:nowrap}}
.gia-km{gap:2px 10px}
.gia-km li{padding-left:14px;letter-spacing:-.1px}
/* Viền cho mọi thẻ sản phẩm; thẻ Bán chạy giữ viền cam đậm */
.sp{box-shadow:inset 0 0 0 1.5px #EBD6BF}
.sp:hover{box-shadow:inset 0 0 0 1.5px #E0C2A0,0 8px 24px rgba(0,0,0,.06)}
.sp.sp-hot{box-shadow:inset 0 0 0 2px #FF8A3D}
.sp.sp-hot:hover{box-shadow:inset 0 0 0 2px #FF8A3D,0 8px 24px rgba(0,0,0,.06)}

/* Form để lại số: xác nhận tại chỗ */
.gl-ok{grid-column:1/-1;display:grid;gap:8px;justify-items:start}
.gl-ok b{font-size:18px;color:var(--accent-dark,#c2410c)}
.gl-ok p{margin:0;color:var(--text,#333)}
.gl-err{grid-column:1/-1;margin:4px 0 0;color:#C81E1E;font-size:14px}
/* ===== Mẹo & hướng dẫn ===== */
#meo{padding-block:56px}
.bv-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:18px}
.bv{display:flex;flex-direction:column;background:#fff;border:1.5px solid #EBD6BF;border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s}
.bv:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
.bv:focus-visible{outline:3px solid var(--accent,#f28506);outline-offset:2px}
.bv img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#F3EDE6}
.bv-noi{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.bv-cm{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--accent-dark,#c2410c)}
.bv b{font-size:17px;line-height:1.35;text-wrap:balance}
.bv-tt{font-size:14px;line-height:1.5;color:var(--muted,#666)}
.bv-xem{display:inline-block;margin-top:18px;font-weight:700;color:var(--accent-dark,#c2410c);text-decoration:none}
.bv-xem:hover{text-decoration:underline}
.bv-trang{padding-block:36px 56px}
.bv-trang h1,.bv-bai h1{font-size:clamp(26px,5vw,36px);line-height:1.2;margin:6px 0 10px;text-wrap:balance}
.bv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bv-tab{padding:8px 16px;border-radius:999px;border:1px solid #E0E0E0;background:#fff;color:inherit;text-decoration:none;font-weight:600;font-size:14px}
.bv-tab.on{background:#1f1f1f;border-color:#1f1f1f;color:#fff}
.bv-bai{padding-block:28px 56px}
.bv-bai .hep{max-width:720px}
.crumb{font-size:13px;color:var(--muted,#666);margin:0}
.crumb a{color:inherit}
.post-cover{width:100%;border-radius:14px;margin:14px 0 6px;aspect-ratio:16/9;object-fit:cover}
.post-body{font-size:17px;line-height:1.7}
.post-body h2,.post-body h3{font-size:20px;line-height:1.35;margin:28px 0 8px}
.post-body p{margin:0 0 14px}
.post-body ul{margin:0 0 16px;padding-left:22px}
.post-body li{margin:4px 0}
.post-body a{color:var(--accent-dark,#c2410c)}
.post-cta{margin:30px 0 8px;padding:20px;border-radius:16px;background:#FFF6EC;border:1.5px solid #FFD2A6;display:grid;gap:8px}
.post-cta b{font-size:18px}
.post-cta p{margin:0}
.post-cta-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bv-lq{font-size:22px;margin:40px 0 0}
@media(max-width:560px){#meo{padding-block:40px}.bv-luoi{grid-template-columns:1fr;gap:14px}.post-body{font-size:16px}.post-cta-nut .btn{flex:1 1 100%}}
/* ===== Rà soát giao diện điện thoại ===== */
/* Thanh dưới: Chat là nút chính, Zalo và Gọi gọn bên cạnh; ẩn nút + vì trùng chức năng */
.callbar .cb-chat{flex:1.6 1 0}
.callbar .cb-zalo,.callbar .cb-goi{flex:.8 1 0;padding:0 8px}
.callbar .cb-zalo{color:#0068FF;border-color:#0068FF;font-weight:800}
@media(max-width:899px){.fab{display:none}}
/* Ảnh đầu trang nhỏ lại để quiz lên gần hơn */
@media(max-width:560px){.hi{max-width:230px;margin-top:-6px}}
/* Xem nhanh mẫu: lưới 2 cột gọn, bỏ mô tả dài */
@media(max-width:560px){
  .goi-nhanh .nc{grid-template-columns:1fr 1fr;gap:10px}
  .goi-nhanh .nc-the{padding:12px}
  .goi-nhanh .nc-the>p{display:none}
  .goi-nhanh .nc-dau{gap:8px;min-height:0}
  .goi-nhanh .nc-dau .ic-tron{width:32px;height:32px;flex:0 0 32px}
  .goi-nhanh .nc-dau .ic-tron svg{width:16px;height:16px}
  .goi-nhanh .nc-the h3{font-size:14.5px;line-height:1.25;min-height:0}
  .goi-nhanh .goi-y{margin-top:8px;padding-top:8px;gap:6px}
  .goi-nhanh .goi-y span{display:none}
  .goi-nhanh .goi-y a{font-size:12.5px;padding:4px 9px}
}
.bv img,.post-cover{height:auto}
/* Điện thoại: thẻ bài dạng ngang gọn, ảnh nhỏ bên trái */
@media(max-width:560px){
  .bv{flex-direction:row;align-items:stretch}
  .bv img{width:116px;flex:0 0 116px;aspect-ratio:1;height:auto;object-fit:cover}
  .bv-noi{padding:10px 12px;gap:4px;min-width:0}
  .bv b{font-size:15px}
  .bv-tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
}
.bv-luoi{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}@media(max-width:560px){.bv-luoi{grid-template-columns:1fr}}