/*
 * 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:36px;      /* ô nhập / nút / chip chuẩn */
  --h-ctl-sm:32px;   /* nút nhỏ / chip trong thanh lọc */
  --h-tap:44px;      /* vùng bấm tối thiểu trên điện thoại */
  --fs-ctl:14px;     /* chữ trong ô nhập */
}

/* ---------- ô 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:12.5px;font-weight:600;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:700}
@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:700;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:700;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:700;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}
}