/*
 * CHUẨN GIAO DIỆN TOÀN TRANG (14/10) — xem docs/CHUAN-GIAO-DIEN.md.
 * Nạp SAU các p-*.css khác, TRƯỚC p-type.css. Chỉ chứa: token khoảng cách/chiều cao, điều khiển (ô nhập/nút/chip), nhãn + lưới biểu mẫu,
 * thẻ liên hệ (.ctc), trạng thái rỗng/lỗi/đang tải. Luật riêng từng trang vẫn ở tệp của trang đó nhưng PHẢI dùng các token này.
 */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;   /* thang khoảng cách */
  --h-ctl:34px;      /* ô nhập / nút / chip chuẩn (16/10: 36 → 34, gọn hơn) */
  --h-ctl-sm:30px;   /* nút nhỏ / chip trong thanh lọc (32 → 30) */
  --h-tap:44px;      /* vùng bấm tối thiểu trên điện thoại */
  --fs-ctl:13px;     /* chữ trong ô nhập, nút */
}

/* ---------- ô nhập ---------- */
.form-control,.cms-form .form-control{font-size:var(--fs-ctl);border-radius:var(--r);min-height:var(--h-ctl)}
.form-control:not(textarea):not([type=checkbox]):not([type=radio]){height:var(--h-ctl)}
textarea.form-control,.cms-form textarea.form-control{height:auto;min-height:84px;padding:8px 10px;line-height:1.5;resize:vertical}
.form-control::placeholder,.inp input::placeholder,.ta textarea::placeholder{color:#8d96a8}
.form-control:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s);outline:0}
.inp{min-height:var(--h-ctl);border-radius:var(--r)}
.inp input,.inp select{font-size:var(--fs-ctl)}
.ta{border-radius:var(--r);font-size:var(--fs-ctl);min-height:84px}
.ta textarea{font-size:var(--fs-ctl);line-height:1.5;min-height:84px}
.form-control.is-locked,.inp .is-locked{background:var(--bg-3);color:var(--ink-2);cursor:not-allowed}

/* ---------- nhãn, gợi ý, lưới ---------- */
.form-label,.fl label{font-size:12px;font-weight:var(--fw-medium);color:var(--ink-2);margin:0 0 var(--s-1);line-height:1.4}
.fl{gap:var(--s-1)}
.fl .hint,.form-hint,.hint2{font-size:var(--t-meta);color:var(--ink-3);line-height:1.45}
.fgrid{gap:var(--s-3)}
.fgrid3,.acct .fgrid3{gap:var(--s-3)}
@media (max-width:760px){
  .fgrid,.fgrid3,.acct .fgrid3{grid-template-columns:minmax(0,1fr)}
  .form-control,.inp,.inp input,.inp select{min-height:var(--h-tap)}
  .inp input,.inp select{height:calc(var(--h-tap) - 2px)}
}

/* ---------- nút ---------- */
.btn{height:var(--h-ctl);border-radius:var(--r)}
.btn-sm{height:var(--h-ctl-sm)}
.btn-mint,.btn-blue{font-weight:var(--fw-semi)}
@media (max-width:760px){.btn:not(.btn-sm):not(.btn-xs){min-height:40px}.btn-sm{min-height:36px}}

/* ---------- chip / pill / tab ---------- */
.pill{height:var(--h-ctl-sm);border-radius:var(--r)}
.tab{border-radius:var(--r)}

/* ---------- thẻ liên hệ (.bk.ctc): đầu thẻ màu như thẻ Đặt hẹn, thân gọn, mọi dòng cao 36px ---------- */
.ctc .bd{padding:var(--s-3) var(--s-4) var(--s-4);gap:var(--s-3)}
.ctc .who{display:flex;gap:var(--s-3);align-items:center}
.ctc .who .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none}
.ctc .who b{display:block;font-size:var(--t-title);font-weight:var(--fw-semi);line-height:1.3}
.ctc .who small{display:block;font-size:var(--t-meta);color:var(--ink-3);line-height:1.4;margin-top:1px}
.ctc .lockph{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s-2);min-height:var(--h-ctl);padding:0 var(--s-2) 0 var(--s-3);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);font-size:var(--t-body);font-weight:700;letter-spacing:.02em}
.ctc .lockph i{font-size:16px;color:var(--mint);flex:none}
.ctc .lockph .pmask{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-semi);letter-spacing:.04em}
.ctc .lockph .btn{margin-left:auto;flex:none}
.ctc .lockph.none{padding-right:var(--s-3);font-weight:500;letter-spacing:0;font-size:13px;color:var(--ink-3);background:var(--bg-2)}
.ctc .lockph.none i{color:var(--ink-4)}
.ctc .hint2{display:flex;gap:6px;align-items:flex-start;padding:0}
.ctc .hint2 i{font-size:14px;margin-top:1px}
.ctc .msgd{border-top:0;padding-top:0}
.ctc .msgd summary{display:flex;justify-content:center;width:100%}
.ctc .msgd .msgd-b{padding-top:var(--s-2)}
.ctc .chatbox{margin:0}
.ctc .chatbtn{min-height:var(--h-ctl);padding:0 var(--s-4);font-size:14px;font-weight:var(--fw-semi);gap:var(--s-2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.ctc .chatbtn:hover{transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.ctc .chatbtn>i{font-size:18px}
.ctc .chatnote{margin-top:6px;text-align:left;font-size:var(--t-meta)}
/* nút Chat chưa mở: nhìn là "chưa dùng được" (mờ, phẳng, 36px), không phải khối xám to */
.chatbtn.off{min-height:var(--h-ctl)!important;background:var(--bg-2)!important;color:var(--ink-3)!important;border:1px solid var(--line);font-size:13px!important;font-weight:600!important;box-shadow:none!important;gap:var(--s-2)}
.chatbtn.off>i{font-size:16px!important;color:var(--ink-4)}

/* ---------- trạng thái rỗng / lỗi / đang tải (dùng lại, không tự vẽ kiểu khác) ---------- */
.st-empty,.st-err{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border:1px dashed var(--line);border-radius:var(--r);background:var(--bg-2);color:var(--ink-2);font-size:var(--t-body);line-height:1.6}
.st-empty>i,.st-err>i{font-size:20px;color:var(--ink-4);flex:none;margin-top:1px}
.st-err{border-style:solid;border-color:#f0c2ca;background:var(--rose-s)}
.st-err>i{color:var(--rose)}
.st-load{height:14px;border-radius:var(--r);background:linear-gradient(90deg,var(--bg-3) 25%,#f8fafc 50%,var(--bg-3) 75%);background-size:200% 100%;animation:st-sh 1.2s linear infinite}
@keyframes st-sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.st-load{animation:none}}
.lockline{border-radius:var(--r)}
.lockline .btn{margin:2px 0 2px var(--s-2);vertical-align:middle}

/* ---------- nút Chat / nút hành động lớn: một cỡ chuẩn 40px (trước 48px + bóng đổ nặng, mỗi trang một kiểu) ---------- */
.chatbtn{min-height:40px;font-size:14px;gap:var(--s-2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.chatbtn>i{font-size:18px}
.chatbtn:hover{transform:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
.chatnote{font-size:var(--t-meta)}

/* ---------- số liệu nhanh (.kpi) & hàng ưu đãi trong bảng quản lý ---------- */
.acct .kpi>div{min-width:0;flex:1 1 auto}
.acct .kpi .tr{white-space:nowrap;flex:none}
/* hàng "Voucher & Flash Sale" ở cột hẹp: tên một hàng (2 dòng tối đa), thanh tiến độ ngay dưới, nhãn trạng thái bên phải */
.acct .vrow:has(>.st){grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-1)}
.acct .vrow:has(>.st)>div:nth-child(2){grid-column:1;grid-row:2}
.acct .vrow:has(>.st)>.st{grid-column:2;grid-row:1/3;align-self:center}
.acct .vrow:has(>.st)>div:first-child b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- đồng bộ bo góc cho chip/nhãn lạc chuẩn (trước: 8/10/14/999px) — chỉ avatar/logo/điểm đếm mới tròn ---------- */
.chips2 button,.teethlegend button,.ast-chips button,.ast-fb button{border-radius:var(--r)}
.ptop .ptags span,.hc-tag,.pin-tag,.fsrow-off .fo-tag,.ab-bento .tag{border-radius:var(--r-s)}
.opssearch select{border-radius:var(--r);height:var(--h-ctl-sm)}
.ast-chips button{border-width:1px}

/* ---------- chọn loại tin (Đăng tin): 2×2 trên điện thoại, thẻ gọn ---------- */
.type-c{border-width:1px}
@media (max-width:760px){
  .types{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .type-c{padding:var(--s-3) var(--s-2)}
  .type-c .ic{width:32px;height:32px;font-size:17px;margin-bottom:var(--s-1)}
  .lockline .btn{margin:var(--s-2) var(--s-2) 0 0}
}

/* ---------- chữ nhỏ nhất 11px (logo "NHA KHOA", chữ cái avatar), màu huy hiệu đạt tương phản ---------- */
.logo .l1{font-size:11px}
.hot-b,.bdg.hot-b{background:var(--orange-ink);color:#fff}
.bdg.vip{font-size:var(--t-micro)}
.plan li.no,.plan li.no span{color:var(--ink-3)}

/* ---------- vùng bấm: link chân trang trên điện thoại cao ≥ 32px (trước 16px) ---------- */
@media (max-width:760px){
  footer a:not(.btn):not(.logo):not(.sbtn){display:inline-flex;align-items:center;min-height:32px}
}

/* dot2: bảng dạng thẻ trên điện thoại (.tbl-cards) — mỗi dòng là một thẻ, không cắt cột */
@media (max-width:760px){
  .tbl.tbl-cards,.tbl.tbl-cards tbody{display:block;width:100%;min-width:0}
  .tbl.tbl-cards tr:first-child:has(th){display:none}
  .tbl.tbl-cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
  .tbl.tbl-cards td{display:block;padding:0;border:0;min-width:0;width:auto}
  .tbl.tbl-cards td:nth-child(1){grid-column:1/-1}
  .tbl.tbl-cards td:nth-child(2){grid-column:1;font-size:12px;color:var(--ink-3)}
  .tbl.tbl-cards td:nth-child(2) small{display:inline;margin-left:var(--s-1)}
  .tbl.tbl-cards td:nth-child(3){grid-column:1/-1}
  .tbl.tbl-cards td:nth-child(4){grid-column:2;grid-row:2;align-self:start}
  #myBk .vrow form{display:inline-flex}
  #myBk .vrow form[action$="/huy"]{margin:8px 0 0 6px}
}
.ctc .who .av.tone,.ctc .who .av[class*=" t"]{font-size:14px}
.ctc form.bd .form-control{width:100%}

/* dot2: vùng bấm >= 32px cho thẻ #chủ đề và breadcrumb trên điện thoại */
@media (max-width:760px){
  .tagc a{display:inline-flex;align-items:center;min-height:var(--h-ctl-sm);padding:0 var(--s-3)}
  .crumb a{display:inline-flex;align-items:center;min-height:var(--h-ctl-sm);min-width:var(--h-ctl-sm)}
}
@media (max-width:760px){.sec-hd .more{display:inline-flex;align-items:center;min-height:var(--h-ctl-sm)}.tab{min-height:var(--h-ctl-sm)}}

/* dot2: ô chọn/giờ/ngày/số trần trong khu quản lý (không có .form-control) dùng chung chuẩn ô nhập */
.acct select:not([multiple]):not(.form-control),.acct input[type=time],.acct input[type=date],.acct input[type=number],.acct input[type=month]{height:var(--h-ctl);padding:0 var(--s-2);border:1px solid var(--line);border-radius:var(--r);background:#fff;font:inherit;font-size:var(--fs-ctl);color:var(--ink);min-width:0}
.acct select:not([multiple]):not(.form-control):focus,.acct input[type=time]:focus,.acct input[type=date]:focus,.acct input[type=number]:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s)}
@media (max-width:760px){.acct select:not([multiple]):not(.form-control),.acct input[type=time],.acct input[type=date],.acct input[type=number]{height:var(--h-tap)}}
.loadgrid th:not(:first-child),.loadgrid td:not(:first-child){text-align:center!important}

/* dot2: bảng cuộn ngang trong khu quản lý/vận hành — cột tên không bị bóp thành từng chữ */
@media (max-width:760px){
  .tscroll>.tbl:not(.loadgrid):not(.tbl-cards) td:first-child{min-width:120px;overflow-wrap:break-word;word-break:normal}
}
.acct input[type=checkbox],.acct input[type=radio]{width:18px;height:18px;accent-color:var(--lv,var(--mint))}

/* dot2: huy hiệu hạng nha sĩ (màu truyền từ máy chủ theo kiểu inline) — tối chữ cho đủ tương phản 4.5:1 */
.lvb[style*="#b8860b"]{color:#7a5a08!important}
.lvb[style*="#0e8fb3"]{color:#0a6a86!important}
.lvb[style*="#6b7a90"]{color:#515f75!important}
.lvb[style*="#a0603a"]{color:#85472a!important}
/* ô chọn/đồng ý cỡ vừa tay trên điện thoại */
.consent input,.ck input,.ap-cv input{width:18px;height:18px;flex:none}
@media (max-width:760px){.cv-del{min-height:32px;min-width:44px}}

/* dot2: tương phản + vùng bấm các khối còn sót ở trang công khai */
.k-km{color:var(--orange-ink)}
.tk s,.tk .old,.vcard s{color:var(--ink-3)}
.near .ad-lb,.ad-lb{color:var(--ink-3)}
.bdg{font-size:11px}
@media (max-width:760px){
  .tk .sv,.pc .im .sv{width:32px;height:32px}
  a.nm,a.more,a.ab-more,a.heart,.sec-hd a,#askAnon+span{display:inline-flex;align-items:center;min-height:var(--h-ctl-sm)}
  a.ti{display:inline-flex;align-items:center;min-height:var(--h-ctl-sm)}
  .hc a,.help a.hc-link{min-height:32px}
  #askAnon{width:18px;height:18px}
}

/* ===== Flash Sale: chữ ưu đãi là TEXT thật (không nướng vào banner), phông vuông vức, có giới hạn ký tự để không lệch khung ===== */
:root{--f-sq:'Chakra Petch','Be Vietnam Pro',system-ui,sans-serif}
.fs .bn .art{align-items:center;justify-content:flex-end;padding:64px 10px 14px;text-align:center;background:linear-gradient(to top,rgba(10,20,45,.66) 0%,rgba(10,20,45,.3) 40%,transparent 66%)}
.fs .bn .art .ghost{display:block}
.fs .bn .art .big.sq{font-family:var(--f-sq);font-weight:700;text-transform:uppercase;letter-spacing:0;line-height:1.04;font-size:34px;max-width:100%;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.fs .bn .art .big.sq.long{font-size:28px}
.fs .bn .art .big.sq.xl{font-size:22px}
.fs .bn .art .big.sq small{font-family:var(--f-sq);font-weight:600;font-size:12px;letter-spacing:.08em;opacity:.95;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs .bn .art p.tg{font-family:var(--f-sq);font-weight:600;font-size:13px;line-height:1.3;margin:8px 0 0;opacity:.96;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.fsrow .fs .bn .art{justify-content:center;padding-top:40px}
.fsrow .fs .bn .art .big.sq{font-size:30px}
.fsrow .fs .bn .art .big.sq.long{font-size:24px}
.fsrow .fs .bn .art .big.sq.xl{font-size:19px}
/* đồng hồ đếm ngược: chữ số vuông vức, rộng đều (tabular) */
.cd .dg{font-family:var(--f-sq);font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;width:17px;height:25px;border-radius:2px;letter-spacing:0}
.cd .u small{font-family:var(--f-sq);font-weight:600;letter-spacing:.04em}
.cd .sep{font-family:var(--f-sq);font-weight:700;line-height:25px}
.fs .bn .art p.tg{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:#fff!important;backdrop-filter:none!important}
.fs .bn .art .big.sq small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;text-wrap:balance}
.ac.float{z-index:50} /* gợi ý ô tìm kiếm ở đầu trang phải nổi TRÊN thanh menu sticky (z-index 20), không chui xuống dưới */

/* ===== Thông tin DIỄN GIẢI (chỉ số, điều khoản, mô tả ngắn): cỡ chữ nhỏ gọn, không to hơn nội dung chính — áp dụng chung ===== */
.lh-spec b{font-size:13px;font-weight:500;line-height:1.4}
.lh-spec small{font-size:11px}
.lh-spec .ic{width:30px;height:30px;font-size:16px}
.lh-spec li{padding:11px 16px;gap:10px}
.lh-sub{font-size:13px}
.lh-facts{font-size:11px}
.vt-facts b{font-size:13px;font-weight:600}
.vt-cat b,.vt-br b,.vt-team b,.vt-p-n b{font-size:13px}

/* ===== Cân bằng màu: màu bản sắc (labo xanh dương / vật tư tím) chỉ chiếm khoảng 65–70%; còn lại là các màu phụ cho sinh động ===== */
.lh-spec{background:#fafbfd}
.lh-mat span{height:22px;font-size:11px;background:#f4f6f9;color:var(--ink-2)}
.lh-mat span:nth-child(4n+1) i{color:var(--blue)}
.lh-mat span:nth-child(4n+2) i{color:var(--mint)}
.lh-mat span:nth-child(4n+3) i{color:var(--orange)}
.lh-mat span:nth-child(4n+4) i{color:var(--rose)}
.vt-cat:nth-child(4n+2) .ic,.vt-br:nth-child(4n+2) .ic{background:var(--mint-s);color:var(--mint-d)}
.vt-cat:nth-child(4n+3) .ic,.vt-br:nth-child(4n+3) .ic{background:var(--orange-s,#fdefe1);color:var(--orange-ink,#b45409)}
.vt-cat:nth-child(4n+4) .ic,.vt-br:nth-child(4n+4) .ic{background:var(--blue-s);color:var(--blue-d)}

/* ===== NGUYÊN TẮC CHUNG: dải chip/nhãn trong thẻ danh sách KHÔNG xuống dòng làm vỡ khung — một hàng, dài thì cuộn ngang/kéo (ẩn thanh cuộn, mép mờ báo còn nữa) ===== */
.tgs,.lab .mat,.tr .mat,.vt-row-groups{display:flex;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;min-width:0;max-width:100%}
.tgs::-webkit-scrollbar,.lab .mat::-webkit-scrollbar,.tr .mat::-webkit-scrollbar,.vt-row-groups::-webkit-scrollbar{display:none}
.tgs>*,.lab .mat>*,.tr .mat>*,.vt-row-groups>*{flex:none;white-space:nowrap}
.dc .tgs,.doc .tgs{justify-content:safe center}
.lr .tgs,.lab .mat,.vt-row-groups{cursor:grab}
.lr .tgs:active,.lab .mat:active{cursor:grabbing}
/* Bảng giá: hình bậc thang gói đưa xuống một chút cho cân với khối chữ bên trái */
@media (min-width:961px){.bgh-r{align-content:center;padding-top:34px}}

/* ===== CHUẨN THẺ DANH SÁCH (docs/CHUAN-GIAO-DIEN.md §8) =====
   Mọi thẻ hàng (.lr nha khoa · .lab labo/vật tư · .dr nha sĩ · .tr tin rao · .job tuyển dụng · .cc thẻ lưới · .tk voucher):
   cột trái cố định · chiều cao tối thiểu CỐ ĐỊNH mọi hạng · mỗi khung thông tin đúng MỘT dòng (cắt … hoặc cuộn ngang, mép mờ do h-scroll.js)
   · thứ tự: tên+nhãn → địa chỉ → hàng chỉ số (đánh giá · mở cửa · ≤2 đặc điểm) → chip dịch vụ → (ưu đãi). Cột phải: nút chính, nút phụ, tiện ích. */
.lr>div:not(.act):not(.lg),.lab>div:not(.act):not(.lg),.dr>div:not(.act),.job>div:not(.act):not(.lg),.tr .bd{min-width:0;display:flex;flex-direction:column;justify-content:center}
.lr .lg,.lab .lg,.job .lg{align-self:center}
.lr .top{flex-wrap:nowrap;min-width:0}
.lr .top .nm{display:flex;align-items:center;gap:5px;min-width:0;flex:0 1 auto}
.lr .top .nm>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .top .nm>*:not(a),.lr .top>*:not(.nm){flex:none}
.lr .ad{flex-wrap:nowrap;min-width:0;gap:10px}
.lr .ad .a1{flex:0 1 auto;min-width:0}
.lr .ad .a1 b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lr .ad i{flex:none}
.lr .ad .dist{flex:none;color:var(--ink-3);white-space:nowrap}
.lr .facts,.lab .facts,.dr .facts,.tr .specs,.job .specs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;min-width:0;max-width:100%}
.lr .facts::-webkit-scrollbar,.lab .facts::-webkit-scrollbar,.dr .facts::-webkit-scrollbar,.tr .specs::-webkit-scrollbar,.job .specs::-webkit-scrollbar{display:none}
.lr .facts>*,.lab .facts>*,.dr .facts>*,.tr .specs>*,.job .specs>*{flex:none;white-space:nowrap}
.lr .facts .rate b{color:var(--ink)}
.lr .facts .shut{color:var(--ink-3)}.lr .facts .shut i{color:var(--ink-4)}
.lr .facts.sum{overflow:hidden}.lr .facts.sum span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.lr .deal{flex-wrap:nowrap;min-width:0;white-space:nowrap;overflow:hidden}
.lr .un-note,.lab .un-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.lr .un-note i,.lab .un-note i{vertical-align:-2px;margin-right:4px}
.lab .nm,.dr .nm{flex-wrap:nowrap;min-width:0}
.lab .nm a,.dr a.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lab .nm>*:not(a){flex:none}
.lab .sum,.dr .tt,.job .co{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
.lab .sum{font-size:13px;color:var(--ink-2);margin-top:4px}
.job .co{margin-top:2px}.job .co>i,.job .co>.bdg{vertical-align:-2px}
.job .ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.job .ti .bdg{display:inline-flex;margin-left:6px;vertical-align:1px}
.dr .work{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dr .work b{overflow:hidden;text-overflow:ellipsis}
.tr .ti{min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tr .mt{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}.tr .mt span{flex:none}
.tk .ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.tk .stub b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc .bd .nm{flex-wrap:nowrap;min-width:0}.cc .bd .nm a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}.cc .bd .nm>*:not(a){flex:none}
.cc .bd .ad{-webkit-line-clamp:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .bd .mt{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.cc .facts{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;min-height:20px}
.cc .tgs{min-height:22px}
@media (min-width:761px){
  .lr{grid-template-columns:72px minmax(0,1fr) 180px;min-height:116px;align-items:center}
  .lr.pic{grid-template-columns:168px minmax(0,1fr) 180px}
  .lr.pic{min-height:140px}
  .lab{min-height:124px;align-items:center}
  .lab.sup{min-height:148px}
  .dr{min-height:204px}
  .tr{min-height:168px}
  .job{min-height:100px;align-items:center}
  .lr .act,.lab .act,.dr .act,.job .act{align-self:stretch}
}
@media (max-width:760px){
  .lr .ad{flex-wrap:nowrap}
  .lr .facts{margin-top:6px}
  .lr .top{flex-wrap:wrap;gap:4px 6px}
  .lr .top .nm{flex:1 1 100%}
  .lr.pic>div:nth-child(2){padding:10px 0 0}
  .lr>div:not(.act):not(.lg){justify-content:flex-start}
}
/* Flash Sale: chữ ưu đãi canh TRÁI, khoảng cách giữa mức ưu đãi và dòng mô tả giảm còn ~50% */
.fs .bn .art{align-items:flex-start;text-align:left;padding-left:12px;padding-right:12px}
.fs .bn .art .big.sq{text-align:left;text-wrap:pretty}
.fs .bn .art .big.sq small{text-align:left;margin-bottom:3px}
.fs .bn .art p.tg{margin-top:4px;text-align:left;text-wrap:pretty}
.fsrow .fs .bn .art{align-items:center;text-align:center}
.fsrow .fs .bn .art .big.sq{text-align:center}

/* ===== Điện thoại: thẻ nha khoa dạng lưới (.cc — Super VIP/VIP nổi bật, nha khoa gần đây…) GỌN, không dài quá ===== */
@media (max-width:760px){
  .cc .cv .ph{font-size:36px;right:6px;bottom:2px}
  .cc .lg{width:38px;height:38px;border-width:2px;left:10px;bottom:-18px;font-size:12px}
  .cc .bd{padding:22px 10px 10px}
  .cc .nm{font-size:13px;line-height:1.25;gap:4px;align-items:flex-start;flex-wrap:wrap}
  .cc .nm>a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
  .cc .nm .bdg{display:none} /* nhãn "Ví dụ" xem ở trang chi tiết */
  .cc .ad{margin-top:3px;font-size:11px;min-width:0}
  .cc .ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .cc .ad i{display:inline;margin-right:3px}
  .cc .mt{margin:4px 0 0;gap:6px;flex-wrap:nowrap;overflow:hidden;font-size:11px}
  .cc .mt .bdg{display:none}
  .cc .facts,.cc .tgs{display:none}
  .cc .ft{margin-top:auto;padding-top:8px;gap:6px}
  .cc .ft .btn{height:32px;min-height:32px;padding:0 8px;font-size:13px;flex:1;justify-content:center}
  .cc .cv .badges{top:6px;left:6px;transform:scale(.9);transform-origin:left top}
}
@media (max-width:760px){
  /* thẻ nha khoa dạng hàng (.lr) trên điện thoại: ảnh thấp hơn, khoảng cách gọn hơn, tiện ích phụ ẩn bớt */
  .lr .img{min-height:0!important;max-height:none!important;height:auto!important;aspect-ratio:var(--ar-strip)} /* dải bìa thẻ hàng: 3:1 (chuẩn chung web + app, docs/CHUAN-GIAO-DIEN.md mục 9) */
  .lr .lg,.lr .img .lg{width:46px;height:46px;font-size:14px}
  .lr .act .mini-i{display:none}
  .lr .act{gap:6px}
  .lr .act .btn{height:34px;min-height:34px}
}
@media (max-width:760px){
  /* thẻ lưới .cc trên điện thoại: ẩn nút Xem/Đặt hẹn cho gọn — cả thẻ bấm được để mở hồ sơ */
  .cc .ft{display:none}
  .cc{position:relative}
  .cc .nm>a::after{content:"";position:absolute;inset:0;z-index:1}
  .cc .bd{padding-bottom:12px}
}

/* Khối GHIM (Super VIP / VIP / tin nổi bật) ở mọi trang: bỏ nền màu và viền khối — chỉ giữ nhãn đầu khối + thẻ bên trong */
.pin-super,.pinv{background:none!important;border:0!important;box-shadow:none!important;padding:0 0 6px!important}
.pin-super .pin-hd,.pinv .pin-hd{margin-bottom:8px}


/* ===== CHUẨN TỈ LỆ KHUNG ẢNH (docs/CHUAN-GIAO-DIEN.md mục "Tỉ lệ khung ảnh") — web và app khách dùng CÙNG bảng này =====
   16:9 ảnh bìa thẻ nha khoa/labo/vật tư · 16:7 bìa bài viết/review thẻ lớn · 3:2 ảnh thumb bài, E-Voucher, bộ ảnh · 4:3 tin rao
   · 3:5 banner Flash Sale (đã có ở p-sections.css) · 1:1 logo/avatar. Muốn đổi số → đổi ở đây + bảng trong tài liệu + app (lib/widgets/frame.dart). */
:root{--ar-cover:16/9;--ar-banner:16/7;--ar-photo:3/2;--ar-product:4/3;--ar-flash:3/5;--ar-strip:3/1}
.cc .cv{height:auto;aspect-ratio:var(--ar-cover)}
.xd-img{aspect-ratio:var(--ar-photo)}
.news .feat .img,.news .feat .img:has(>img){height:auto;aspect-ratio:var(--ar-banner)}
.nitem .th{height:auto;aspect-ratio:var(--ar-photo);overflow:hidden;position:relative}
.nitem .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pc .im,.pgrid4 .pc .im{aspect-ratio:var(--ar-product)}
/* E-Voucher ở trang chủ trên điện thoại: dải vuốt ngang (không xếp dọc 4 thẻ cao) */
@media (max-width:760px){
  .evh .xdeals{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut,12px);scrollbar-width:none;margin:0 calc(var(--gut,12px)*-1);padding:2px var(--gut,12px) 6px}
  .evh .xdeals::-webkit-scrollbar{display:none}
  .evh .xdeals .xd{flex:0 0 74%;max-width:300px;scroll-snap-align:start}
}

.xd-by,.xd-meta{flex-wrap:nowrap;align-items:flex-start}
.xd-by i,.xd-meta i{margin-top:2px;flex:none}

/* ===== HỘP "GATE" dùng chung (16/10): thông báo cần đăng nhập / xem trước / mời hành động — icon + khối chữ (tiêu đề + mô tả) + NHÓM NÚT riêng.
   Không bao giờ đặt nút inline giữa đoạn văn. Dùng:  <div class="gate"><i class="ph-fill ph-…"></i><div class="gate-t"><b>Tiêu đề ngắn</b><p>Mô tả</p></div><div class="gate-a"><a class="btn …">…</a>…</div></div>
   Biến thể: .gate.soft (nền xám, viền nét đứt — thông tin phụ). ===== */
.gate{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid #c6d7f6;background:#f2f7ff;border-radius:var(--r);font-size:var(--t-body);line-height:1.5}
.gate>i{font-size:20px;color:var(--blue);flex:none;margin-top:1px}
.gate-t{flex:1 1 220px;min-width:0}
.gate-t b{display:block;font-size:14px;font-weight:var(--fw-semi);line-height:1.35;color:var(--ink)}
.gate-t p{margin:2px 0 0;font-size:var(--t-meta);line-height:1.5;color:var(--ink-2)}
.gate-a{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;flex:0 0 auto;align-self:center}
.gate-a .btn{margin:0;flex:none}
.gate.soft{background:var(--bg-2);border:1px dashed var(--line)}
.gate.soft>i{color:var(--mint)}
@media (max-width:760px){
  .gate{padding:var(--s-3)}
  .gate-a{flex:1 1 100%}
  .gate-a .btn{flex:1 1 140px;justify-content:center;min-height:40px}
}

/* ===== MẬT ĐỘ GỌN (16/10, theo góp ý "chữ trên web to quá"): khoảng cách khối + đầu/thân hộp + cỡ nút. Số đo gốc: p-type.css (chữ), token --s-*, --h-ctl (trên). ===== */
.sec{padding-top:22px}
.sec-hd{margin-bottom:10px}
.box{margin-bottom:12px}
.box>.bh{padding:10px 12px}
.box>.bb{padding:12px}
.btn{font-size:13px}.btn-sm,.btn-xs{font-size:12px}
.tab,.pill{font-size:12px}
.qbook .hd small{font-size:11px}

/* điện thoại: ở cuối trang nút nổi tạm ẩn (h-scroll.js gắn .fab-end/.fab-down ở <html>) — không che nút/ô cuối cùng */
@media (max-width:760px){
  .ast-fab,.dk-fab,.to-top{transition:opacity .18s ease,transform .18s ease}
  .fab-end .ast-fab,.fab-end .dk-fab,.fab-end .to-top,.fab-down .ast-fab,.fab-down .dk-fab,.fab-down .to-top{opacity:0;transform:translateY(10px);pointer-events:none}
}

/* ===== NHÓM NÚT CUỐI BIỂU MẪU `.fbtns` (16/10): nút chính BÊN PHẢI (cuối), nút phụ bên trái; cùng cao, cách đều 8px.
   Điện thoại: xếp dọc, nút CHÍNH LÊN TRƯỚC, mỗi nút full width cao 40 (hai nút không bao giờ lệch nhau / rớt dòng lẻ). ===== */
.fbtns{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end;align-items:center}
.fbtns .btn{flex:none;margin:0}
@media (max-width:760px){
  .fbtns{flex-direction:column-reverse;align-items:stretch}
  .fbtns .btn{width:100%;justify-content:center;min-height:40px}
}

/* ===== BIỂU MẪU CÓ XEM TRƯỚC `.pv-first` (16/10, luật 11): thứ tự DOM = [ô nhập `.pvf-main`] → [XEM TRƯỚC `.pvf-side`] → [đồng ý + nút `.pvf-act`].
   Điện thoại: một cột đúng thứ tự đó (xem trước LUÔN trước nút Gửi/Lưu). Máy tính: cột trái = nhập rồi nút, cột phải = xem trước dính khi cuộn. ===== */
.pv-first,.fcols.pv-first{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pv-first .pvf-side .pv{position:static}
@media (min-width:961px){
  .pv-first,.fcols.pv-first{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"main side" "act side";grid-template-rows:auto 1fr;column-gap:16px;row-gap:0}
  .pv-first>.pvf-main{grid-area:main;margin-bottom:12px}
  .pv-first>.pvf-side{grid-area:side;position:sticky;top:120px}
  .pv-first>.pvf-act{grid-area:act}
  /* biến thể bảng quản lý (.dgrid2): cột 1.6fr | 1fr như cũ */
  .acct .dgrid2.pv-first,.pnk .dgrid2.pv-first{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"main side" "act side";grid-template-rows:auto 1fr;gap:0 14px}
  .dgrid2.pv-first>.pvf-side{position:sticky;top:76px}
  .dgrid2.pv-first>.pvf-main{display:grid;gap:14px}
  .dgrid2.pv-first>.pvf-act{margin-top:14px}
  .pvf-act .fbtns{flex-wrap:nowrap}
  .pvf-act .fbtns .hint2{flex:1 1 0;min-width:0}
  .dgrid2.pv-first>.pvf-side{display:grid;gap:14px;align-content:start}
}
@media (max-width:960px){.dgrid2.pv-first{gap:14px}.dgrid2.pv-first>.pvf-main,.dgrid2.pv-first>.pvf-side{display:grid;gap:14px;align-content:start}}

/* ===== LUẬT THÀNH PHẦN (16/10, docs/CHUAN-GIAO-DIEN.md §13) — áp dụng tập trung ===== */
/* (a) DẢI KHÔNG XUỐNG DÒNG: chip/số liệu/nhãn là MỘT hàng cuộn ngang (mép mờ do h-scroll.js), không bao giờ gãy thành nhiều dòng trên điện thoại */
@media (max-width:760px){
  .stats,.dstat,.legend,.hc-quick,.ameta,.meta-l,.links,.tagc,.pin-hd,.facts,.callegend{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;max-width:100%;min-width:0}
  .stats>*,.dstat>*,.legend>*,.hc-quick>*,.ameta>*,.meta-l>*,.links>*,.tagc>*,.pin-hd>*,.facts>*,.callegend>*{flex:none;white-space:nowrap}
  .stats{margin-left:0;gap:6px}
  .stats .stat{padding:6px 10px;min-width:0}
}
/* (b) ICON + CHỮ NHIỀU DÒNG: icon căn TRÊN (đầu dòng chữ), không căn giữa khối */
.f1 .it,.near .it,.vmini,.jnote,.qbook .hd,.bk .hd,.plan .hd,.ct-form .hd,.ct-card,.ct-quick a,.bgh-pts li,.sb-list li,.auth .art2 li,a.mini,.claim{align-items:flex-start}
.claim>i,.claim>.ic{align-self:flex-start}
/* (c) phông logo: cỡ nguyên px (trước 1.05em = số lẻ) */
.logo .l2{font-size:18px}
/* icon + chữ nhiều dòng — các khối còn lại (đặt sau để thắng luật riêng): icon căn TRÊN */
.sb-list li,.flow>div,.ab-stats>div,.abc-row,.abc-call,.hc-list>a,.hc-role>a,.vmini{align-items:flex-start!important}
.abody .prose,.apaper .prose{font-size:15px;line-height:1.75}
div.ph{align-items:flex-start!important}
/* dải chip lọc `.pills` (dịch vụ, chuyên khoa…): MỘT hàng ở mọi bề rộng, cuộn ngang/kéo chuột, mép mờ (luật 3) — trước đây xuống 2–3 dòng ở máy tính bảng */
.pills{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;min-width:0}
.pills>*{flex:none;white-space:nowrap}
.acct .kpi,.oapp-nav a,.opsurl{align-items:flex-start}
.acct .kpi .ic{margin-top:0}

/* ===== THẺ E-VOUCHER: hàng giá + nút Mua không chồng chữ (16/10) — giá hiện tại đậm MỘT dòng, giá gốc gạch nhỏ xám NẰM DƯỚI; nút Mua cố định không bị bóp; thẻ hẹp 230px vẫn đủ ===== */
.xd-stub .xd-pr{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;flex:1 1 auto;min-width:0;line-height:1.15}
.xd-stub .xd-pr b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.xd-stub .xd-pr s{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.3}
.xd-stub .btn{flex:none}

/* ===== CHỮ KHÔNG ĐÈ NHAU (16/10): phần tử con của hàng nowrap trong thẻ KHÔNG được co nhỏ hơn nội dung (trước: "★ 4,6 (7)" co lại, "(7)" đè lên "4,6"); hàng dài hơn thẻ thì cắt ở mép, chip phụ cắt bằng … ===== */
.cc .mt,.cc .facts,.cp-mt,.lr .facts,.lab .facts,.dr .facts,.tr .specs,.job .specs{min-width:0}
.cc .mt>*,.cc .facts>*,.cp-mt>*{flex:none;white-space:nowrap}
.cc .mt .brc{flex:0 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .mt .brc i{vertical-align:-2px;margin-right:3px}
@media (max-width:480px){.cc .mt .brc-t{display:none}}
/* danh sách + cột phụ: gộp một cột từ ≤ 900px (trước 720px) — ở 721–900px cột thẻ chỉ còn ~460px nên cột giữa của thẻ hàng chỉ còn ~70px, nhãn "Ví dụ"/VIP đè lên nhau */
@media (max-width:900px){.tlay{grid-template-columns:minmax(0,1fr);gap:10px}}

/* ===== GIẢM VIỀN (17/10, chủ: "quá lạm dụng viền bao") — token --bd-*; thẻ/hộp = nền + bóng rất nhẹ, chip/nút phụ = nền tint không viền.
   Viền CHỈ còn cho: ô nhập, trạng thái focus/chọn, bảng, đường kẻ mảnh, ô popup nổi và dấu hạng trả phí (VIP/Tài trợ). Dùng `border-color:transparent` (giữ kích thước, không xô bố cục). ===== */
:root{--bd:var(--line,#e2e6ec);--bd-soft:var(--line-2,#eef1f4);--bd-w:1px;--sh-card:0 1px 2px rgba(20,33,61,.07),0 0 1px rgba(20,33,61,.05)}
/* thẻ / hộp / khối: bỏ viền, giữ bóng nhẹ (trắng trên nền xám) */
.box,.card,.cc,.lr,.lab,.dr,.tr,.job,.pc,.nrow,.nbig,.nmed,.nitem,.qa,.kpi,.stat,.ltx-c,.lp-c,.vc,.ppc,.hc-cat,.vt,.bx,.brand,.sv,.hc-b,.hc-role a,.flow>div,.why>div,.related a,.iact,.jbar,.askbox,.dstat>div,.lp-up,.faq,.howto>*,.pv,.near,.ab-panel,.bk{border-color:transparent;box-shadow:var(--sh-card)}
.work,.hl,.cert{border-color:transparent;box-shadow:none}   /* khối tint bên trong thẻ: chỉ nền, không bóng */
.cc.vip,.lr.vip,.lr.spon,.lab.sup{box-shadow:var(--sh-card)}  /* hạng trả phí giữ viền màu ở luật riêng (đặc hiệu cao hơn) */
/* chip / nhãn / tab / liên kết dạng thẻ nhỏ: nền tint, không viền */
.pill,.tg,.tag,.chip,.tab,.mat span,.specs span,.kws a,.tagc a,.links a,.lp-links a,.areas a,.hc-quick a,.hc-tag,.heart,.ibtn,.cp-ib,.askf-chip,.rte-tool,.jdd-b,.pq-btn,.a.mini,.n,.sal,.pb-tag,.hsearch,.inp.sel,.seg2,.near .it{border-color:transparent}
.pill,.tg,.tag,.chip,.mat span,.specs span,.kws a,.tagc a,.links a,.lp-links a,.areas a,.hc-quick a,.hc-tag,.askf-chip,.rte-tool,.jdd-b,.pq-btn,.sal{background:var(--bg-3)}
.pill.on,.tab.on,.askf-chip.on{border-color:transparent}
/* nút phụ: nền tint, không viền; nút cam = nền cam nhạt không viền */
.btn-ghost{background:var(--bg-3);border-color:transparent}
.btn-ghost:hover{background:#e4e9ef;border-color:transparent}
.btn-or{border-color:transparent}
.btn-violet,.btn-blue,.btn-mint{border-color:transparent}
.heart,.ibtn,.cp-ib{background:var(--bg-3)}
/* nhãn "Ví dụ/chưa xác thực": bỏ viền nét đứt → nền xám */
.bdg.un{border-style:solid;border-color:transparent;background:var(--bg-3);color:var(--ink-3)}
.bdg.spon,.bdg.ok,.bdg.vip{border-color:transparent}
/* hộp thông báo: nền tint, không viền (nét đứt/viền màu trang trí bỏ hết) */
.lockline,.lockmini,.jnote,.gate,.gate.soft,.st-empty,.st-err,.safe,.ctc .lockph{border-color:transparent}
.lockline,.lockmini,.jnote{background:var(--bg-2)}
.st-err{background:var(--rose-s)}
.gate{background:#eef4ff}
/* hộp trong hộp: nền thay viền */
.box .box,.card .card,.box .cert,.box .hl,.box .work,.box .lp-up,.card .kpi,.card .stat{box-shadow:none}
.box .box,.card .card{background:var(--bg-2)}
/* viền còn giữ rõ: ô nhập khi focus/chọn */
input:focus,select:focus,textarea:focus,.inp:focus-within,.form-control:focus{border-color:var(--blue)}

/* ===== NHÃN KHÔNG KÉO FULL WIDTH (17/10): trong thân thẻ xếp cột (flex column) nhãn mặc định bị `stretch` → nền tint phủ hết chiều ngang. Nhãn co theo nội dung, cạnh nhau một hàng ===== */
.nmrow{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
.nmrow>.nm{flex:0 1 auto;min-width:0}
.nmrow>.bdg,.nmrow>.lvb{flex:none}
:is(.dr,.tr,.lab,.lr,.job,.dc,.pc,.cc)>div>.bdg,:is(.dr,.tr,.lab,.lr,.job,.dc,.pc,.cc) .bd>.bdg,:is(.dr,.tr,.lab,.lr,.job,.dc,.pc,.cc)>.bdg,:is(.dr,.tr,.lab,.lr,.job,.dc,.pc,.cc)>div>.lvb,.dc>.bdg,.dc>.lvb{align-self:flex-start;width:auto;max-width:100%}