/* ==========================================================================
   HỆ THỐNG GIAO DIỆN
   Nguyên tắc:
   - Mọi ô nhập đều 16px. Dưới 16px là Safari tự phóng to trang khi bấm vào ô.
   - Viền an toàn dùng env(safe-area-inset-*) để né Dynamic Island và vạch Home.
   - Mỗi mục có một màu nhận dạng riêng, đặt vào biến --acc theo từng trang,
     nên chỉ cần đổi màu ở js/config.js là toàn bộ trang đổi theo.
   ========================================================================== */

:root {
  --nen:        #f5f6fa;
  --nen-the:    #ffffff;
  --nen-chim:   #eceef4;
  --chu:        #0e1220;
  --chu-vua:    #4a5164;
  --chu-mo:     #7b8397;
  --vien:       #e3e6ee;
  --vien-dam:   #d3d7e3;

  --acc:        #2f6fed;      /* màu nhận dạng, đổi theo từng trang */
  --acc-nen:    #eaf1fe;
  --acc-chu:    #1d4fb8;

  --nguy:       #d92d20;
  --nguy-nen:   #fdecec;
  --vang:       #b7791f;
  --vang-nen:   #fef6e7;
  --vang-dam:   var(--vang);     /* tên cũ vẫn được dùng ở nhãn "Tuỳ sản phẩm" */
  --vang-nhat:  var(--vang-nen);

  --bong-nho:   0 1px 2px rgba(14,18,32,.05), 0 1px 3px rgba(14,18,32,.06);
  --bong-vua:   0 2px 4px rgba(14,18,32,.04), 0 6px 16px rgba(14,18,32,.08);
  --bong-cao:   0 8px 28px rgba(14,18,32,.14);

  --r-nho:  10px;
  --r:      16px;
  --r-lon:  22px;

  --dau-cao: 52px;
  --menu-cao: 44px;   /* thanh chọn mục ngay dưới thanh trên */
  --tab-cao: 0px;     /* không còn thanh tab ở đáy; giữ biến cho thông báo nổi, nút Lưu */

  --nhay: cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen:       #0b0d14;
    --nen-the:   #171a24;
    --nen-chim:  #21252f;
    --chu:       #f3f4f8;
    --chu-vua:   #b9bfd0;
    --chu-mo:    #868da1;
    --vien:      #2a2f3c;
    --vien-dam:  #3a4152;

    --acc:       #5b8cff;
    --acc-nen:   #16223d;
    --acc-chu:   #9fbcff;

    --nguy:      #ff6b60;
    --nguy-nen:  #381613;
    --vang:      #f0c674;
    --vang-nen:  #362c14;
    --vang-dam:  var(--vang);
    --vang-nhat: var(--vang-nen);

    --bong-nho:  0 1px 2px rgba(0,0,0,.4);
    --bong-vua:  0 4px 14px rgba(0,0,0,.45);
    --bong-cao:  0 10px 34px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em;
  padding-top:    calc(var(--dau-cao) + var(--menu-cao) + env(safe-area-inset-top));
  padding-bottom: calc(var(--tab-cao) + env(safe-area-inset-bottom) + 8px);
}
body.khong-dau { padding-top: env(safe-area-inset-top); }

h1, h2, h3 { letter-spacing: -.022em; }

/* Chuỗi dài không có dấu cách (tên hoá chất, mã, đường dẫn dán vào) phải được
   bẻ dòng, nếu không nó tràn ra ngoài rồi bị cắt mất, đọc không ra. */
h1, h2, h3, .ds-ten, .ds-phu, .lk-ten, .lk-phu, .chip, .thuoc-ten,
.the-hoi, .the-dap-chu, .on-ten, .on-phu, .buoc-ten, .lieu-gt,
.ct-ten, .ct-phu, .ct-chu, .the-chu, .dai-num {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Thanh trên
   ========================================================================== */
.dau {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--dau-cao) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0;
  display: flex; align-items: center; gap: 4px;
  background: var(--nen-the);      /* dự phòng nếu không hiểu color-mix */
  background: color-mix(in srgb, var(--nen-the) 78%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--vien);
  transition: opacity .2s;
}
.dau.an { opacity: 0; pointer-events: none; }
.dau-ten { flex: 1; text-align: center; font-weight: 650; font-size: 17px; }
.dau-ben { min-width: 90px; display: flex; }
.dau-phai { justify-content: flex-end; }
.dau-nut {
  border: 0; background: none; color: var(--acc);
  font: inherit; font-size: 16px; padding: 8px 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; border-radius: 8px;
}
.dau-nut-chinh { font-weight: 650; }
.dau-nut:active { opacity: .45; }

/* ==========================================================================
   Thanh chọn mục (sổ xuống) — ngay dưới thanh trên
   ========================================================================== */
.tab {
  position: fixed; left: 0; right: 0; z-index: 29;
  top: calc(var(--dau-cao) + env(safe-area-inset-top));
  height: var(--menu-cao);
  padding: 0 10px;
  display: flex; align-items: center;
  /* Nền đặc, KHÔNG dùng backdrop-filter: nó biến thanh thành khung chứa của mọi con
     position:fixed, và lớp mờ phủ màn hình bên dưới sẽ bị co lại bằng đúng thanh này. */
  background: var(--nen-the);
  border-bottom: 1px solid var(--vien);
}
.menu-nut {
  flex: 1; display: flex; align-items: center; gap: 9px; height: 34px;
  padding: 0 12px; border-radius: 11px; border: 1px solid var(--vien);
  background: var(--nen-chim); color: var(--chu); font: inherit; cursor: pointer;
  transition: transform .15s var(--nhay);
}
.menu-nut:active { transform: scale(.98); }
.menu-icon { font-size: 18px; line-height: 1; }
.menu-ten { font-weight: 700; font-size: 15px; color: var(--acc); }
.menu-goi { margin-left: auto; font-size: 13px; color: var(--chu-mo); font-weight: 550; }
.menu-mui { font-size: 13px; color: var(--chu-mo); transition: transform .2s var(--nhay); }
.tab.mo .menu-mui { transform: rotate(180deg); }
.tab.mo .menu-nut { border-color: var(--acc); }

/* Lớp mờ phủ nội dung khi danh sách đang mở — chạm vào là gập lại */
.menu-lop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
  top: calc(var(--dau-cao) + var(--menu-cao) + env(safe-area-inset-top));
  background: rgba(6,8,14,.38);
  animation: menu-hien .18s ease-out;
}
.menu-ds {
  position: absolute; left: 10px; right: 10px; top: calc(100% + 6px);
  max-height: calc(100dvh - var(--dau-cao) - var(--menu-cao) - env(safe-area-inset-top) - 24px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--r);
  box-shadow: var(--bong-cao); padding: 6px;
  animation: menu-sa .2s var(--nhay);
}
.menu-mot {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px;
  border-radius: 11px; text-decoration: none; color: var(--chu);
}
.menu-mot + .menu-mot { margin-top: 2px; }
.menu-mot:active { background: var(--nen-chim); }
.menu-mot.dang { background: var(--acc-nen); }
.menu-mot-icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 20px; background: var(--nen-chim);
}
.menu-mot-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-mot-ten { font-weight: 650; font-size: 15.5px; }
.menu-mot.dang .menu-mot-ten { color: var(--acc); }
.menu-mot-mo { font-size: 12.5px; color: var(--chu-mo); overflow-wrap: anywhere; }
.menu-dau { color: var(--acc); font-weight: 800; }
@keyframes menu-sa { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes menu-hien { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Khung trang
   ========================================================================== */
.trang { padding: 14px 16px 30px; max-width: 760px; margin: 0 auto; }
.trang-vao { animation: vao .26s var(--nhay); }
@keyframes vao { from { opacity: 0; transform: translateY(8px); } }

.trong { text-align: center; padding: 48px 20px; color: var(--chu-mo); }
.trong-icon {
  font-size: 40px; margin: 0 auto 14px; width: 86px; height: 86px;
  display: grid; place-items: center; border-radius: 28px;
  background: var(--acc-nen);
}
.trong h3 { margin: 0 0 6px; font-size: 18px; color: var(--chu); }
.trong p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; }

/* ==========================================================================
   TRANG CHỦ
   ========================================================================== */
.hero {
  padding: 8px 2px 18px;
}
.hero-chao { font-size: 14px; color: var(--chu-mo); font-weight: 550; }
.hero-ten { font-size: 27px; font-weight: 750; margin: 2px 0 0; line-height: 1.2; }

/* Dải thống kê */
.dai {
  display: flex; gap: 10px; margin-bottom: 18px;
}
.dai-o {
  flex: 1; background: var(--nen-the); border-radius: var(--r);
  padding: 12px 10px; text-align: center; box-shadow: var(--bong-nho);
  border: 1px solid var(--vien);
}
.dai-num { font-size: 22px; font-weight: 750; line-height: 1.1; letter-spacing: -.03em; }
.dai-ten { font-size: 11px; color: var(--chu-mo); margin-top: 2px; font-weight: 550; }

/* Bốn thẻ mục lớn */
.muc-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.muc-the {
  position: relative; overflow: hidden;
  border-radius: var(--r-lon); padding: 15px 14px 14px;
  text-decoration: none; color: #fff; min-height: 116px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--bong-vua);
  transition: transform .2s var(--nhay);
}
.muc-the:active { transform: scale(.965); }
.muc-the::after {           /* vệt sáng chéo cho thẻ đỡ phẳng */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
  pointer-events: none;
}
.muc-icon { font-size: 27px; line-height: 1; }
.muc-ten { font-size: 16.5px; font-weight: 700; margin-top: auto; }
.muc-so { font-size: 12.5px; opacity: .88; font-weight: 550; }

/* Thẻ ôn nhanh */
.on-the {
  display: block; text-decoration: none; color: inherit;
  background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: var(--r-lon); padding: 16px; margin-bottom: 18px;
  box-shadow: var(--bong-nho);
  transition: transform .2s var(--nhay);
}
.on-the:active { transform: scale(.98); }
.on-dau { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.on-huy {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--acc); background: var(--acc-nen); padding: 3px 9px; border-radius: 7px;
}
.on-ten { font-size: 19px; font-weight: 700; margin: 0 0 3px; }
.on-phu { font-size: 14px; color: var(--chu-mo); }
.on-goi {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vien);
  font-size: 14px; color: var(--acc); font-weight: 600;
}

/* Tiêu đề khu vực */
.khu-de {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--chu-mo); margin: 0 0 9px 2px;
}

/* ==========================================================================
   Ô tìm kiếm
   ========================================================================== */
.tim-boc { position: relative; margin-bottom: 14px; }
.o-tim {
  width: 100%; font: inherit; font-size: 16px;
  padding: 12px 14px 12px 40px; border-radius: 13px;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu);
  -webkit-appearance: none; box-shadow: var(--bong-nho);
}
.o-tim::-webkit-search-cancel-button { -webkit-appearance: none; }
.tim-kinh {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .5; pointer-events: none;
}
.o-tim:focus { outline: 2px solid var(--acc); outline-offset: -1px; border-color: transparent; }

/* Lọc theo loại */
.loc-hang { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 4px; }
.loc-hang::-webkit-scrollbar { display: none; }
.loc-nut {
  flex: none; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu-vua);
}
.loc-nut.dang { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ==========================================================================
   Danh sách
   ========================================================================== */
.ds {
  background: var(--nen-the); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--bong-nho); border: 1px solid var(--vien);
}
.ds-hang {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--vien);
  transition: background .14s;
}
.ds-hang:last-child { border-bottom: 0; }
.ds-hang:active { background: var(--nen-chim); }
.ds-icon {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px;
  background: var(--acc-nen);
}
.ds-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-ten {
  font-weight: 600; font-size: 15.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-phu {
  font-size: 13px; color: var(--chu-mo); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-mui { color: var(--vien-dam); font-size: 19px; flex: none; }

/* Chữ cái đầu mục (A, B, C…) */
.them-boc { margin-top: 14px; }
.ds-chu-cai {
  font-size: 12px; font-weight: 750; color: var(--chu-mo);
  padding: 14px 4px 6px; letter-spacing: .08em;
}

/* ==========================================================================
   Trang chi tiết
   ========================================================================== */
.ct-dinh {
  margin: -14px -16px 16px; padding: 22px 16px 20px;
  color: #fff; position: relative; overflow: hidden;
}
.ct-dinh::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
}
.ct-dinh-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.ct-ten { font-size: 25px; line-height: 1.22; margin: 0 0 4px; font-weight: 750; position: relative; z-index: 1; }
.ct-phu { font-size: 14px; opacity: .9; position: relative; z-index: 1; }

.ct-khoi {
  background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 11px;
  box-shadow: var(--bong-nho);
}
.ct-de {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--acc); margin: 0 0 7px; font-weight: 700;
}
.ct-chu { overflow-wrap: anywhere; color: var(--chu-vua); line-height: 1.6; }
.ct-trong { color: var(--chu-mo); font-size: 14px; font-style: italic; }
.ct-meta { color: var(--chu-mo); font-size: 12px; text-align: center; margin: 16px 0; }
.ct-xoa { margin-top: 22px; }

/* Thẻ liều dùng (xem) */
.lieu-xem { display: flex; flex-direction: column; gap: 9px; }
.lieu-the {
  background: var(--nen-chim); border-radius: 13px; padding: 11px 13px;
  border-left: 3px solid var(--acc);
}
.lieu-the-dau { font-weight: 650; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.lieu-icon { font-size: 17px; }
.lieu-hang { display: flex; gap: 10px; font-size: 14px; padding: 3px 0; }
.lieu-nhan { color: var(--chu-mo); flex: none; min-width: 90px; }
.lieu-gt { flex: 1; overflow-wrap: anywhere; color: var(--chu); }

/* Bước điều trị (xem) */
.buoc-xem { display: flex; flex-direction: column; gap: 12px; }
.buoc-xem-mot { border-left: 3px solid var(--acc); padding-left: 12px; }
.buoc-xem-dau { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.buoc-so {
  font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acc); background: var(--acc-nen); padding: 3px 8px; border-radius: 6px;
}
.buoc-ten { font-weight: 650; }
.thuoc-xem { padding: 6px 0; border-bottom: 1px dashed var(--vien); }
.thuoc-xem:last-child { border-bottom: 0; }
.thuoc-ten { font-weight: 600; }
.thuoc-lk { color: var(--acc); text-decoration: none; }
.thuoc-lk::after { content: ' ›'; }
.thuoc-chi { font-size: 13px; color: var(--chu-mo); margin-top: 2px; }
.buoc-ghi { font-size: 14px; color: var(--chu-mo); margin-top: 7px; }

/* Danh sách liên kết */
.lk-ds { display: flex; flex-direction: column; }
.lk-hang {
  display: flex; align-items: center; gap: 11px; padding: 10px 0;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--vien);
}
.lk-hang:last-child { border-bottom: 0; }
.lk-hang:active { opacity: .5; }
.lk-icon {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; background: var(--nen-chim);
}
.lk-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lk-ten { font-weight: 600; color: var(--acc); font-size: 15px; }
.lk-phu {
  font-size: 12.5px; color: var(--chu-mo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lk-mui { color: var(--vien-dam); }

/* ==========================================================================
   Form
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 15px; }
.o { display: flex; flex-direction: column; gap: 6px; }
.o-nho { gap: 4px; }
.o-nhan { font-size: 13px; font-weight: 650; color: var(--chu-vua); }
.o-nhan .bat { color: var(--nguy); }
.o-nhap {
  width: 100%; font: inherit; font-size: 16px;   /* 16px: chống Safari tự phóng to */
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu);
  -webkit-appearance: none; transition: border-color .15s;
}
.o-nhap::placeholder { color: var(--chu-mo); opacity: .75; }
.o-nhap:focus { outline: 2px solid var(--acc); outline-offset: -1px; border-color: transparent; }
.o-dai { resize: none; overflow: hidden; line-height: 1.55; min-height: 48px; }

.form-nut {
  display: flex; gap: 10px; margin-top: 8px;
  position: sticky; z-index: 5;
  bottom: calc(var(--tab-cao) + env(safe-area-inset-bottom) + 10px);
}
.form-nut .nut { flex: 1; box-shadow: var(--bong-vua); }

/* ==========================================================================
   Nút
   ========================================================================== */
.nut {
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 12px 18px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu);
  transition: transform .16s var(--nhay), opacity .16s;
}
.nut:active { transform: scale(.96); opacity: .8; }
.nut-chinh { background: var(--acc); border-color: var(--acc); color: #fff; }
.nut-nguy { background: var(--nguy); border-color: var(--nguy); color: #fff; }
.nut-nguy-vien { color: var(--nguy); border-color: var(--nguy); background: transparent; width: 100%; }
.nut-them {
  width: 100%; color: var(--acc); border-style: dashed;
  border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: transparent;
}
.nut-nho {
  font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu); cursor: pointer;
}
.nut-nho.nut-nguy { background: transparent; color: var(--nguy); border-color: var(--nguy); }

/* ==========================================================================
   Nhãn (chip)
   ========================================================================== */
.chip-boc { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--nen-chim); border-radius: 999px;
  padding: 5px 11px; font-size: 13.5px; font-weight: 550;
}
.chip-lk { background: var(--acc-nen); color: var(--acc); }
.chip-x {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 0 0 2px; opacity: .55;
}

/* Chọn liên kết trong form */
.lk-ketqua { display: flex; flex-direction: column; gap: 4px; }
.lk-mot {
  text-align: left; font: inherit; font-size: 15px; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--vien); background: var(--nen-the);
  color: var(--chu); border-radius: 11px;
}
.lk-mot:active { background: var(--acc-nen); }
.lk-trong { font-size: 13px; color: var(--chu-mo); padding: 8px 2px; font-style: italic; }
.lk-co { font-size: 14px; }

/* ==========================================================================
   Liều dùng (nhập)
   ========================================================================== */
.lieu-boc { display: flex; flex-direction: column; gap: 7px; }
.lieu-boc details {
  background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: 13px; overflow: hidden;
}
.lieu-boc details[open] { border-color: color-mix(in srgb, var(--acc) 40%, var(--vien)); }
.lieu-dau {
  padding: 12px 14px; cursor: pointer; font-weight: 600;
  display: flex; align-items: center; gap: 9px; list-style: none;
}
.lieu-dau::-webkit-details-marker { display: none; }
.lieu-dau::after { content: '＋'; margin-left: auto; color: var(--chu-mo); font-weight: 400; }
details[open] .lieu-dau::after { content: '−'; }
.lieu-cham { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.lieu-than { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   Bước điều trị (nhập)
   ========================================================================== */
.buoc-boc { display: flex; flex-direction: column; gap: 12px; }
.buoc {
  background: var(--nen-the); border: 1px solid var(--vien); border-radius: 15px;
  padding: 13px; display: flex; flex-direction: column; gap: 12px;
}
.buoc-dau { display: flex; align-items: center; gap: 8px; }
.buoc-dieu { margin-left: auto; display: flex; gap: 5px; }
.thuoc-boc { display: flex; flex-direction: column; gap: 9px; margin-bottom: 9px; }
.thuoc { background: var(--nen-chim); border-radius: 12px; padding: 10px; }
.thuoc-dau { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.thuoc-dau .o-nhap { flex: 1; font-weight: 600; }
.thuoc-o { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.thuoc-o .o-nhap { font-size: 16px; padding: 9px 11px; }
@media (max-width: 400px) { .thuoc-o { grid-template-columns: 1fr; } }

/* ==========================================================================
   Ảnh
   ========================================================================== */
.anh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 9px; }
.anh-khung { position: relative; aspect-ratio: 1; }
.anh-o.anh-mat {
  display: grid; place-items: center; padding: 8px;
  font-size: 11.5px; color: var(--chu-mo); text-align: center;
  border-style: dashed;
}
.anh-luoi-mot { grid-template-columns: 1fr; }
.anh-luoi-mot .anh-khung { aspect-ratio: 4 / 3; }
.anh-luoi-mot .anh-o { object-fit: contain; background: var(--nen-chim); }
.anh-o {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 13px; background: var(--nen-chim); display: block;
  border: 1px solid var(--vien);
}
.anh-x {
  position: absolute; top: -6px; right: -6px; width: 25px; height: 25px;
  border-radius: 50%; border: 2px solid var(--nen-the); background: var(--nguy);
  color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.anh-nut { display: flex; gap: 9px; margin-top: 9px; }
.anh-nut .nut { flex: 1; font-size: 15px; }
.anh-lop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: mo .2s;
}
.anh-lop img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
@keyframes mo { from { opacity: 0; } }

/* ==========================================================================
   ÔN TẬP — thẻ lật
   ========================================================================== */
.on-khung { display: flex; flex-direction: column; min-height: 62vh; }
.on-tien {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-size: 13px; color: var(--chu-mo); font-weight: 550;
}
.on-thanh { flex: 1; height: 6px; background: var(--nen-chim); border-radius: 999px; overflow: hidden; }
.on-thanh i { display: block; height: 100%; background: var(--acc); border-radius: 999px; transition: width .35s var(--nhay); }

.the-lat {
  flex: 1; background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: var(--r-lon); padding: 24px 20px; box-shadow: var(--bong-vua);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  cursor: pointer; min-height: 260px; animation: vao .3s var(--nhay);
}
.the-nhan {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--acc); margin-bottom: 12px;
}
.the-hoi { font-size: 27px; font-weight: 750; line-height: 1.25; margin: 0; }
.the-goi { margin-top: 18px; font-size: 13.5px; color: var(--chu-mo); }
.the-dap { text-align: left; margin-top: 4px; }
.the-dap-muc { margin-bottom: 14px; }
.the-dap-de {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--acc); margin-bottom: 3px;
}
.the-dap-chu { font-size: 15px; color: var(--chu-vua); line-height: 1.55; }
.on-nut { display: flex; gap: 10px; margin-top: 16px; }
.on-nut .nut { flex: 1; }
.on-xong { text-align: center; padding: 40px 16px; }
.on-xong-icon { font-size: 52px; margin-bottom: 12px; }

.on-muc { font-size: 11px; letter-spacing: 1px; color: var(--acc); }
.on-hen {
  text-align: center; font-size: 12px; color: var(--chu-mo); margin-top: 10px;
}
.the-hoi-nho { font-size: 22px; margin: 0 0 10px; text-align: left; }
.the-hoi-nguoc { font-size: 18px; font-weight: 700; margin: 0 0 14px; text-align: left; }
.the-dap-chu { overflow-wrap: anywhere; }

/* ==========================================================================
   Thẻ cài đặt
   ========================================================================== */
.the {
  background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--r);
  padding: 15px; margin-bottom: 12px; box-shadow: var(--bong-nho);
}
.the-de { font-size: 16px; margin: 0 0 10px; font-weight: 700; }
.the-chu { font-size: 14px; color: var(--chu-mo); margin: 0 0 6px; line-height: 1.55; }
.the-nhac {
  background: var(--vang-nen); color: var(--vang); padding: 10px 12px;
  border-radius: 11px; font-weight: 550;
}
.the-chu.canh-bao { color: var(--nguy); font-weight: 600; }
.the-nut { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.the-nut .nut { flex: 1 1 140px; font-size: 15px; }
.so-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.so-o { background: var(--nen-chim); border-radius: 13px; padding: 11px 4px; text-align: center; }
.so-icon { font-size: 19px; }
.so-num { font-size: 21px; font-weight: 750; letter-spacing: -.03em; }
.so-ten { font-size: 10px; color: var(--chu-mo); font-weight: 550; }

/* ==========================================================================
   Chỉ báo đồng bộ
   ========================================================================== */
.db-chi {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 10px 13px; border-radius: 13px; margin-bottom: 16px;
  border: 1px solid var(--vien); background: var(--nen-the);
  box-shadow: var(--bong-nho); color: var(--chu-vua); font-size: 13.5px; font-weight: 550;
}
.db-chi:active { opacity: .6; }
.db-icon { font-size: 15px; }
.db-chu { flex: 1; overflow-wrap: anywhere; }
.db-mui { color: var(--vien-dam); }
.db-xong { color: #0f9d63; }
.db-loi  { color: var(--nguy); border-color: var(--nguy); background: var(--nguy-nen); }
.db-cho  { color: var(--vang); }
.db-chay .db-icon { animation: quay 1s linear infinite; display: inline-block; }
@keyframes quay { to { transform: rotate(360deg); } }

/* ==========================================================================
   Thanh công cụ trang chi tiết + chế độ chỉ xem liều
   ========================================================================== */
.cc-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cc-nut {
  flex: 1 1 auto; font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu-vua);
}
.cc-nut:active { opacity: .6; }
.cc-nut.cc-dang { background: var(--acc-nen); border-color: var(--acc); color: var(--acc); }

/* Chỉ xem liều: giấu mọi khối trừ bảng liều và hiệu chỉnh theo thận */
.ct-gon .ct-khoi:not([data-o='lieu']):not([data-o='lieuThan']) { display: none; }
.ct-gon .cb-khoi { display: none; }
.ct-gon .ct-meta { display: none; }
.ct-gon .ct-xoa { display: none; }

/* ==========================================================================
   Máy tính liều theo cân nặng
   ========================================================================== */
.can-boc {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--acc-nen); border-radius: 11px; padding: 9px 12px; margin-bottom: 10px;
}
.can-nhan { font-size: 13px; font-weight: 650; color: var(--acc); }
.can-o {
  width: 78px; font: inherit; font-size: 16px; text-align: center;
  padding: 7px 8px; border-radius: 9px; border: 1px solid var(--vien);
  background: var(--nen-the); color: var(--chu); -webkit-appearance: none;
}
.can-o:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.can-dv { font-size: 14px; color: var(--chu-vua); font-weight: 600; }
.can-nhac { font-size: 12px; color: var(--chu-mo); margin-left: auto; }
.can-nhac.can-canh { color: var(--nguy); font-weight: 700; }
.lieu-coc { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lieu-tinh {
  font-size: 14px; font-weight: 700; color: var(--acc);
  background: var(--acc-nen); border-radius: 7px; padding: 2px 8px;
  align-self: flex-start;
}
.lieu-tinh[hidden] { display: none; }

.lieu-quy { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.lieu-quy-mot {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--chu-mo);
}
.lieu-quy-so { font-weight: 700; color: var(--chu-vua); }
.lieu-quy-ten { overflow-wrap: anywhere; }
.lieu-quy-canh .lieu-quy-so { color: var(--vang); }
.lieu-quy-nhac { color: var(--vang); font-weight: 600; }
.on-nhom { margin-bottom: 12px; }
.on-chon-nhom {
  width: 100%; font: inherit; font-size: 15px; padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--vien);
  background: var(--nen-the); color: var(--chu); -webkit-appearance: none;
}

/* ==========================================================================
   Hiệu chỉnh liều theo chức năng thận + máy tính CrCl
   ========================================================================== */
.than-boc { display: flex; flex-direction: column; gap: 11px; }
.than-hang {
  background: var(--nen-the); border: 1px solid var(--vien); border-radius: 13px;
  padding: 11px; display: flex; flex-direction: column; gap: 8px;
}
.than-dau { display: flex; align-items: center; justify-content: space-between; }
.than-so-thu { font-size: 12px; font-weight: 700; color: var(--acc); }
.than-nguong { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.than-nhan { font-size: 12px; color: var(--chu-mo); font-weight: 600; }
.than-so { width: 74px; text-align: center; padding: 8px; }
.than-dv { font-size: 13px; color: var(--chu-mo); }

.than-xem { display: flex; flex-direction: column; gap: 7px; }
.than-xem-hang {
  background: var(--nen-chim); border-radius: 11px; padding: 10px 12px;
  border-left: 3px solid transparent;
}
.than-xem-hang.than-dang {
  background: var(--acc-nen); border-left-color: var(--acc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent);
}
.than-xem-nguong { font-weight: 700; font-size: 14px; }
.than-xem-dv { font-weight: 400; color: var(--chu-mo); font-size: 12.5px; }
.than-xem-lieu { font-size: 14.5px; margin-top: 2px; overflow-wrap: anywhere; }
.than-xem-ghi { font-size: 13px; color: var(--chu-mo); margin-top: 3px; }
/* Đối chiếu liều trần: ba con số rời nhau không trả lời được "cả ngày có quá
   không?", nên dòng này nhân sẵn rồi so hộ. Màu theo mức, không chỉ theo chữ. */
.lieu-tran {
  margin-top: 8px; padding: 7px 10px; border-radius: 9px;
  font-size: 13px; line-height: 1.5; font-weight: 600;
  background: var(--acc-nen); color: var(--acc-chu);
}
.lieu-tran-cham { background: var(--vang-nen); color: var(--vang); }
.lieu-tran-vuot { background: var(--nguy-nen); color: var(--nguy); font-weight: 750; }
/* Ngưỡng CrCl gõ ngược: app vẫn đọc được, nhưng phải nói ra là nó đọc theo
   chiều nào, không thì con số trên bảng không còn ứng với cái app đang làm. */
.than-xem-dao {
  font-size: 12.5px; line-height: 1.45; margin-top: 4px;
  color: var(--vang); background: var(--vang-nen);
  border-radius: 8px; padding: 5px 8px;
}
.than-chan { font-size: 11.5px; color: var(--chu-mo); margin-top: 10px; font-style: italic; line-height: 1.5; }

.crcl-boc {
  background: var(--acc-nen); border-radius: 13px; padding: 11px 12px; margin-bottom: 11px;
}
.crcl-de { font-size: 12px; font-weight: 700; color: var(--acc); margin-bottom: 8px; }
.crcl-hang { display: flex; gap: 7px; margin-bottom: 7px; align-items: flex-end; }
.crcl-o-boc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crcl-nhan {
  font-size: 10.5px; font-weight: 700; color: var(--acc);
  text-transform: uppercase; letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crcl-o { width: 100%; text-align: center; padding: 8px; font-size: 16px; }
.crcl-chon { width: 100%; }
.crcl-chon {
  font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--vien); background: var(--nen-the); color: var(--chu);
  -webkit-appearance: none;
}
.crcl-kq { font-size: 13.5px; color: var(--chu-mo); }
.crcl-kq.crcl-co { color: var(--chu); }
.crcl-kq.crcl-canh { color: var(--nguy); font-weight: 600; }

/* ==========================================================================
   Cảnh báo dựng từ ghi chép
   ========================================================================== */
.cb-khoi {
  background: var(--vang-nen); border: 1px solid color-mix(in srgb, var(--vang) 45%, transparent);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 11px;
}
.cb-de { font-size: 13px; font-weight: 750; color: var(--vang); margin-bottom: 10px; }
.cb-mot { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--vang) 25%, transparent); }
.cb-mot:first-of-type { border-top: 0; padding-top: 0; }
.cb-dau { font-size: 15px; font-weight: 650; margin-bottom: 3px; }
.cb-ten { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.cb-noi { color: var(--vang); font-weight: 750; }
.cb-o { font-size: 12px; color: var(--chu-mo); margin-bottom: 3px; }
.cb-trich { font-size: 14px; color: var(--chu-vua); line-height: 1.55; overflow-wrap: anywhere; }
.cb-chan { font-size: 11.5px; color: var(--chu-mo); margin-top: 10px; font-style: italic; }

/* ==========================================================================
   Nhóm dược lý & so sánh trong nhóm
   ========================================================================== */
.chip-nhom {
  background: var(--acc-nen); color: var(--acc); font-weight: 600;
  text-decoration: none; font-size: 14.5px; padding: 7px 13px;
}
.chip-mui { opacity: .6; }
.nhom-dau { margin-bottom: 14px; }
.nhom-ten { font-size: 23px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.nhom-so { font-size: 13.5px; color: var(--chu-mo); margin-top: 2px; }
.ss-boc { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.ss-boc::-webkit-scrollbar { display: none; }
.ss-cot {
  flex: 0 0 240px; background: var(--nen-the); border: 1px solid var(--vien);
  border-radius: var(--r); padding: 12px; text-decoration: none; color: inherit;
  box-shadow: var(--bong-nho);
}
.ss-ten { font-weight: 700; color: var(--acc); margin-bottom: 8px; overflow-wrap: anywhere; }
.ss-o { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; }
.ss-nhan {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--chu-mo); font-weight: 700; margin-bottom: 1px;
}

/* ==========================================================================
   Thông báo nổi
   ========================================================================== */
.toast-wrap {
  position: fixed; left: 12px; right: 12px; z-index: 70;
  bottom: calc(var(--tab-cao) + env(safe-area-inset-bottom) + 14px);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: #1a1f2e; color: #fff; padding: 12px 18px; border-radius: 13px;
  font-size: 14.5px; font-weight: 550; max-width: 480px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: len .24s var(--nhay);
}
.toast-loi { background: var(--nguy); }
.toast.di { opacity: 0; transition: opacity .3s; }
@keyframes len { from { transform: translateY(16px) scale(.96); opacity: 0; } }

/* ==========================================================================
   Hộp xác nhận
   ========================================================================== */
.modal-lop {
  position: fixed; inset: 0; z-index: 80; background: rgba(6,8,14,.5);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  backdrop-filter: blur(3px); animation: mo .18s;
}
.modal {
  background: var(--nen-the); border-radius: 20px; padding: 22px;
  max-width: 360px; width: 100%; box-shadow: var(--bong-cao);
  animation: len .26s var(--nhay);
}
.modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.modal p { margin: 0 0 18px; color: var(--chu-mo); font-size: 14px; line-height: 1.55; }
.modal-nut { display: flex; gap: 10px; }
.modal-nut .nut { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Danh mục thuốc (js/danhmuc.js)
   ========================================================================== */
:root { --dung: #0f9d63; --dung-nen: #e7f6ee; }
@media (prefers-color-scheme: dark) {
  :root { --dung: #3ecf8e; --dung-nen: #10291d; }
}

/* Vạch mức thuộc bài dưới tên thuốc + thanh tiến độ bên phải nhóm */
.dm-vach { font-size: 10.5px; letter-spacing: 1px; color: var(--acc); margin-top: 2px; }
.dm-tien {
  flex: none; width: 46px; height: 5px; border-radius: 999px;
  background: var(--nen-chim); overflow: hidden;
}
.dm-tien i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }

/* Bảng "Thông tin sản phẩm" */
.dm-bang { display: flex; flex-direction: column; }
.dm-dong {
  display: flex; gap: 12px; padding: 7px 0; font-size: 14.5px;
  border-bottom: 1px solid var(--vien); color: var(--chu-vua); overflow-wrap: anywhere;
}
.dm-dong:last-child { border-bottom: 0; }
.dm-nhan { flex: none; width: 112px; color: var(--chu-mo); font-size: 13.5px; }

/* Câu hỏi trắc nghiệm: thẻ vừa đủ cao, lựa chọn nằm ngay dưới */
.dm-cau { flex: none; min-height: 0; cursor: default; text-align: left; justify-content: flex-start; }
.dm-hoi-dai { font-size: 15.5px; line-height: 1.6; color: var(--chu); margin: 0 0 6px; overflow-wrap: anywhere; }
.dm-de { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--acc); }

.dm-lua-boc { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.dm-lua {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  font: inherit; font-size: 15px; line-height: 1.45; color: var(--chu); cursor: pointer;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--vien); background: var(--nen-the); box-shadow: var(--bong-nho);
  overflow-wrap: anywhere; transition: transform .12s, background .15s, border-color .15s;
}
.dm-lua:active:not(:disabled) { transform: scale(.98); }
.dm-lua:disabled { cursor: default; }
.dm-lua-chu {
  flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 750; background: var(--nen-chim); color: var(--chu-mo);
}
.dm-lua.dung { border-color: var(--dung); background: var(--dung-nen); }
.dm-lua.dung .dm-lua-chu { background: var(--dung); color: #fff; }
.dm-lua.sai { border-color: var(--nguy); background: var(--nguy-nen); }
.dm-lua.sai .dm-lua-chu { background: var(--nguy); color: #fff; }
.dm-lua.mo { opacity: .5; }

.dm-giai { margin-top: 14px; }
.dm-giai .ct-chu { margin-bottom: 5px; }
.dm-giai-cd { font-size: 14px; }
.dm-giai.dung .ct-de { color: var(--dung); }
.dm-giai.sai .ct-de { color: var(--nguy); }

/* Kê đơn / không kê đơn */
.dm-rx, .dm-otc {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px;
}
.dm-rx  { color: var(--nguy); background: var(--nguy-nen); }
.dm-otc { color: var(--dung); background: var(--dung-nen); }
.dm-ghi { margin: -6px 0 14px; display: flex; gap: 4px; flex-wrap: wrap; }
.dm-ghi .dm-rx, .dm-ghi .dm-otc { font-size: 12.5px; padding: 3px 10px; }
.dm-loai {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px;
  padding: 11px 15px; border-radius: var(--r); border: 1.5px solid; font-size: 14px;
}
.dm-loai b { font-size: 15.5px; }
.dm-loai.rx  { color: var(--nguy); border-color: var(--nguy); background: var(--nguy-nen); }
.dm-loai.otc { color: var(--dung); border-color: var(--dung); background: var(--dung-nen); }
.dm-loai span { color: var(--chu-vua); }

/* ==========================================================================
   Lộ trình học (js/lotrinh.js)
   ========================================================================== */
:root { --vang-dam: #b7791f; --vang-nhat: #fef3d7; }
@media (prefers-color-scheme: dark) { :root { --vang-dam: #f0c674; --vang-nhat: #362c14; } }

.dm-mix {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  margin-right: 6px; vertical-align: 1px; color: var(--vang-dam); background: var(--vang-nhat);
}

/* Thẻ hoạt chất: viền trái đỏ = kê đơn, xanh = không kê đơn, vàng = tuỳ sản phẩm */
.lt-the {
  background: var(--nen-the); border: 1px solid var(--vien); border-left: 5px solid var(--vien-dam);
  border-radius: var(--r-nho); padding: 10px 13px; margin-bottom: 9px; box-shadow: var(--bong-nho);
  font-size: 14.5px; line-height: 1.5; color: var(--chu-vua); overflow-wrap: anywhere;
}
.lt-the.rx { border-left-color: var(--nguy); }
.lt-the.otc { border-left-color: var(--dung); }
.lt-the.mix { border-left-color: var(--vang-dam); }
.lt-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.lt-ten { font-size: 17px; color: var(--chu); }
.lt-hang, .lt-so { font-size: 12px; color: var(--chu-mo); }
.lt-vach { font-size: 10.5px; letter-spacing: 1px; color: var(--acc); margin-left: auto; }
.lt-dong { margin: 2px 0; }
.lt-k { color: var(--chu-mo); }
.lt-hg { color: var(--chu-mo); font-size: 12.5px; }
.lt-duoi { color: var(--acc); }
.lt-duoi.bay { color: var(--nguy); }
.lt-phoi { color: var(--vang-dam); }
.lt-xem { display: inline-block; margin-top: 5px; font-size: 13.5px; font-weight: 600; color: var(--acc); text-decoration: none; }

/* Khối "đã nhận ra X% thuốc" */
.lt-tong {
  background: var(--nen-the); border: 1px solid var(--vien); border-radius: var(--r);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--bong-nho);
}
.lt-tong-so { font-size: 38px; font-weight: 800; color: var(--acc); line-height: 1.05; letter-spacing: -.02em; }
.lt-tong-chu { font-size: 14px; color: var(--chu-vua); margin: 2px 0 10px; }
.lt-tong-phu { font-size: 12.5px; color: var(--chu-mo); margin-top: 8px; }
.lt-thanh { height: 8px; background: var(--nen-chim); border-radius: 999px; overflow: hidden; }
.lt-thanh i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }
.lt-thanh.nho { flex: none; width: 46px; height: 5px; }
.lt-tc .lt-thanh { margin: 8px 0 2px; }
.lt-viec { display: flex; flex-direction: column; gap: 0; }

/* Thẻ lật hoạt chất */
.lt-lat { text-align: left; justify-content: flex-start; }
.lt-lat .the-hoi { margin-bottom: 4px; }
.lt-goi-y { margin-top: 16px; font-size: 14px; color: var(--chu-mo); }
.lt-sau { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--chu-vua); }

/* Chặng 0 */
.lt-duoi-nhan {
  flex: none; min-width: 92px; font-weight: 800; color: var(--acc); font-size: 14px;
}
.lt-duoi-hang.bay .lt-duoi-nhan, .lt-duoi-hang.bay .ds-ten { color: var(--nguy); }
.lt-ul { margin: 0; padding-left: 18px; color: var(--chu-vua); font-size: 14.5px; line-height: 1.55; }
.lt-ul li { margin-bottom: 6px; }

/* Mã SKU chạm để chép */
.dm-chep {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 14.5px; padding: 3px 4px 3px 10px; border-radius: 9px;
  border: 1px solid var(--vien); background: var(--nen-chim); color: var(--chu);
}
.dm-chep:active { transform: scale(.97); }
.dm-chep-ma {
  font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  -webkit-user-select: all; user-select: all;      /* chạm giữ chọn trọn cả mã */
}
.dm-chep-nhan {
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 7px;
  background: var(--acc-nen); color: var(--acc); white-space: nowrap;
}
.dm-chep.da { border-color: var(--dung); }
.dm-chep.da .dm-chep-nhan { background: var(--dung-nen); color: var(--dung); }

/* Tra cứu: các khu kết quả (mã SKU · sổ tay · lộ trình · danh mục) */
.tim-khu { margin-bottom: 18px; }
.tim-them { margin: 8px 2px 0; font-size: 13px; }
.tim-ghi { text-align: center; font-size: 13px; margin: 4px 0 14px; }
.tim-nap { text-align: center; padding: 36px 12px; }

/* ==========================================================================
   Khoá học (js/khoahoc.js)
   ========================================================================== */
.kh-ham { font-size: 13px; font-weight: 700; color: var(--acc); }
.kh-ten-lk { text-decoration: none; font-weight: 700; }
.kh-sp-ds { list-style: none; margin: 3px 0 0; padding: 0; }
.kh-sp { padding: 3px 0 3px 12px; position: relative; }
.kh-sp::before { content: ''; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--vien-dam); }
.kh-sp-ten { color: var(--chu); font-weight: 600; }
a.kh-sp-ten { color: var(--acc); text-decoration: none; }
.kh-chay { margin-right: 3px; }
.kh-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  vertical-align: 1px; color: var(--chu-mo); background: var(--nen-chim);
}
.kh-tag.kh-brand { color: var(--vang); background: var(--vang-nen); }
.kh-dap { font-size: 18px; font-weight: 750; color: var(--chu); margin-bottom: 6px; }
.kh-tuan { margin: 16px 0 6px; text-align: left; }
.kh-tra-loi { width: 100%; box-sizing: border-box; margin-top: 12px; min-height: 130px; font: inherit; line-height: 1.5; resize: vertical; }
.kh-tk { background: var(--nen-chim); color: var(--chu-mo); }
.kh-tk.co { background: var(--dung-nen); color: var(--dung); font-weight: 650; }
.kh-nhieu-dong { white-space: pre-line; }
@media (prefers-color-scheme: dark) {
  a.kh-sp-ten, .kh-ham, .kh-ten-lk { color: color-mix(in srgb, var(--acc) 55%, #fff); }
}

/* ==========================================================================
   Học thuốc (js/hocthuoc.js) — ảnh hộp thuốc, 100 toa
   Ảnh sản phẩm chụp trên nền trắng: giữ nền trắng cả ở chế độ tối,
   không thì viền ảnh hiện thành ô vuông sáng lơ lửng.
   ========================================================================== */
.ht-nho, .ht-vua {
  flex: none; width: 46px; height: 46px; border-radius: 11px; object-fit: contain;
  background: #fff; border: 1px solid var(--vien);
}
.ht-vua { width: 64px; height: 64px; border-radius: 13px; }
.ht-nho-trong { display: grid; place-items: center; font-size: 20px; background: var(--nen-chim); }
img.ht-nho-trong { display: block; }

.ht-anh-boc { margin: 0 0 10px; }
.ht-day {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 14px; background: #fff; border: 1px solid var(--vien);
  max-width: 420px; margin: 0 auto;
}
.ht-day::-webkit-scrollbar { display: none; }
.ht-day.nho { max-width: 240px; }
.ht-o { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.ht-anh { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.ht-cham { display: flex; justify-content: center; gap: 6px; margin-top: 7px; }
.ht-cham i { width: 6px; height: 6px; border-radius: 50%; background: var(--vien-dam); transition: background .2s, transform .2s; }
.ht-cham i.dang { background: var(--acc); transform: scale(1.3); }
.ht-anh-trong {
  text-align: center; color: var(--chu-mo); font-size: 13.5px; padding: 22px 10px; margin-bottom: 10px;
  border: 1px dashed var(--vien-dam); border-radius: 14px;
}

.ht-the { padding: 12px 14px 12px; }
.ht-ten { font-size: 21px; line-height: 1.25; margin: 4px 0 2px; color: var(--chu); font-weight: 750; }
.ht-web { font-size: 13px; color: var(--chu-mo); margin-bottom: 6px; }
.ht-cd { font-size: 13.5px; color: var(--chu-vua); }

/* Một dòng thuốc trong toa */
.ht-dong-dau { display: flex; align-items: flex-start; gap: 10px; }
.ht-stt {
  flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 750; background: var(--acc-nen); color: var(--acc);
}
.ht-dong-chu { flex: 1; min-width: 0; }
.ht-dong-ten { font-size: 16px; color: var(--chu); }
.ht-dung { font-size: 13.5px; color: var(--chu-vua); margin-top: 3px; }
.ht-nhan {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 6px 4px 2px 0;
}
.ht-nhan.co { color: var(--dung); background: var(--dung-nen); }
.ht-nhan.hc { color: var(--vang); background: var(--vang-nen); }
.ht-nhan.khong { color: var(--nguy); background: var(--nguy-nen); }
.ht-thay { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; margin-top: 6px; }
.ht-thay-mot {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  text-decoration: none; color: var(--chu); font-size: 12.5px; font-weight: 600; line-height: 1.3;
  padding: 6px; border-radius: 12px; background: var(--nen-chim);
}
.ht-thay-mot .lt-hg { font-weight: 400; font-size: 11.5px; }
.ht-thay-mot:active { opacity: .6; }
.ht-toa-dau .ht-cdoan { font-size: 15px; font-weight: 650; color: var(--chu); margin: 4px 0 6px; line-height: 1.45; }

/* Chi tiết thuốc: mục gập/mở */
.ht-muc { padding: 0; }
.ht-muc > summary { list-style: none; cursor: pointer; padding: 13px 15px; margin: 0; }
.ht-muc > summary::-webkit-details-marker { display: none; }
.ht-muc > summary::after { content: '▾'; float: right; color: var(--chu-mo); transition: transform .2s; }
.ht-muc:not([open]) > summary::after { transform: rotate(-90deg); }
.ht-muc > :not(summary) { margin-left: 15px; margin-right: 15px; }
.ht-muc > :last-child { margin-bottom: 13px; }
.ht-muc .ct-chu { font-size: 14.5px; margin-bottom: 6px; }
.ht-h { font-weight: 700; color: var(--chu); font-size: 14.5px; margin: 8px 0 4px; }
.ht-q { font-weight: 650; color: var(--chu); font-size: 14.5px; margin: 10px 0 3px; }

/* Trắc nghiệm chọn đúng hộp: lưới 2 x 2 */
.ht-lua-anh { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ht-lua-anh .dm-lua { flex-direction: column; align-items: stretch; padding: 8px; }
.ht-lua-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 10px; }
.dm-cau .ht-anh-boc { margin-top: 4px; }

/* Biệt dược trong khoá học có ảnh */
.kh-sp.co-anh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-left: 0; }
.kh-sp.co-anh::before { display: none; }
.kh-anh { width: 34px; height: 34px; border-radius: 8px; }
a.ht-lk { color: var(--acc); text-decoration: none; font-weight: 600; }
@media (prefers-color-scheme: dark) { a.ht-lk { color: color-mix(in srgb, var(--acc) 55%, #fff); } }
.ht-lua-ten { display: grid; place-items: center; aspect-ratio: 1 / 1; text-align: center; font-weight: 650; padding: 6px; }
/* Chữ chờ phía sau ảnh: ảnh hộp nền trắng kín ô nên tải xong là che mất chữ. Mạng chập chờn
   thì người học thấy đang chờ ảnh, không phải một ô trắng trơn. */
.ht-o { position: relative; }
.ht-o::before {
  content: 'Đang tải ảnh…'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #8a90a2; font-size: 13px;
}
.ht-anh { position: relative; }