/* Màu chủ đạo theo MỤC (body[data-sec]): mỗi mục một màu từ icon menu tới điểm nhấn trong trang; chỉ dùng ở các điểm nhấn
   (nhãn nhỏ, tiêu đề lọc, chip/tab đang chọn, phân trang, nút chính) — nền và chữ vẫn trung tính để dễ đọc và phân cấp rõ.
   Màu trạng thái (Đã xác thực xanh, VIP vàng, cảnh báo đỏ) giữ nguyên, không đổi theo mục. */
:root{--sec:#0c9c79;--sec-d:#077a5f;--sec-s:#e2f4ee}
body[data-sec="nha-khoa"]{--sec:#0c9c79;--sec-d:#077a5f;--sec-s:#e2f4ee}
body[data-sec="voucher"]{--sec:#ef7d1a;--sec-d:#c4620d;--sec-s:#fdefe1}
body[data-sec="labo"]{--sec:#1f62d6;--sec-d:#164ba8;--sec-s:#e6eefc}
body[data-sec="vat-tu"]{--sec:#6b4fd8;--sec-d:#5136b3;--sec-s:#efebfc}
body[data-sec="tuyen-dung"]{--sec:#0e8fb3;--sec-d:#0b7898;--sec-s:#e0f4fa}
body[data-sec="dung-cu"]{--sec:#b5651d;--sec-d:#8f4f14;--sec-s:#f8ebdd}
body[data-sec="sang-nhuong"]{--sec:#d6455d;--sec-d:#b0334a;--sec-s:#fbe8eb}
body[data-sec="hoi-nha-si"]{--sec:#c2409b;--sec-d:#9c2f7c;--sec-s:#fae7f4}
body[data-sec="tin-tuc"]{--sec:#3f4a60;--sec-d:#14213d;--sec-s:#eef1f6}
body[data-sec="nha-si"]{--sec:#5d8a1e;--sec-d:#476c14;--sec-s:#eaf3dc}
body[data-sec="bang-gia"]{--sec:#c99a2e;--sec-d:#9c741a;--sec-s:#fbf3df}

/* menu trên: mỗi mục một màu icon riêng; mục đang mở có gạch chân + chữ cùng màu */
nav.menu .c-v i{color:#ef7d1a} nav.menu .c-n i{color:#0c9c79} nav.menu .c-l i{color:#1f62d6}
nav.menu .c-vt i{color:#6b4fd8} nav.menu .c-j i{color:#0e8fb3} nav.menu .c-d i{color:#b5651d}
nav.menu .c-s i{color:#d6455d} nav.menu .c-q i{color:#c2409b} nav.menu .c-b i{color:#3f4a60}
nav.menu .c-ns i{color:#5d8a1e!important} nav.menu .c-bg i{color:#c99a2e!important}
nav.menu a.c-v.on{color:#c4620d} nav.menu a.c-v.on::after{background:#ef7d1a}
nav.menu a.c-n.on{color:#077a5f} nav.menu a.c-n.on::after{background:#0c9c79}
nav.menu a.c-l.on{color:#164ba8} nav.menu a.c-l.on::after{background:#1f62d6}
nav.menu a.c-vt.on{color:#5136b3} nav.menu a.c-vt.on::after{background:#6b4fd8}
nav.menu a.c-j.on{color:#0b7898} nav.menu a.c-j.on::after{background:#0e8fb3}
nav.menu a.c-d.on{color:#8f4f14} nav.menu a.c-d.on::after{background:#b5651d}
nav.menu a.c-s.on{color:#b0334a} nav.menu a.c-s.on::after{background:#d6455d}
nav.menu a.c-q.on{color:#9c2f7c} nav.menu a.c-q.on::after{background:#c2409b}
nav.menu a.c-b.on{color:#14213d} nav.menu a.c-b.on::after{background:#3f4a60}
nav.menu a.c-ns.on{color:#476c14} nav.menu a.c-ns.on::after{background:#5d8a1e}
nav.menu a.c-bg.on{color:#9c741a} nav.menu a.c-bg.on::after{background:#c99a2e}

/* điểm nhấn trong trang theo màu mục (trang chủ / trang chung giữ màu thương hiệu) */
body[data-sec] .eyebrow,body[data-sec] .lp-hd .eyebrow{color:var(--sec-d)}
body[data-sec] .sh i,body[data-sec] .fgrp h6>i:first-child{color:var(--sec)!important}
body[data-sec] .tbar .cnt b{color:var(--sec-d)}
body[data-sec] .pill.on,body[data-sec] .tabs .tab.on{border-color:var(--sec);background:var(--sec-s);color:var(--sec-d)}
body[data-sec] .pill.on i,body[data-sec] .tab.on i{color:var(--sec)!important}
body[data-sec] nav.pager a.on{background:var(--sec);border-color:var(--sec);color:#fff}
body[data-sec] .ptabs a.on::after{background:var(--sec)}
body[data-sec] .lp-ic{background:var(--sec-s);color:var(--sec)}
body[data-sec] .lp-tag{color:var(--sec-d);background:var(--sec-s)}
body[data-sec] .active-f .af{border-color:var(--sec);color:var(--sec-d);background:var(--sec-s)}
/* nút chính trong nội dung theo màu mục (nút trạng thái/VIP/cảnh báo giữ nguyên) */
body[data-sec] main .btn-mint{background:var(--sec);border-color:var(--sec);color:#fff}
body[data-sec] main .btn-mint:hover{background:var(--sec-d);border-color:var(--sec-d)}
body[data-sec] main .layout .side .sh{border-bottom-color:var(--sec-s)}

/* ===== Biểu mẫu "Đặt câu hỏi cho nha sĩ" (hoi-nha-si): nổi bật, chia 3 bước rõ ràng ===== */
.askf{padding:0;overflow:hidden;border:1px solid var(--sec);box-shadow:0 6px 24px -10px rgba(20,33,61,.25)}
.askf-hd{display:flex;gap:14px;align-items:center;padding:18px 20px;color:#fff;background:linear-gradient(120deg,var(--sec) 0%,var(--sec-d) 100%)}
.askf-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:rgba(255,255,255,.18);flex:none}
.askf-hd h2{margin:0;font-size:19px;letter-spacing:-.3px;color:#fff}
.askf-hd p{margin:3px 0 0;font-size:12.5px;color:rgba(255,255,255,.9);line-height:1.4}
.askf .askf-bd{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px;padding:20px}
.askf-st{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.askf-st legend{display:flex;align-items:center;gap:9px;padding:0;margin-bottom:10px;font-weight:800;font-size:15px;color:var(--ink)}
.askf-st legend em{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12.5px;background:var(--sec);color:#fff;flex:none}
.askf-st legend small{font-weight:600;font-size:12px;color:var(--ink-3)}
.askf .form-label{font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0 0 5px}
.askf .form-label b{color:var(--rose)}
form.askf .askf-bd .form-control{background:#fff;border:1.5px solid #cfd6e2;height:44px;font-size:14px;color:var(--ink);border-radius:6px}
form.askf .askf-bd .form-control::placeholder{color:#8d96a8}
form.askf .askf-bd .form-control:focus{border-color:var(--sec);box-shadow:0 0 0 3px var(--sec-s)}
form.askf .askf-bd textarea.askf-ta{height:auto;min-height:130px;padding:12px 14px;line-height:1.55;resize:vertical}
.askf-topics{display:flex;flex-wrap:wrap;gap:8px}
.askf-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid #d5dbe6;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:border-color .12s,background .12s}
.askf-chip i{font-size:16px;color:var(--ink-3)}
.askf-chip input{position:absolute;opacity:0;pointer-events:none}
.askf-chip:hover{border-color:var(--sec)}
.askf-chip:has(input:checked){border-color:var(--sec);background:var(--sec-s);color:var(--sec-d)}
.askf-chip:has(input:checked) i{color:var(--sec)}
.askf-chip:has(input:focus-visible){outline:2px solid var(--sec);outline-offset:2px}
.askf-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-3);line-height:1.4}
.askf-meta i{color:var(--gold);margin-right:5px}
.askf-cnt{white-space:nowrap;font-variant-numeric:tabular-nums}
.askf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.askf-grid>div{min-width:0}
.askf-seg{display:grid;grid-template-columns:1fr 1fr;height:44px;border:1.5px solid #cfd6e2;border-radius:6px;overflow:hidden;background:#fff}
.askf-seg label{display:grid;place-items:center;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-2)}
.askf-seg label+label{border-left:1.5px solid #cfd6e2}
.askf-seg input{position:absolute;opacity:0;pointer-events:none}
.askf-seg label:has(input:checked){background:var(--sec-s);color:var(--sec-d);box-shadow:inset 0 -3px 0 var(--sec)}
.askf-drop{position:relative;display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border:1.5px dashed #aab4c6;border-radius:6px;background:#fafbfd;color:var(--ink-2);font-size:13px;cursor:pointer}
.askf-drop:hover{border-color:var(--sec);background:var(--sec-s)}
.askf-drop i{font-size:20px;color:var(--sec);flex:none}
.askf-drop span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.askf-drop input{position:absolute;opacity:0;width:1px;height:1px}
.askf-hint{display:block;margin-top:5px;font-size:12px;color:var(--ink-3);line-height:1.4}
.askf-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.askf-consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--sec);flex:none}
.askf-submit{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border:0;border-radius:8px;font:inherit;font-size:15.5px;font-weight:800;color:#fff;background:var(--sec);cursor:pointer;box-shadow:0 4px 0 var(--sec-d)}
.askf-submit:hover{background:var(--sec-d);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.askf-submit:active{transform:translateY(2px);box-shadow:0 2px 0 var(--sec-d)}
@media (max-width:560px){.askf-grid{grid-template-columns:minmax(0,1fr)}.askf-hd{padding:14px 16px}.askf .askf-bd{padding:16px;gap:18px}.askf-meta{flex-direction:column;gap:4px}}

/* ===== Đầu trang Bảng giá & quyền lợi: sáng, nhiều màu theo từng hạng, bậc thang minh hoạ cấp bậc ===== */
.bgh{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:center;margin-top:12px;padding:30px 30px 26px;border:1px solid #e9e3d2;border-radius:16px;
  background:radial-gradient(circle at 0% 0%,#fff3d3 0,transparent 42%),radial-gradient(circle at 100% 0%,#e6eefc 0,transparent 38%),radial-gradient(circle at 100% 100%,#f1eaff 0,transparent 42%),linear-gradient(180deg,#fffdf8,#fff);box-shadow:0 14px 40px -22px rgba(20,33,61,.35)}
.bgh::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#9aa4b5 0%,#0c9c79 22%,#ef7d1a 46%,#c99a2e 70%,#6b4fd8 100%)}
.bgh-l{min-width:0}
.bgh .eyebrow{color:#9c741a;letter-spacing:.14em}
.bgh h1{margin:6px 0 10px;font-size:30px;line-height:1.2;letter-spacing:-.8px;color:var(--ink)}
.bgh h1 .bgh-hl{background:linear-gradient(100deg,#c99a2e,#ef7d1a 60%,#d6455d);-webkit-background-clip:text;background-clip:text;color:transparent}
.bgh-l>p{margin:0 0 18px;max-width:560px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.bgh-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bgh-pts li{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.85)}
.bgh-pts li>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px;flex:none}
.bgh-pts .c1>span{background:#fdefe1;color:#ef7d1a}
.bgh-pts .c2>span{background:#e6eefc;color:#1f62d6}
.bgh-pts .c3>span{background:#e2f4ee;color:#0c9c79}
.bgh-pts b{display:block;font-size:14px;color:var(--ink)}
.bgh-pts small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.bgh-r{min-width:0;display:grid;gap:12px}
.lad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;align-items:end;height:230px}
.lad .st{position:relative;display:grid;align-content:start;justify-items:center;gap:6px;padding:12px 4px 8px;border-radius:12px 12px 6px 6px;text-align:center;color:#fff;box-shadow:0 10px 22px -12px rgba(20,33,61,.5)}
.lad .st i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(255,255,255,.22)}
.lad .st b{font-size:11.5px;line-height:1.25;font-weight:800}
.lad .st em{font-style:normal;font-size:10px;line-height:1.25;opacity:.9;font-weight:600}
.lad .s0{height:88px;background:linear-gradient(180deg,#aab3c2,#8a94a7)}
.lad .s1{height:116px;background:linear-gradient(180deg,#25bd97,#0a8a6b)}
.lad .s2{height:146px;background:linear-gradient(180deg,#ff9a40,#e2680c)}
.lad .s3{height:182px;background:linear-gradient(180deg,#3a3320,#17140c);color:#f3c969}
.lad .s3 i{background:rgba(243,201,105,.18);color:#f3c969}
.lad .s4{height:230px;background:linear-gradient(180deg,#8a6df0 0%,#6b4fd8 55%,#c99a2e 130%);box-shadow:0 14px 28px -10px rgba(107,79,216,.7)}
.lad .s4::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);pointer-events:none}
.bgh-r .cap{display:flex;gap:7px;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.bgh-r .cap i{color:#0c9c79;font-size:16px}
@media (max-width:860px){.bgh{grid-template-columns:minmax(0,1fr);padding:22px 18px 20px;gap:22px}.bgh h1{font-size:26px}.lad{height:200px}.lad .s0{height:96px}.lad .s1{height:120px}.lad .s2{height:146px}.lad .s3{height:172px}.lad .s4{height:200px}.lad .st b{font-size:10.5px}}

/* Đầu trang (thanh trên cùng + logo/tìm kiếm + menu) rộng hết màn hình trên máy tính; nội dung trang vẫn giữ độ rộng đọc thoải mái */
@media (min-width:1000px){
  .util>.wrap,header.main>.wrap{max-width:none;padding-left:28px;padding-right:28px}
}
/* icon nhà ở menu: căn chính giữa ô, không lệch xuống so với chữ các mục khác */
nav.menu a.home{padding:0 12px;justify-content:center;align-items:center}
nav.menu a.home i{display:grid;place-items:center;width:22px;height:22px;margin:0;line-height:1;font-size:20px}

/* ===== Ô tìm kiếm trong trang (sbox2) + nền mặc định cho .form-control ngoài biểu mẫu CMS ===== */
.sbox2{display:flex;gap:8px;margin:12px 0}
.sbox2 .sbx{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;background:#fff;border:1.5px solid #cfd6e2;border-radius:10px;color:var(--ink-3);transition:border-color .12s,box-shadow .12s}
.sbox2 .sbx:focus-within{border-color:var(--sec);box-shadow:0 0 0 3px var(--sec-s);color:var(--sec)}
.sbox2 .sbx i{font-size:19px;flex:none}
.sbox2 .sbx input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--ink)}
.sbox2 .sbx input::placeholder{color:#8d96a8}
.sbox2 .sbtn{flex:none;height:46px;padding:0 22px;border:0;border-radius:10px;font:inherit;font-weight:800;font-size:14px;color:#fff;background:var(--sec);cursor:pointer;box-shadow:0 3px 0 var(--sec-d)}
.sbox2 .sbtn:hover{background:var(--sec-d)}
.sbox2 .sbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sec-d)}
:where(.form-control){box-sizing:border-box;width:100%;min-height:40px;padding:0 12px;background:#fff;border:1.5px solid #cfd6e2;border-radius:8px;font:inherit;font-size:14px;color:var(--ink)}
:where(.form-control:focus){outline:0;border-color:var(--sec);box-shadow:0 0 0 3px var(--sec-s)}

/* Menu chính: trải đều theo bề rộng đầu trang (máy tính); mục "Nha sĩ" nền nhẹ để nổi bật */
@media (min-width:1000px){
  nav.menu{justify-content:space-between;gap:0}
  nav.menu .sp{display:none}
  nav.menu a{padding:0 clamp(8px,.9vw,20px)}
}
@media (min-width:1500px){nav.menu a{font-size:14px}}
nav.menu a.c-ns{background:#eaf3dc;color:#476c14;font-weight:700;border-radius:8px;margin:6px 0;padding-left:14px;padding-right:14px}
nav.menu a.c-ns:hover{background:#dcebc6}
nav.menu a.c-ns.on{background:#d3e6b8}
nav.menu a.c-ns.on::after{display:none}

/* Thẻ danh sách: hàng "SĐT ẩn · Chỉ đường · Lưu" không xuống dòng, vừa khít cột nút */
.lr .act .mini-i{gap:4px;flex-wrap:nowrap;white-space:nowrap;font-size:11px}
.lr .act .mini-i>*{white-space:nowrap;flex:none;min-width:0}
.lr .act .mini-i i{font-size:11px}
.lr{grid-template-columns:72px minmax(0,1fr) 184px}
.lr.pic{grid-template-columns:208px minmax(0,1fr) 184px}