@font-face { font-family: "UTM Avo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/UTM-Avo.woff2") format("woff2"); }
@font-face { font-family: "UTM Avo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/UTM-AvoBold.woff2") format("woff2"); }
@font-face { font-family: "UTM Avo"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/UTM-AvoItalic.woff2") format("woff2"); }
:root {
  /* Nhận diện LabAI (Greenlife), kế thừa tông đen, trắng sứ, ánh bạch kim; trạng thái mức độ giữ màu ngữ nghĩa */
  --bg: #f7f7f5; --card: #ffffff; --ink: #141518; --muted: #63666b; --line: #e8e8e5;
  --brand: #141518; --brand-soft: #ededea; --night: #0b0b0c; --graphite: #1d1e21; --steel: #9a9ea5; --platinum: #c6cad0; --on-dark: #f4f5f7;
  --ok: #2f7a50; --ok-soft: #e5f1ea; --mild: #8a6514; --mild-soft: #f6efdd; --mid: #b4561a; --mid-soft: #f8e7da; --bad: #a8322a; --bad-soft: #f6e1de;
  --radius: 4px;
  --display: "UTM Avo", "Segoe UI", Arial, sans-serif; --body: "UTM Avo", "Segoe UI", Arial, sans-serif;
  --platinum-sheen: linear-gradient(102deg, #f6f7f9 0%, #c6cad0 36%, #92979f 52%, #d8dbe0 68%, #f1f2f4 100%);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--body); background: var(--bg); color: var(--ink); font-size: 15px; }
a { color: inherit; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; }
nav { display: flex; gap: 18px; flex: 1; }
nav a { text-decoration: none; color: var(--muted); font-weight: 500; }
nav a.active { color: var(--brand); }
.badge { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--mild-soft); color: var(--mild); }
.badge.ai { background: var(--ok-soft); color: var(--ok); }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 80px; }
h1 { text-align: center; font-size: 30px; margin: 8px 0 4px; }
.sub { text-align: center; color: var(--muted); margin: 0 auto 24px; max-width: 560px; }
.steps { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 16px; }
.steps span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.steps span.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps i { width: 60px; height: 1px; background: var(--line); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 16px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .02em; }
.card h3 { font-size: 15px; margin: 0 0 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
label.f.full { grid-column: 1 / -1; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=search], select, textarea {
  font: inherit; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
input[readonly] { background: var(--bg); }
input.invalid { border-color: var(--bad); }
textarea { min-height: 70px; resize: vertical; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 10px; }
.checks label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.checks input { accent-color: var(--brand); width: 16px; height: 16px; margin-top: 2px; }
.box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.zone { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
button { font: inherit; cursor: pointer; border-radius: 10px; padding: 11px 20px; border: 1px solid var(--line); background: #fff; font-weight: 600; }
button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.link { border: none; background: none; color: var(--brand); padding: 4px; }
.tips { background: var(--mild-soft); border: 1px solid #f3dfb0; border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.tips ul { margin: 6px 0 0; padding-left: 18px; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 24px; text-align: center; color: var(--muted); cursor: pointer; }
.drop.over { border-color: var(--brand); background: var(--brand-soft); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; display: block; }
.thumbs button { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border-radius: 99px; font-size: 12px; }
.thumbs figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.err { color: var(--bad); font-size: 13px; }
.consent { display: flex; gap: 10px; align-items: flex-start; }
.loading { text-align: center; padding: 60px 0; color: var(--muted); }
.spinner { width: 40px; height: 40px; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Kết quả */
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.head h1 { text-align: left; }
.meta { color: var(--muted); font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.sev-good { background: var(--ok-soft); color: var(--ok); }
.sev-mild { background: var(--mild-soft); color: var(--mild); }
.sev-mid { background: var(--mid-soft); color: var(--mid); }
.sev-bad { background: var(--bad-soft); color: var(--bad); }
.axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.axis { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; }
.axis.good { opacity: .6; }
.axis .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.axis h4 { margin: 4px 0 8px; font-size: 15px; }
.axis .cls { background: var(--mild-soft); font-size: 12px; padding: 6px 8px; border-radius: 8px; margin-bottom: 8px; }
.axis p { margin: 0; font-size: 13px; line-height: 1.5; }
.axis .ev { margin-top: 8px; font-size: 11px; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.photos img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; }
.alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.alert.bad { background: var(--bad-soft); color: var(--bad); }
.alert.warn { background: var(--mild-soft); color: var(--mild); }
dl.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; }
dl.kv div dt { font-size: 11px; color: var(--muted); text-transform: uppercase; }
dl.kv div dd { margin: 2px 0 0; }
ol.routine { margin: 0; padding-left: 20px; }
ol.routine li { margin-bottom: 6px; }
/* Lịch sử */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.hist { display: grid; gap: 10px; }
.row { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; text-decoration: none; }
.row img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.row .grow { flex: 1; min-width: 0; }
.row strong { display: block; }
.row small { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; }
#toast.show { opacity: 1; }
@media (max-width: 760px) {
  .grid2, .grid3, .axes, .checks, dl.kv { grid-template-columns: 1fr; }
  .topbar { gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
  h1 { font-size: 24px; }
}
@media print {
  .topbar, .actions, .no-print { display: none !important; }
  body { background: #fff; }
  .card, .axis { break-inside: avoid; }
}
.ddx { display: grid; gap: 10px; margin-bottom: 12px; }
.ddx-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.ddx-row small { color: var(--ink); line-height: 1.45; }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.review { border-color: var(--brand); }
.axis-review { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.kpis div { background: var(--bg); border-radius: 10px; padding: 10px; text-align: center; }
.kpis b { display: block; font-size: 22px; color: var(--brand); }
.kpis small { color: var(--muted); font-size: 12px; }
.row .pill { flex-shrink: 0; }
@media (max-width: 760px) { .axis-review, .kpis { grid-template-columns: 1fr 1fr; } }
.row .pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pill.pending { background: var(--line); color: var(--muted); }
@media (max-width: 760px) {
  .row { flex-wrap: wrap; }
  .row .pills { flex-basis: 100%; justify-content: flex-start; padding-left: 66px; }
}
/* Kho ảnh */
.bar { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 14px 0 8px; }
.bar i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.inbox-bar { justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 14px; }
.inbox-bar input { width: 64px; padding: 6px 8px; display: inline-block; }
.group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.group-head h3 { margin: 0; }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pick-item { position: relative; cursor: pointer; display: block; }
.pick-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; display: block; border: 3px solid transparent; }
.pick-item input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--brand); }
.pick-item input:checked + img { border-color: var(--brand); }
.pick-item input:not(:checked) + img { opacity: .45; }
.pick-item span { font-size: 11px; color: var(--muted); }
.training-toggle { background: var(--mild-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; }

/* So sánh trước/sau */
.pair-stages { display: flex; gap: 10px; flex-wrap: wrap; }
.pair-stage { margin: 0; flex: 1 1 140px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.pair-stage img { flex: 1 1 120px; max-width: 220px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; display: block; min-width: 0; }
.pair-stage figcaption { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--muted); }
.pair-sum { margin: 12px 0 6px; }
.pair-sum.up b, .pair-table .up { color: var(--ok); }
.pair-sum.down b, .pair-table .down { color: var(--bad); }
.pair-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pair-table th, .pair-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pair-table td:last-child { white-space: nowrap; font-weight: 600; }
.pair-report h4 { margin: 14px 0 4px; }
.pair-report ul { margin: 0; padding-left: 20px; }
.pair-report details > summary { cursor: pointer; font-weight: 600; margin-top: 12px; }
.pair-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair-review { margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--bg); }
.pair-review.done { border-left: 4px solid var(--ok); }
.pair-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pair-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pair-form .wide, .pair-form button { grid-column: 1 / -1; }
@media (max-width: 760px) { .pair-cols, .pair-form { grid-template-columns: 1fr; } .pair-table { display: block; overflow-x: auto; } }

/* Lộ trình theo tuần, cập nhật tư vấn, gợi ý từ kho, trang Kho SP */
.weekly { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.weekly li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.weekly li b { color: var(--brand); }
.weekly p { margin: 2px 0 0; }
@media (max-width: 560px) { .weekly li { grid-template-columns: 1fr; gap: 2px; } }
#refine-card textarea { width: 100%; box-sizing: border-box; }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.refined { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.refined h4 { margin: 12px 0 4px; }
ul.sugg { padding-left: 18px; display: grid; gap: 10px; }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cat-list > li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cat-list > li > div:first-child { min-width: 0; }
.cat-list p { margin: 2px 0 0; }
.cat-form { margin: 10px 0; }
.cat-form input, .cat-form textarea { width: 100%; box-sizing: border-box; }

/* ---------- Nhận diện LabAI ---------- */
body { font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, .card h2, .head h1 { font-family: var(--display); font-weight: 500; letter-spacing: .01em; }
h1 { font-size: 34px; line-height: 1.2; margin: 16px 0 6px; }
.sub { font-weight: 300; }
.card { border-radius: var(--radius); box-shadow: none; }
.card h2 { font-size: 22px; text-transform: none; letter-spacing: .005em; margin-bottom: 14px; }
.card h2 small, .zone { font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.card h3 { font-weight: 600; }

/* Thanh đầu trang: dải đen, logo LabAI bạch kim */
.topbar { background: var(--night); border-bottom: 1px solid var(--graphite); padding: 10px 28px; gap: 28px; }
.brand { gap: 14px; color: var(--on-dark); }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-app { font-size: 10px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--steel); padding-left: 14px; border-left: 1px solid #2e3035; white-space: nowrap; }
nav { gap: 6px; }
nav a { color: var(--steel); font-size: 14px; padding: 8px 10px; border-bottom: 1px solid transparent; }
nav a:hover { color: var(--on-dark); }
nav a.active { color: var(--on-dark); border-bottom-color: var(--platinum); }
.badge { background: transparent; border: 1px solid #2e3035; color: var(--steel); letter-spacing: .06em; }
.badge.ai { background: transparent; color: var(--platinum); border-color: #3a3e44; }

/* Nút, ô nhập: góc 4 px, nút chính màu mực */
button, input[type=text], input[type=tel], input[type=date], input[type=number], input[type=search], select, textarea,
.box, .tips, .drop, .axis, .row, .alert, .ddx-row, .photos img, .thumbs img, .row img, .pick-item img, .pair-stage img, .kpis div, .weekly li, .pair-review { border-radius: var(--radius); }
button { font-weight: 500; letter-spacing: .02em; transition: background .15s, border-color .15s; }
button:hover:not(:disabled) { border-color: var(--ink); }
button.primary { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
button.primary:hover:not(:disabled) { background: var(--graphite); }
button.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--platinum); outline-offset: 1px; border-color: var(--ink); }
.checks input, .pick-item input { accent-color: var(--ink); }
.steps span.on { background: var(--ink); border-color: var(--ink); }
.spinner { border-top-color: var(--ink); }
.tips { background: #fff; border: 1px solid var(--line); border-left: 0; box-shadow: inset 3px 0 0 var(--platinum); }
.drop { border-width: 1px; }
.drop.over { border-color: var(--ink); background: var(--brand-soft); }
.axis .cls { background: var(--bg); }
.kpis b { font-family: var(--display); font-weight: 500; font-size: 26px; color: var(--ink); }
.weekly li b, .pair-sum b { color: var(--ink); }
#toast { background: var(--night); color: var(--on-dark); border-radius: var(--radius); }

/* Dải sáng: một điểm nhấn ở góc trên trang, nằm sau nội dung */
main { position: relative; isolation: isolate; }
main::before { content: ""; position: absolute; z-index: -1; top: -12px; right: -40px; width: 320px; height: 260px; background: url("/brand/dai-sang-nen-sang.svg") no-repeat right top / contain; opacity: .55; pointer-events: none; }

.site-foot { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between; }
.site-foot b { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--ink); letter-spacing: .04em; }

@media (max-width: 760px) {
  .topbar { padding: 10px 16px; gap: 10px; }
  .brand-logo { height: 26px; width: auto; }
  .brand-app { display: none; }
  nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 2px; }
  nav a { white-space: nowrap; padding: 8px; }
  h1 { font-size: 28px; }
  main::before { width: 200px; height: 160px; right: -24px; }
}
.print-logo { display: none; }
@media print {
  main::before, .site-foot { display: none; }
  .print-logo { display: block; height: 40px; width: auto; margin: 0 auto 20px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } .spinner { animation-duration: 3s; } }
.training-toggle { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.muted { color: var(--muted); font-size: 13px; }
/* iPad, điện thoại: logo và nhãn trạng thái một hàng, menu xuống hàng riêng, cuộn ngang nếu thiếu chỗ */
nav a { white-space: nowrap; }
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; }
  .topbar .badge { margin-left: auto; }
  nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; }
  nav::-webkit-scrollbar { display: none; }
}

/* UTM Avo chỉ có thường (400) và đậm (700): tiêu đề, nhãn, nút dùng 700 */
h1, .card h2, .head h1, .kpis b, .site-foot b, button, nav a.active, .card h2 small, .zone, .brand-app { font-weight: 700; }
.card h2 small, .zone { font-weight: 400; }

/* ---------- Phiếu kết quả: Tóm lược + thẻ Cho khách / Chuyên gia ---------- */
.tom-luoc { display: grid; gap: 14px; border-color: var(--ink); }
.tom-luoc h3 { margin: 6px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.den-tin-hieu { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--radius); }
.den-tin-hieu p { margin: 2px 0 0; }
.den-cham { width: 14px; height: 14px; border-radius: 999px; margin-top: 4px; background: currentColor; }
.den-tin-hieu.xanh { background: var(--ok-soft); color: var(--ok); }
.den-tin-hieu.vang { background: var(--mild-soft); color: var(--mild); }
.den-tin-hieu.do { background: var(--bad-soft); color: var(--bad); }
.den-tin-hieu p { color: var(--ink); }
.nen-da { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nen-da div { background: var(--card); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.van-de { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.van-de li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start; }
.van-de .pill { text-align: center; }
.van-de li div { display: grid; min-width: 0; }
.lam-ngay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lam-ngay > div { background: var(--card); padding: 12px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.lam-ngay ul { margin: 0; padding-left: 16px; display: grid; gap: 4px; }
.lam-ngay p { margin: 0; }
.moc { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 8px; overflow-x: auto; }
.moc li { border-top: 2px solid var(--ink); padding-top: 6px; display: grid; gap: 2px; font-size: 14px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 24px 0 16px; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 18px; color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.loi-tu-van { font-size: 17px; line-height: 1.7; max-width: 68ch; }
.truc { display: grid; }
.truc-dong { border-bottom: 1px solid var(--line); }
.truc-dong summary { display: grid; grid-template-columns: 96px minmax(140px, 1fr) 2fr; gap: 10px; align-items: center; padding: 10px 0; cursor: pointer; list-style: none; }
.truc-dong summary::-webkit-details-marker { display: none; }
.truc-dong summary .pill { text-align: center; }
.truc-dong.tot summary { opacity: .7; }
.truc-chi-tiet { padding: 0 0 12px 106px; display: grid; gap: 4px; }
.truc-chi-tiet p { margin: 0; }
details.ddx-row summary { cursor: pointer; }
@media (max-width: 760px) {
  .nen-da { grid-template-columns: 1fr 1fr; }
  .nen-da div:first-child { grid-column: 1 / -1; }
  .lam-ngay { grid-template-columns: 1fr; }
  .truc-dong summary { grid-template-columns: 90px 1fr; }
  .truc-dong summary .muted { grid-column: 2; }
  .truc-chi-tiet { padding-left: 0; }
}
@media print {
  .tabs { display: none; }
  .tom-luoc { break-inside: avoid; }
}
@media (max-width: 900px) { .lam-ngay { grid-template-columns: 1fr; } }
/* ---- Giai đoạn 1: chụp ảnh trước, AI điền sẵn, thang đo, phiếu gửi khách ---- */
a.btn { display: inline-flex; align-items: center; font: inherit; font-weight: 500; letter-spacing: .02em; text-decoration: none; border-radius: var(--radius); padding: 11px 20px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
a.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.training-toggle.card { display: flex; gap: 10px; padding: 14px 18px; }
.goc-chup { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; margin: 0 0 14px; }
.goc-chup li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
.goc-chup li.co { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.goc-hinh { width: 34px; height: 44px; border: 2px solid currentColor; border-radius: 50% 50% 46% 46%; position: relative; }
.goc-hinh::after { content: ""; position: absolute; top: 40%; width: 6px; height: 10px; border: 2px solid currentColor; border-left: none; border-radius: 0 6px 6px 0; }
.goc-0::after { display: none; }
.goc-1::after { left: -8px; transform: scaleX(-1); }
.goc-2::after { right: -8px; }
.anh-loi { color: var(--mid); font-size: 12px; }
.thumbs figure small.anh-loi { display: block; margin-top: 2px; }
details.card > summary { cursor: pointer; }
details.card[open] > summary { margin-bottom: 12px; }
.nhan-ai { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 99px; background: var(--ink); color: var(--on-dark); vertical-align: 1px; }
.checks label.ai { color: var(--ink); }
.dang-chay { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--platinum); border-top-color: var(--ink); animation: spin 1s linear infinite; vertical-align: -1px; }
.kiem-anh ul { margin: 0 0 6px; padding-left: 18px; }
h3.tang { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
h3.tang:first-of-type { margin-top: 0; }
.thang-do { width: 100%; border-collapse: collapse; font-size: 14px; }
.thang-do th { text-align: left; font-weight: 500; color: var(--muted); width: 110px; }
.thang-do th, .thang-do td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.thang-do tr:last-child th, .thang-do tr:last-child td { border-bottom: none; }
/* Phiếu gửi khách: một trang đọc trên điện thoại hoặc in A4 */
.phieu-khach { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; line-height: 1.55; }
.pk-dau { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: var(--night); color: var(--on-dark); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pk-dau img { height: 40px; width: auto; flex-shrink: 0; }
.pk-dau div { display: flex; flex-direction: column; gap: 2px; margin-left: auto; text-align: right; }
.pk-dau span { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--platinum); }
.pk-dau b { font-size: 20px; }
.pk-dau small { color: var(--steel); }
.pk-muc { padding: 18px 28px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.pk-muc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
.pk-muc ol, .pk-muc ul { margin: 0; padding-left: 20px; }
.pk-muc li { margin-bottom: 4px; }
.pk-van-de { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pk-van-de li { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg); border-radius: var(--radius); margin: 0; }
.pk-van-de span { font-size: 13px; color: var(--muted); }
.pk-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pk-bac-si { background: var(--mild-soft); }
.pk-chan { padding: 16px 28px; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 600px) {
  .pk-dau { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
  .pk-dau div { margin-left: 0; text-align: left; }
  .pk-muc { padding: 16px; }
  .pk-van-de, .pk-hai-cot { grid-template-columns: 1fr; }
}
@media print { .phieu-khach { border: none; max-width: none; } }
.f > .nhan-ai, label.f .nhan-ai { align-self: flex-start; }
.pk-muc ol.pk-buoc { list-style: none; padding-left: 0; }
.van-de .thang { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.brand-app { text-transform: none; letter-spacing: .06em; font-size: 14px; color: var(--platinum); }
.checks.mot-cot { grid-template-columns: 1fr; }
.quy-chuan .checks label { font-size: 14px; line-height: 1.4; }
.pk-dau-spa { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.pk-dau-spa img { height: 56px; max-width: 200px; object-fit: contain; }
.pk-dau-spa .pk-spa { margin-left: 0; text-align: left; }
.pk-dau-spa .pk-spa b { font-size: 17px; }
.pk-dau-spa span { color: var(--muted); }
.pk-dau-spa small { color: var(--muted); }
.pk-chan-logo { height: 14px; width: auto; vertical-align: -2px; }
.spa-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; margin-bottom: 12px; }
.spa-logo { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); min-height: 120px; justify-content: center; }
.spa-logo img { max-width: 180px; max-height: 90px; object-fit: contain; }
@media (max-width: 700px) { .spa-grid { grid-template-columns: 1fr; } }
/* ---- Tài khoản, quản trị, cài đặt ---- */
body.chua-dang-nhap nav, body.chua-dang-nhap #mode-badge { display: none; }
body.chi-quan-tri nav a:not(#nav-admin) { display: none; }
body.chi-quan-tri nav { display: flex; }
.topbar .dang-xuat { background: transparent; border: 1px solid #2e3035; color: var(--steel); padding: 6px 12px; font-size: 13px; }
.topbar .dang-xuat:hover:not(:disabled) { color: var(--on-dark); border-color: var(--steel); }
.dai-bao { max-width: 1040px; margin: 12px auto 0; padding: 10px 16px; border-radius: var(--radius); font-size: 14px; }
.dai-bao.xem { background: var(--ink); color: var(--on-dark); }
.dai-bao.xem a { color: var(--platinum); margin-left: 8px; }
.dai-bao.chan { background: var(--mild-soft); color: var(--mild); }
#banner:empty { display: none; }
.xac-thuc { max-width: 440px; margin: 24px auto; }
.xac-thuc-logo { display: block; height: 44px; width: auto; margin: 0 auto 8px; }
.xac-thuc .tabs { display: flex; margin-bottom: 12px; }
.xac-thuc .tabs a { flex: 1; text-align: center; padding: 10px; text-decoration: none; border-bottom: 2px solid var(--line); color: var(--muted); font-weight: 500; }
.xac-thuc .tabs a[aria-selected="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.xac-thuc form { display: grid; gap: 14px; }
input[type=password] { font: inherit; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; width: 100%; }
button.rong { width: 100%; }
.canh-giua { text-align: center; }
.spa-dong { display: grid; gap: 10px; }
.spa-dau { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.spa-dau b { font-size: 16px; display: block; }
.spa-dau small { color: var(--muted); }
.spa-so { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.spa-so b { color: var(--ink); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar select { width: auto; }
.buoc-cai { padding-left: 20px; line-height: 1.6; }
.buoc-cai li { margin-bottom: 6px; }
.ky-hieu { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; }
.dieu-khoan { max-width: 760px; margin: 0 auto; line-height: 1.6; }
.dieu-khoan h1 { text-align: left; font-size: 24px; }
.dieu-khoan h2 { margin-top: 20px; }
body.chi-xem nav a[data-nav="new"] { display: none; }
/* ---- Liệu trình ---- */
.lieu-trinh-the { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lieu-trinh-the > div { display: flex; flex-direction: column; gap: 2px; }
.lieu-trinh-the.moi { display: block; }
.lieu-trinh-the.moi summary { cursor: pointer; }
.lieu-trinh-the.moi form { margin-top: 14px; }
.tien-trien { display: grid; gap: 14px; }
.tt-dau { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: start; }
.tt-dau > div { display: flex; flex-direction: column; gap: 2px; }
.tt-dau p { margin: 0; line-height: 1.55; }
.tt-so { font-size: 40px; line-height: 1.1; }
.tt-so.len { color: var(--ok); }
.tt-so.xuong { color: var(--mid); }
.tien-trien h3 { margin: 4px 0 6px; }
.tien-trien ul { margin: 0; padding-left: 18px; }
.dong-buoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dong-buoi li { display: grid; grid-template-columns: 30px 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.dong-buoi img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); }
.dong-buoi li > div { display: flex; flex-direction: column; gap: 2px; }
.dong-buoi small { color: var(--muted); }
.buoi-so { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.bang-cuon { overflow-x: auto; }
.bang-tien-trien { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.bang-tien-trien th, .bang-tien-trien td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.bang-tien-trien thead th small { display: block; color: var(--muted); font-weight: 400; }
.bang-tien-trien td small { display: block; color: var(--muted); margin-top: 3px; }
.bang-tien-trien tbody th { font-weight: 500; white-space: normal; min-width: 150px; }
.pk-hai-anh { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pk-hai-anh figure { margin: 0; }
.pk-hai-anh img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.pk-hai-anh figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.tai-kham { border-color: var(--ink); }
@media (max-width: 700px) {
  .tt-dau { grid-template-columns: 1fr; }
  .dong-buoi li { grid-template-columns: 28px 52px 1fr; }
  .dong-buoi li > a, .dong-buoi li > .muted { grid-column: 2 / -1; justify-self: start; }
}

/* ======================================================================
   Ngôn ngữ thiết kế LabAI 2026: nền đen có hạt nhiễu và quầng sáng xám,
   chữ lớn nét mảnh hai tông trắng xám, nút bo tròn dạng viên thuốc,
   thẻ trong mờ viền mảnh, họa tiết đường đồng mức. Phiếu gửi khách và bản in giữ nền sáng.
   ====================================================================== */
:root {
  color-scheme: dark;
  --bg: #0a0a0b; --card: rgba(255, 255, 255, .035); --ink: #f2f2f3; --muted: #8e9096; --line: rgba(255, 255, 255, .09);
  --brand: #f2f2f3; --brand-soft: rgba(255, 255, 255, .08); --input: rgba(255, 255, 255, .045);
  --ok: #86d3a7; --ok-soft: rgba(134, 211, 167, .12); --mild: #e9c77f; --mild-soft: rgba(233, 199, 127, .12);
  --mid: #f2a66e; --mid-soft: rgba(242, 166, 110, .13); --bad: #f3a39a; --bad-soft: rgba(243, 163, 154, .13);
  --radius: 16px;
}
body {
  background: radial-gradient(120% 60% at 50% -12%, #2b2c30 0%, #141416 38%, #0a0a0b 70%) fixed, #0a0a0b;
  color: var(--ink);
}
/* Hạt nhiễu phủ toàn trang: tạo chất liệu như ảnh chụp, không bắt sự kiện chuột */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main::before {
  top: -24px; left: 50%; right: auto; transform: translateX(-50%); width: min(900px, 100%); height: 420px;
  background: url("/brand/duong-dong-muc.svg") no-repeat center top / contain; opacity: 1;
}
.topbar { background: rgba(10, 10, 11, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

/* Chữ: tiêu đề lớn, nét mảnh, chuyển từ trắng sang xám như hai tông */
h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #8b8d93 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head h1, .dieu-khoan h1 { background: none; color: var(--ink); }
.card h2 { font-weight: 500; letter-spacing: .06em; font-size: 13px; color: var(--muted); }
.sub { color: var(--muted); font-size: 16px; }

/* Thẻ và ô nhập: trong mờ, viền mảnh, bo lớn */
.card, .box, .row, .axis, .kpis div, .ddx-row, .training-toggle, details.card { background: var(--card); border-color: var(--line); }
.box { background: rgba(255, 255, 255, .02); }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=search], input[type=password], select, textarea {
  background: var(--input); color: var(--ink); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
input[readonly] { background: rgba(255, 255, 255, .02); }
select option { background: #151517; color: var(--ink); }
.checks input, .consent input { accent-color: #f2f2f3; }
.drop { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .02); border-radius: var(--radius); }
.drop.over { background: rgba(255, 255, 255, .06); border-color: #fff; }

/* Nút viên thuốc: nút chính nền trắng chữ đen, nút phụ viền mảnh */
button, a.btn {
  border-radius: 999px; background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, .2); padding: 11px 22px; font-weight: 500; letter-spacing: 0;
}
button:hover:not(:disabled), a.btn:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
button.primary, a.btn.primary { background: #f5f5f6; color: #0a0a0b; border-color: #f5f5f6; box-shadow: 0 8px 30px rgba(255, 255, 255, .08); }
button.primary:hover:not(:disabled), a.btn.primary:hover { background: #ffffff; border-color: #fff; }
button.link { color: var(--ink); border: 0; background: none; }
.thumbs button { background: rgba(10, 10, 11, .75); }
.tabs button, .xac-thuc .tabs a { border-radius: 0; }
.tabs button[aria-selected="true"], .xac-thuc .tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.topbar .dang-xuat { border-radius: 999px; }
.badge { border-radius: 999px; }
.steps span { border-color: rgba(255, 255, 255, .2); }
.steps span.on { background: #f5f5f6; border-color: #f5f5f6; color: #0a0a0b; }
.steps i { background: rgba(255, 255, 255, .15); }

/* Thông báo, mức độ, đèn tín hiệu trên nền tối */
#toast { background: #f5f5f6; color: #0a0a0b; border-radius: 999px; }
.tips { background: var(--card); }
.den-tin-hieu p { color: var(--ink); opacity: .9; }
.dai-bao.xem { background: #f5f5f6; color: #0a0a0b; }
.dai-bao.xem a { color: #0a0a0b; }
.nhan-ai { background: #f5f5f6; color: #0a0a0b; }
.buoi-so { background: #f5f5f6; color: #0a0a0b; }
.pill.pending { background: rgba(255, 255, 255, .08); color: var(--muted); }
.site-foot { border-top-color: var(--line); }
a { color: inherit; }

/* Phiếu gửi khách: giấy sáng để đọc, in và gửi Zalo */
.phieu-khach {
  --bg: #f7f7f5; --card: #ffffff; --ink: #141518; --muted: #63666b; --line: #e8e8e5;
  --ok: #2f7a50; --ok-soft: #e5f1ea; --mild: #8a6514; --mild-soft: #f6efdd; --mid: #b4561a; --mid-soft: #f8e7da; --bad: #a8322a; --bad-soft: #f6e1de;
  color: var(--ink); color-scheme: light; border-radius: 20px;
}
.pk-dau:not(.pk-dau-spa) { background: #0b0b0c; }
@media print {
  :root {
    color-scheme: light; --bg: #fff; --card: #fff; --ink: #141518; --muted: #63666b; --line: #e8e8e5;
    --ok: #2f7a50; --ok-soft: #e5f1ea; --mild: #8a6514; --mild-soft: #f6efdd; --mid: #b4561a; --mid-soft: #f8e7da; --bad: #a8322a; --bad-soft: #f6e1de;
  }
  body { background: #fff; color: var(--ink); }
  body::after, main::before { display: none; }
  h1 { background: none; color: var(--ink); }
}
.head h1 { font-weight: 400; letter-spacing: -.02em; }
.dau-doi { display: inline-block; margin-left: 6px; font-weight: 700; color: var(--muted); }
.dau-doi.len, .bang-tien-trien b.len { color: var(--ok); }
.dau-doi.xuong, .bang-tien-trien b.xuong { color: var(--mid); }
.bang-tien-trien .cot-chot { background: rgba(255, 255, 255, .05); border-left: 1px solid var(--line); }
.alert button, .anh-loi button { margin-left: 6px; padding: 6px 14px; font-size: 13px; }
.pk-muc h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-left: 6px; }
/* ---- Biểu đồ mức độ qua các lần soi (bảng màu đã kiểm tra mù màu: nền tối và nền sáng) ---- */
.bieu-do { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; position: relative; margin: 0; }
.phieu-khach .bieu-do { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; }
.bieu-do figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.bieu-do figcaption span { color: var(--muted); font-size: 13px; }
.bieu-do svg { width: 100%; height: auto; display: block; overflow: visible; }
.chu-giai { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.chu-giai i, .goi-y-bd i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bieu-do .luoi { stroke: var(--line); stroke-width: 1; }
.bieu-do .nhan-truc { fill: var(--muted); font-size: 12px; }
.bieu-do .nhan-truc.phu { font-size: 11px; opacity: .8; }
.bieu-do .duong { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bieu-do .diem { stroke: var(--bg); stroke-width: 2; }
.phieu-khach .bieu-do .diem { stroke: #fff; }
.bieu-do .nhan-duong { fill: var(--ink); font-size: 12px; }
.bieu-do .vach-do { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.bieu-do .vung-cham { fill: transparent; cursor: crosshair; }
.goi-y-bd { position: absolute; top: 40px; z-index: 5; display: grid; gap: 4px; padding: 10px 12px; min-width: 190px; font-size: 12px; border-radius: 12px; background: #1b1c1f; color: #f2f2f3; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); pointer-events: none; }
.goi-y-bd small { color: #a9abb1; }
@media print { .goi-y-bd, .vach-do { display: none; } }
/* ---- Dẫn chứng thay đổi trên da và ảnh từng góc ---- */
.thay-doi { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.thay-doi li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.thay-doi li p { margin: 4px 0 0; line-height: 1.5; }
.thay-doi small { color: var(--muted); }
.cap-anh { display: grid; gap: 12px; }
.cap-anh-dong { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-anh-dong .zone { grid-column: 1 / -1; }
.cap-anh figure { margin: 0; }
.cap-anh img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; }
.cap-anh figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.pk-h3 { font-size: 14px; margin: 14px 0 8px; }
.pk-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.pk-bang th, .pk-bang td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pk-bang .pk-chot td { background: var(--bg); }
.nut-buoi { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.nut-buoi .btn { justify-content: center; padding: 8px 14px; font-size: 13px; }
@media (max-width: 700px) { .nut-buoi { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; } }
.goi-y-bd[hidden] { display: none; }
.phieu-khach .cap-anh img, .tien-trien .cap-anh img { aspect-ratio: 4 / 5; max-height: 240px; }
.phieu-khach .cap-anh, .tien-trien .cap-anh { max-width: 520px; }
/* ---- Chọn gói, phiếu đang chờ ---- */
.chon-goi-tieu-de { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; margin: 20px 0 10px; }
.chon-goi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.goi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.goi input { position: absolute; opacity: 0; pointer-events: none; }
.goi b { font-size: 17px; }
.goi span { font-size: 14px; }
.goi small { color: var(--muted); font-size: 12px; }
.goi.chon { border-color: #f5f5f6; box-shadow: inset 0 0 0 1px #f5f5f6; }
.goi:focus-within { outline: 2px solid rgba(255, 255, 255, .3); }
.cho-batch { display: grid; gap: 14px; }
.cho-dong { display: flex; gap: 12px; align-items: flex-start; }
.cho-dong p { margin: 4px 0 0; }
@media (max-width: 700px) { .chon-goi { grid-template-columns: 1fr; } }
.goi { position: relative; }

/* Phiếu nhận xét kết quả AI */
.muc-nx { margin: 22px 0 10px; }
.chon-nhanh { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chon-nhanh label { cursor: pointer; }
.chon-nhanh input { position: absolute; opacity: 0; width: 0; height: 0; }
.chon-nhanh span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; line-height: 1.3; }
.chon-nhanh input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg, #000); font-weight: 600; }
.chon-nhanh input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.truc-nx { display: grid; gap: 4px; margin: 10px 0 18px; }
.truc-nx-dong { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.truc-nx-dong > span { font-size: 14px; }
.truc-nx-dong .chon-nhanh { margin-top: 0; flex-shrink: 0; }
.truc-nx-dong.da-sua { background: var(--mild-soft); }
.nx-them .full { grid-column: 1 / -1; }
.moi-nx { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .truc-nx-dong { flex-direction: column; align-items: flex-start; gap: 6px; } }

#review { scroll-margin-top: 90px; }
.muc-nx { clear: both; }
#review-form .grid2 { margin-bottom: 6px; }

/* Tổng hợp nhận xét */
.kpis-nx { grid-template-columns: repeat(4, 1fr); }
.bang-cuon { overflow-x: auto; }
.bang-nx { min-width: 460px; }
.bang-nx td:last-child { white-space: normal; font-weight: 400; }
.bang-nx th { font-weight: 600; color: var(--muted); font-size: 13px; }
.hang-nx { display: grid; gap: 10px; }
.dong-nx { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.dong-nx-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.dong-nx p { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 760px) { .kpis-nx { grid-template-columns: 1fr 1fr; } }

/* ---------- Bố cục theo thiết bị: máy tính menu trái, iPad menu dọc gọn, điện thoại menu đáy ---------- */
#nav-them, #tk-nut { display: none; }
#nav-phu { display: contents; }
#tk-bang { display: contents; }
.phieu-dau { display: grid; gap: 14px; margin-bottom: 16px; }
.phieu-dau > .card { margin: 0; min-width: 0; }
.nut-phieu { flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 0; }
.nut-chinh { display: flex; gap: 8px; align-items: center; }
.anh-phieu .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.anh-phieu .photos img:first-child { grid-column: 1 / -1; }
.lam-ngay-the h3:first-child { margin-top: 0; }

@media screen {
  main:has(.phieu-dau), main:has(#tong-hop) { max-width: 1240px; }
  body:not(.chua-dang-nhap) { display: grid; grid-template-columns: var(--cot-menu, 232px) minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; }
  body:not(.chua-dang-nhap) > .topbar { grid-column: 1; grid-row: 1 / 4; position: sticky; top: 0; align-self: start; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 22px 14px; border-bottom: 0; border-right: 1px solid var(--line); overflow-y: auto; }
  body:not(.chua-dang-nhap) > #banner { grid-column: 2; grid-row: 1; }
  body:not(.chua-dang-nhap) > main { grid-column: 2; grid-row: 2; width: 100%; box-sizing: border-box; }
  body:not(.chua-dang-nhap) > .site-foot { grid-column: 2; grid-row: 3; width: 100%; box-sizing: border-box; }
  body:not(.chua-dang-nhap) .brand { margin: 0 8px 18px; }
  body:not(.chua-dang-nhap) nav { order: 0; flex: 1 1 auto; flex-basis: auto; flex-direction: column; gap: 2px; margin: 0; overflow: visible; }
  body:not(.chua-dang-nhap) nav a { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 12px; border: 0; border-radius: 10px; }
  body:not(.chua-dang-nhap) nav a.active { background: var(--brand-soft); border: 0; }
  body:not(.chua-dang-nhap) #tk-bang { display: flex; flex-direction: column; gap: 6px; }
  body:not(.chua-dang-nhap) #tk-bang .badge { margin: 0; white-space: normal; border-radius: 12px; padding: 10px 12px; }
  body:not(.chua-dang-nhap) #tk-bang .dang-xuat { min-height: 40px; }
  .lam-ngay-the .lam-ngay { grid-template-columns: 1fr; }
}
@media screen and (min-width: 1100px) {
  .phieu-dau { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 320px); align-items: start; }
}

/* iPad: menu dọc gọn, nút to hơn, ảnh cạnh tóm tắt */
@media screen and (min-width: 768px) and (max-width: 1099px) {
  body:not(.chua-dang-nhap) { --cot-menu: 88px; }
  body:not(.chua-dang-nhap) > .topbar { padding: 14px 6px; overflow: visible; }
  body:not(.chua-dang-nhap) .brand { margin: 0 4px 12px; }
  body:not(.chua-dang-nhap) .brand-logo { width: 100%; height: auto; }
  body:not(.chua-dang-nhap) nav a, #tk-nut { min-height: 60px; justify-content: center; text-align: center; padding: 4px; font-size: 13px; line-height: 1.25; white-space: normal; }
  #nav-phu { display: contents; }
  body:not(.chua-dang-nhap) #tk-nut { display: block; background: none; border: 0; color: var(--steel); font-weight: 400; border-radius: 10px; }
  body:not(.chua-dang-nhap) #tk-bang { display: none; position: fixed; left: 96px; bottom: 14px; width: 240px; z-index: 30; padding: 12px; background: #17181a; border: 1px solid var(--line); border-radius: 14px; }
  body:not(.chua-dang-nhap) #tk-bang.mo { display: flex; }
  body:not(.chua-dang-nhap) #tk-bang .dang-xuat, button, .btn { min-height: 44px; }
  .phieu-dau { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); align-items: start; }
  .lam-ngay-the { grid-column: 1 / -1; }
  .lam-ngay-the .lam-ngay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Điện thoại: đầu trang gọn, menu ở đáy, nút chính luôn trong tầm tay */
@media screen and (max-width: 767px) {
  body:not(.chua-dang-nhap) { display: block; padding-bottom: 72px; }
  body:has(.nut-chinh) { padding-bottom: 140px !important; }
  body:not(.chua-dang-nhap) > .topbar { position: sticky; top: 0; z-index: 20; height: 56px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  body:not(.chua-dang-nhap) .brand { margin: 0; }
  body:not(.chua-dang-nhap) nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; flex: none; flex-direction: row; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; height: 64px; padding-bottom: env(safe-area-inset-bottom); background: #101012; border-top: 1px solid var(--line); }
  body:not(.chua-dang-nhap) nav a, #nav-them { min-height: 0; height: 100%; justify-content: center; text-align: center; padding: 2px; font-size: 12px; line-height: 1.25; white-space: normal; border-radius: 0; }
  body:not(.chua-dang-nhap) nav a.active { background: none; color: var(--on-dark); font-weight: 700; }
  body:not(.chua-dang-nhap) #nav-them { display: block; background: none; border: 0; color: var(--steel); font-weight: 400; }
  #nav-them:has(+ #nav-phu a.active) { color: var(--on-dark) !important; font-weight: 700 !important; }
  #nav-phu { display: none; position: fixed; right: 8px; bottom: 72px; z-index: 30; min-width: 170px; padding: 6px; background: #17181a; border: 1px solid var(--line); border-radius: 14px; }
  #nav-phu.mo { display: grid; }
  body:not(.chua-dang-nhap) #nav-phu a { height: 46px; justify-content: flex-start; padding: 0 12px; font-size: 15px; }
  body.chi-quan-tri nav { display: flex; }
  body.chi-quan-tri #nav-them { display: none; }
  body.chi-quan-tri #nav-phu { display: contents; }
  body:not(.chua-dang-nhap) #tk-nut { display: block; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--steel); font-weight: 400; font-size: 14px; }
  body:not(.chua-dang-nhap) #tk-bang { display: none; position: fixed; right: 8px; top: 60px; width: min(280px, calc(100vw - 16px)); z-index: 30; padding: 12px; background: #17181a; border: 1px solid var(--line); border-radius: 14px; }
  body:not(.chua-dang-nhap) #tk-bang.mo { display: flex; }
  body:not(.chua-dang-nhap) #tk-bang .dang-xuat { min-height: 44px; }
  button, .btn { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .phieu-dau { grid-template-columns: minmax(0, 1fr); }
  .anh-phieu { order: 2; padding: 10px; }
  .anh-phieu .photos { display: flex; overflow-x: auto; }
  .anh-phieu .photos img, .anh-phieu .photos img:first-child { flex: 0 0 96px; width: 96px; }
  .nut-phieu { justify-content: flex-start; }
  .nut-chinh { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 24; box-sizing: border-box; padding: 8px 12px; background: #101012; border-top: 1px solid var(--line); }
  .nut-chinh > * { flex: 1 1 0; text-align: center; }
  .moi-nx { display: none; }
  body:not(.chua-dang-nhap) > .site-foot { padding-bottom: 16px; }
}

/* Khung có backdrop-filter sẽ giữ phần tử fixed bên trong nó: menu đáy và bảng bật lên phải bám theo màn hình */
@media screen { body:not(.chua-dang-nhap) > .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; } }
.topbar [hidden] { display: none !important; }
.nhac-chup { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }

/* Hướng dẫn đưa ảnh mặt lên theo từng bước */
.buoc-chup { list-style: none; counter-reset: buoc; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.buoc-chup > li { counter-increment: buoc; position: relative; padding-left: 36px; line-height: 1.5; }
.buoc-chup > li::before { content: counter(buoc); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); font-size: 13px; font-weight: 700; }
.buoc-chup .goc-chup { margin: 10px 0 2px; }
.drop[data-drop="face"] b { color: var(--ink); }
@media screen { body:not(.chua-dang-nhap) > .topbar { background: #0a0a0b; } }