/* ===== UI kit (js/ui-kit.js): hộp thoại + thành phần Material phẳng =====
   Triết lý: đơn giản, đẹp, phẳng, người chơi không phải nghĩ.
   Hình dạng: MỌI điều khiển là viên thuốc (999px), cao --k-ctl (chip 30px); khung chứa bo 14–22px. Không có góc vuông.
   Màu nhấn duy nhất: Amber. Màu hệ ngũ hành chỉ làm điểm nhấn nội dung. */

:root{   /* token dùng chung: cả phần tử ngoài lớp hộp thoại (ví dụ bảng chọn thuốc) cũng dùng được */
  --k-acc:#ffc107;--k-acc-lt:#ffd54f;--k-acc-dk:#ffb300;--k-on-acc:#1f1600;
  --k-acc-tone:rgba(255,193,7,.14);--k-acc-tone2:rgba(255,193,7,.24);
  --k-danger:#ef5350;--k-danger-tone:rgba(239,83,80,.16);
  --k-surface:#1b2220;--k-card:#232c28;--k-raised:#2a3430;--k-input:#161c1a;
  --k-line:rgba(255,255,255,.07);--k-line2:rgba(255,255,255,.16);--k-hover:rgba(255,255,255,.06);
  --k-text:#eef3f0;--k-dim:#9fb0a7;--k-faint:#6f7d77;
  --k-ctl:34px;--k-r-card:14px;--k-r-dlg:22px;
  --k-ease:cubic-bezier(.2,.8,.2,1)}
.k-layer{position:absolute;inset:0;z-index:39;pointer-events:none;font-family:var(--font);color:var(--k-text);color-scheme:dark}
.k-layer *{box-sizing:border-box}

/* ---------- hộp thoại ---------- */
.k-wrap{position:absolute;inset:0;display:grid;place-items:center;padding:24px;pointer-events:auto;isolation:isolate}   /* mỗi hộp thoại một ngữ cảnh xếp lớp: z-index bên trong không vượt qua nền mờ của hộp thoại chồng lên */
.k-scrim{position:absolute;inset:0;background:rgba(4,7,6,.55);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);opacity:0;transition:opacity .2s ease}
.k-dialog{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:100%;min-height:0;border-radius:var(--k-r-dlg);outline:none;overflow:hidden;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,193,7,.06),transparent 55%),var(--k-surface);
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35),inset 0 0 0 1px var(--k-line);
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .22s var(--k-ease),transform .26s var(--k-ease)}
.k-sm{width:min(400px,100%)} .k-md{width:min(560px,100%)} .k-lg{width:min(760px,100%)}
.k-wrap.k-in .k-scrim{opacity:1}
.k-wrap.k-in .k-dialog{opacity:1;transform:none}
.k-wrap.k-out .k-scrim{opacity:0;transition-duration:.16s}
.k-wrap.k-out .k-dialog{opacity:0;transform:translateY(8px) scale(.985);transition-duration:.16s}

/* đầu: huy hiệu + tiêu đề + nút đóng */
/* đầu gọn: tiêu đề chỉ để định hướng, sự chú ý dành cho nội dung (quy tắc thiết kế) */
.k-head{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 10px 5px 18px;position:relative;z-index:1;transition:box-shadow .2s}
.k-badge{flex:none;   /* luôn màu Amber cho mọi hộp thoại (quy tắc thiết kế) */
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--k-acc-tone);color:var(--k-acc-lt)}
.k-badge svg{width:18px;height:18px;fill:currentColor}
.k-titles{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;row-gap:0}
.k-titles h2{margin:0;font:600 15.5px/1.3 var(--font);letter-spacing:.1px;color:#f4f8f5}
.k-titles p{margin:0;font-size:11.5px;line-height:1.35;color:var(--k-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}   /* phụ đề cùng dòng tiêu đề khi đủ chỗ */
/* Quy tắc: mọi thứ bấm được phải trông bấm được ngay khi chưa rê chuột (có nền hoặc viền), không dùng nút chỉ có chữ / biểu tượng trơn. */
.k-iconbtn{flex:none;width:var(--k-ctl);height:var(--k-ctl);padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--k-line2);color:#dfe7e2}
.k-iconbtn svg{width:20px;height:20px;fill:currentColor}
.k-iconbtn:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);color:#fff}
.k-x{width:30px;height:30px}
.k-x svg{width:18px;height:18px}

/* thẻ: thanh viên thuốc, nút trượt nền Amber nhạt */
.k-tabs{position:relative;display:flex;margin:4px 18px 8px;padding:4px;border-radius:999px;background:var(--k-input);box-shadow:inset 0 0 0 1px var(--k-line);z-index:1}
.k-tabs[hidden]{display:none}
.k-tabs button{position:relative;z-index:1;flex:1;height:32px;border:0;border-radius:999px;background:none;color:var(--k-dim);font:500 13px var(--font);cursor:pointer;white-space:nowrap;transition:color .2s}
.k-tabs button:hover{color:var(--k-text)}
.k-tabs button[aria-selected=true]{color:var(--k-acc-lt)}
.k-thumb{position:absolute;left:0;top:4px;height:32px;border-radius:999px;background:var(--k-acc-tone);box-shadow:inset 0 0 0 1px rgba(255,193,7,.35);transition:transform .28s var(--k-ease),width .28s var(--k-ease)}

/* thân: cuộn, bóng mờ đầu/cuối khi còn nội dung */
.k-body{flex:1;min-height:0;overflow-y:auto;padding:6px 18px 18px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#3d4945 transparent;overscroll-behavior:contain}
.k-body::-webkit-scrollbar{width:8px}.k-body::-webkit-scrollbar-thumb{background:#3d4945;border-radius:8px}
.k-sc-top .k-tabs:not([hidden]){box-shadow:inset 0 0 0 1px var(--k-line),0 10px 12px -10px rgba(0,0,0,.7)}
.k-dialog.k-sc-top:has(.k-tabs[hidden]) .k-head{box-shadow:0 10px 12px -10px rgba(0,0,0,.7)}
.k-foot{display:flex;justify-content:flex-end;gap:10px;padding:10px 18px 14px;position:relative;transition:box-shadow .2s}
.k-foot[hidden]{display:none}
.k-sc-bot .k-foot{box-shadow:0 -10px 12px -10px rgba(0,0,0,.7)}
.k-msg{margin:0;font-size:14px;line-height:1.55;color:#dfe7e2}

/* màn hẹp (lớp < 520px, ui-kit.js gắn .k-narrow): bottom sheet */
.k-layer.k-narrow .k-wrap{place-items:end center;padding:0}
.k-layer.k-narrow .k-dialog{width:100%;max-height:88%;border-radius:var(--k-r-dlg) var(--k-r-dlg) 0 0;transform:translateY(40px)}
.k-layer.k-narrow .k-wrap.k-in .k-dialog{transform:none}

@media (prefers-reduced-motion:reduce){.k-scrim,.k-dialog,.k-thumb,.k-menu{transition:none!important}}

/* ---------- khối nội dung ---------- */
.k-card{background:var(--k-card);border-radius:var(--k-r-card);padding:12px 16px 14px;box-shadow:inset 0 0 0 1px var(--k-line)}
.k-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;min-height:20px}
.k-card-h h4{margin:0;font:600 11px/1.4 var(--font);letter-spacing:.8px;text-transform:uppercase;color:var(--k-dim)}
.k-meta{font-size:12px;color:var(--k-dim)}
.k-note{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--k-dim)}
.k-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;flex-wrap:wrap}
.k-row>span{font:400 14px var(--font);color:var(--k-text)}
.k-sw+.k-row,.k-row+.k-row,.k-row+.k-sw,.k-sw+.k-sw{border-top:1px solid var(--k-line)}
.k-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.k-field>span{font-size:12px;color:var(--k-dim)}
.k-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.k-sub{margin:12px 0 7px;font-size:12px;color:var(--k-dim)}

/* ---------- công tắc ---------- */
.k-sw{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;cursor:pointer;position:relative}
.k-sw-t b{display:block;font:500 14px/1.3 var(--font);color:var(--k-text)}
.k-sw-t small{display:block;margin-top:1px;font-size:12px;line-height:1.4;color:var(--k-dim)}
.k-sw input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.k-sw i{flex:none;position:relative;width:40px;height:22px;border-radius:999px;background:#46514c;transition:background-color .2s var(--k-ease)}
.k-sw i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#d5ddd9;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s var(--k-ease),background-color .2s,width .15s}
.k-sw:active i::after{width:19px}
.k-sw input:checked+i{background:rgba(255,193,7,.42)}
.k-sw input:checked+i::after{transform:translateX(18px);background:var(--k-acc)}
.k-sw:active input:checked+i::after{transform:translateX(15px)}
.k-sw input:focus-visible+i{outline:2px solid var(--k-acc-lt);outline-offset:2px}
.k-sw.k-dis{opacity:.45;cursor:default}
.k-sw.k-bare{padding:0;gap:10px}

/* ---------- nút ---------- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--k-ctl);padding:0 18px;border:0;border-radius:999px;font:500 13px var(--font);white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .1s}
.k-btn:active:not(:disabled){transform:scale(.97)}
.k-primary{background:var(--k-acc);color:var(--k-on-acc);box-shadow:0 2px 6px rgba(255,193,7,.25)}
.k-primary:hover{background:var(--k-acc-lt)}
.k-tonal{background:var(--k-acc-tone);color:var(--k-acc-lt)}
.k-tonal:hover{background:var(--k-acc-tone2)}
.k-outline{background:none;color:#cfd8d3;box-shadow:inset 0 0 0 1px var(--k-line2)}
.k-outline:hover{background:var(--k-hover)}
.k-text{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--k-line2);color:#dfe7e2}   /* nút phụ trung tính: vẫn có nền + viền */
.k-text:hover{background:rgba(255,255,255,.14)}
.k-danger{background:var(--k-danger-tone);color:#ff8a80}
.k-danger:hover{background:rgba(239,83,80,.26)}
.k-foot .k-danger{background:var(--k-danger);color:#fff}
.k-btn:disabled{opacity:.4;cursor:default}
.k-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* ---------- nhóm chọn (segmented) ---------- */
.k-seg{display:inline-flex;height:var(--k-ctl);padding:3px;gap:2px;border-radius:999px;background:var(--k-input);box-shadow:inset 0 0 0 1px var(--k-line2)}
.k-seg button{height:100%;padding:0 13px;border:0;border-radius:999px;background:none;color:#cfd8d3;font:500 12.5px var(--font);cursor:pointer;transition:background-color .15s,color .15s}
.k-seg button:hover:not([aria-checked=true]):not(:disabled){background:var(--k-hover)}
.k-seg button[aria-checked=true]{background:var(--k-acc-tone2);color:var(--k-acc-lt)}
.k-seg button:disabled{opacity:.4;cursor:default}

/* ---------- ô nhập / ô chọn ---------- */
.k-layer input:not([type]),.k-layer input[type=text],.k-layer input[type=number],.k-select{
  appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:var(--k-ctl);margin:0;padding:0 16px!important;
  border:1px solid var(--k-line2)!important;border-image:none!important;border-radius:999px!important;background:var(--k-input)!important;   /* jx2.css: border-image in_box.png làm mất bo góc */
  color:var(--k-text);font:400 13px var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.k-layer input:hover,.k-select:hover{border-color:rgba(255,255,255,.3)!important}
.k-layer input:focus,.k-select:focus-visible,.k-select.k-open{border-color:var(--k-acc)!important;box-shadow:0 0 0 3px rgba(255,193,7,.18)}
.k-layer input::placeholder{color:var(--k-faint)}
.k-layer input[type=number]{-moz-appearance:textfield;text-align:center;padding:0 12px!important}
.k-layer input[type=number]::-webkit-inner-spin-button,.k-layer input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.k-native{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
.k-select{display:flex;align-items:center;gap:8px;padding:0 10px 0 16px!important;text-align:left;cursor:pointer}
.k-select:disabled{opacity:.45;cursor:default}
.k-sel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-chev{flex:none;width:20px;height:20px;fill:#c9d3cd;transition:transform .2s var(--k-ease)}
.k-select.k-open .k-chev{transform:rotate(180deg)}

/* menu của ô chọn: bo tròn, nổi, có dấu chọn */
.k-menu{position:absolute;z-index:3;max-height:288px;overflow-y:auto;padding:6px;border-radius:18px;pointer-events:auto;
  background:var(--k-raised);box-shadow:0 14px 36px rgba(0,0,0,.55),inset 0 0 0 1px var(--k-line);scrollbar-width:thin;scrollbar-color:#46514c transparent;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .14s ease,transform .18s var(--k-ease)}
.k-menu.k-up{transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.k-menu.k-in{opacity:1;transform:none}
.k-opt{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px 0 14px;border-radius:999px;font:400 13px var(--font);color:#dfe7e2;cursor:pointer;white-space:nowrap}
.k-opt span{flex:1}
.k-opt.k-act{background:var(--k-hover)}
.k-opt[aria-selected=true]{color:var(--k-acc-lt);font-weight:500}
.k-opt[aria-selected=true].k-act{background:var(--k-acc-tone)}
.k-tick{width:18px;height:18px;fill:var(--k-acc-lt);opacity:0}
.k-opt[aria-selected=true] .k-tick{opacity:1}
.k-opt[aria-disabled=true]{opacity:.4;cursor:default}

/* ---------- chip ---------- */
.k-chips{display:flex;flex-wrap:wrap;gap:6px}
.k-chip{position:relative;cursor:pointer}
.k-chip input{position:absolute;opacity:0;width:1px;height:1px}
.k-chip span{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--k-line2);color:var(--c,#cfd8d3);font:500 12px var(--font);transition:background-color .15s,box-shadow .15s}
.k-chip:hover span{background:var(--k-hover)}
.k-chip input:checked+span{background:var(--k-acc-tone);box-shadow:inset 0 0 0 1px var(--c,var(--k-acc));color:var(--c,var(--k-acc-lt))}
.k-chip input:focus-visible+span{outline:2px solid var(--k-acc-lt);outline-offset:2px}

/* tiêu điểm bàn phím thống nhất */
.k-btn:focus-visible,.k-seg button:focus-visible,.k-tabs button:focus-visible,.k-iconbtn:focus-visible{outline:2px solid var(--k-acc-lt);outline-offset:2px}

/* Nút chân có biểu tượng: chip tròn chỉ biểu tượng (.k-ico, có viền), đẩy phải (.k-push), trạng thái bật (.k-on) */
.k-foot .k-btn svg{flex:none;width:17px;height:17px;fill:currentColor}
.k-foot .k-btn img{flex:none;width:18px;height:18px;object-fit:contain}
.k-foot .k-ico{width:var(--k-ctl);padding:0}
.k-foot .k-push{margin-left:auto}
.k-foot .k-outline.k-on{background:var(--k-acc-tone);color:var(--k-acc-lt);box-shadow:inset 0 0 0 1px rgba(255,213,79,.45)}

/* ===== Thông báo dùng chung: chấm đỏ (.k-dot) và số đỏ (.k-cnt), viền tối + quầng sáng để nổi trên mọi nền ===== */
:root{--k-noti:#ff4d4f;--k-noti-ring:0 0 0 2px #141a18,0 0 8px rgba(255,77,79,.7)}
.k-dot{display:inline-block;flex:none;width:8px;height:8px;margin-left:6px;vertical-align:middle;border-radius:50%;background:var(--k-noti);box-shadow:var(--k-noti-ring);animation:kNoti 2.4s ease-in-out infinite}
.k-cnt{display:inline-grid;place-items:center;flex:none;min-width:16px;height:16px;padding:0 4px;margin-left:6px;box-sizing:border-box;vertical-align:middle;border-radius:999px;
  background:var(--k-noti);color:#fff;font:700 10px/1 var(--font);font-style:normal;box-shadow:var(--k-noti-ring)}
@keyframes kNoti{0%,100%{box-shadow:0 0 0 2px #141a18,0 0 3px rgba(255,77,79,.35)}50%{box-shadow:0 0 0 2px #141a18,0 0 10px rgba(255,77,79,.95)}}
@media (prefers-reduced-motion:reduce){.k-dot{animation:none}}
/* thẻ theo độ rộng chữ (+ chấm thông báo), chia phần dư. Không cuộn: overflow-x:auto biến thanh thẻ thành vùng cuộn, nó bị cuộn dọc
   (khi thẻ nhận focus) làm chữ / nền trượt lệch. Thiếu chỗ thì nới rộng hộp thoại. */
.k-tabs{gap:2px;overflow:visible}
.k-tabs button{flex:1 1 auto;min-width:max-content;padding:0 12px;display:inline-flex;align-items:center;justify-content:center}
.k-tabs .k-dot{margin-left:5px}

/* màn hẹp: chữ thẻ nhỏ hơn; nếu vẫn không đủ chỗ thì thanh thẻ cuộn ngang (chỉ ngang; ui-kit.js moveThumb giữ scrollTop = 0) */
.k-layer.k-narrow .k-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.k-layer.k-narrow .k-tabs::-webkit-scrollbar{display:none}
.k-layer.k-narrow .k-tabs button{padding:0 10px;font-size:12.5px}

/* Đầu, thanh thẻ, chân không bao giờ bị cột flex của hộp thoại ép thấp (thanh thẻ là vùng cuộn ngang trên màn hẹp,
   min-height của nó về 0 nên bị co còn ~17–36px và chữ trượt khỏi khung). Chỉ thân hộp thoại co / cuộn. */
.k-head,.k-tabs,.k-foot{flex-shrink:0}
/* nhãn ngắn của thẻ (phần tử thứ 4 trong tabs): chỉ hiện trên màn hẹp; thẻ biểu tượng đang chọn hiện cả nhãn */
.k-ts{display:none}
.k-ti svg{width:17px;height:17px;fill:currentColor;display:block}
.k-layer.k-narrow .k-tabs button{padding:0 6px;font-size:12px;gap:4px}
.k-layer.k-narrow .k-tabs button .k-tl{display:none}
.k-layer.k-narrow .k-tabs button .k-ts{display:inline-flex}
.k-layer.k-narrow .k-tabs button[aria-selected=true] .k-tl{display:inline}
.k-layer.k-narrow .k-tabs button[aria-selected=true] .k-ts:not(.k-ti){display:none}
/* nhãn đổi theo bề rộng trong thân hộp thoại: <span class="k-wl">dài</span><span class="k-ws">ngắn</span> (ngắn có thể rỗng = chỉ biểu tượng) */
.k-ws{display:none}
.k-layer.k-narrow .k-wl{display:none}
.k-layer.k-narrow .k-ws{display:inline}
/* bottom sheet: chừa vùng an toàn dưới đáy (thanh cử chỉ / home indicator, viewport-fit=cover) để luôn thấy hết cuối hộp thoại */
.k-layer.k-narrow .k-body{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.k-layer.k-narrow .k-foot:not([hidden]){padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.k-layer.k-narrow .k-dialog:has(.k-foot:not([hidden])) .k-body{padding-bottom:14px}