/* NỀN — reset, token thiết kế, chế độ tối.
 *
 * Mọi giá trị màu, cỡ chữ, khoảng cách của trang đều lấy từ đây. Không chế màu
 * hay số đo tại chỗ trong hai file kia: sửa một chỗ là cả trang đổi theo.
 *
 * Chế độ tối khai token ở hai nơi:
 *   @media (prefers-color-scheme: dark)  — theo hệ điều hành
 *   [data-theme="dark"]                  — nhân viên tự chọn, thắng hệ điều hành
 * Vì vậy nút chuyển ba trạng thái (hệ thống / sáng / tối) chạy được cả hai chiều.
 */

/* ===== 1. Token không đổi theo chủ đề ===================================== */

:root {
  /* Thang chữ: 6 bậc, không dùng cỡ nào ngoài danh sách này */
  --chu-1: 12px; /* nhãn nhỏ, chú thích */
  --chu-2: 13px; /* chữ phụ, metadata */
  --chu-3: 15px; /* chữ thân, mặc định */
  --chu-4: 17px; /* tên khách, tiêu đề nhỏ */
  --chu-5: 20px; /* tiêu đề mục */
  --chu-6: 24px; /* tiêu đề trang */

  --dam-thuong: 400;
  --dam-vua: 500;
  --dam-nua: 650;
  --dam-day: 700;

  /* Thang khoảng cách: bội số của 4 */
  --k1: 4px;
  --k2: 8px;
  --k3: 12px;
  --k4: 16px;
  --k5: 20px;
  --k6: 24px;
  --k7: 28px;
  --k8: 32px;

  /* Bo góc */
  --goc-1: 6px;
  --goc-2: 10px;
  --goc-3: 14px;
  --goc-tron: 999px;

  /* Chuyển động */
  --nhanh: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --vua: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Kích thước bố cục */
  --ray-rong: 212px;
  --ray-hep: 64px;
  --cot-ds: 332px;
  --cot-panel: 340px;

  /* Vùng bấm tối thiểu trên điện thoại (khuyến nghị 44px của WCAG) */
  --cham-toi-thieu: 44px;

  color-scheme: light dark;
}

/* ===== 2. Chủ đề sáng ===================================================== */

:root {
  /* Dải trung tính 9 bậc: 0 sáng nhất → 8 tối nhất.
   *
   * Ngả LAM chứ không xám trung tính: đặt cạnh xanh thương hiệu thì xám thuần
   * trông ngà và bẩn, còn xám pha chút sắc của chính màu chủ đạo thì cả trang
   * nhìn ra một hệ. Cùng lý do mà dải cũ ngả lục theo màu cũ. */
  --xam-0: #ffffff;
  --xam-1: #f6f8fc;
  --xam-2: #edf2f9;
  --xam-3: #dfe7f2;
  --xam-4: #c7d3e5;
  --xam-5: #9daec7;
  --xam-6: #6c7f9c;
  --xam-7: #3c4a62;
  --xam-8: #111a29;

  /* HAI SẮC LAM CỦA THƯƠNG HIỆU, mỗi cái một việc — lấy từ web minpharmacy.vn.
   *
   *   --xanh       #1A51A2  lam đậm: CHỮ và NÚT. 7.6:1 trên nền trắng, đạt AAA
   *                         cho cả chữ nhỏ, không phải hạ độ đậm ở đâu cả.
   *   --xanh-sang  #3278E4  lam sáng: MẢNG LỚN và điểm nhấn — dải đầu trang,
   *                         viền tiêu điểm, gạch chân tab đang chọn.
   *
   * KHÔNG hoán vai hai cái này. #3278E4 với chữ trắng chỉ được 4.3:1, đủ cho
   * mảng lớn và cấu kiện giao diện nhưng THIẾU cho chữ nhỏ — dùng nó làm màu
   * nút là mọi nhãn trên nút rơi xuống dưới ngưỡng đọc được. Đó là lý do màu
   * sáng hơn lại KHÔNG phải màu chính, dù nhìn nó bắt mắt hơn. */
  --xanh: #1a51a2;
  --xanh-dam: #123a78;
  --xanh-sang: #3278e4;
  /* Bản nhạt của #3278E4 để tô nền vùng chọn, không phải bản nhạt của #1A51A2:
   * cùng sắc với mảng lớn thì vùng chọn nhìn ra là cùng một hệ. */
  --xanh-nen: #e5eefc;
  --xanh-nen-nhat: #f1f6fe;
  --tren-xanh: #ffffff;

  /* Vai trò bề mặt */
  --nen-app: #d7e1f0;
  --nen-tam: var(--xam-0);
  --nen-chim: var(--xam-1);
  /* Đậm hơn hẳn nền thẻ trắng: cột chat ở giữa phải nhìn ra là một khu riêng,
   * không thì ba cột trắng dính thành một mảng. */
  --nen-chat: #e4ebf6;
  /* Thanh dọc là bản tối của CHÍNH màu thương hiệu, không phải đen trung tính:
   * cùng sắc lam nên nó đọc ra là một phần của hệ màu, chứ không phải một dải
   * đen ai đó dán vào cạnh trang.
   *
   * Kéo TỪ #0c2143 LÊN #14336b: bản cũ gần như đen, nhìn nặng và tách hẳn khỏi
   * sắc lam của web. Bản mới vẫn cho chữ --chu-ray 9,4:1 nên không mất gì về
   * khả năng đọc, mà cả trang nhìn ra một hệ với minpharmacy.vn. */
  --nen-ray: #14336b;
  --chu-ray: #dde7f6;
  --chu-ray-mo: #93aacd;
  --nen-ray-chon: rgba(255, 255, 255, 0.14);

  --chu: var(--xam-8);
  --chu-vua: var(--xam-7);
  --chu-mo: var(--xam-6);
  --vien: var(--xam-3);
  --vien-dam: var(--xam-4);

  /* Đường ranh giữa BA CỘT của màn chat, đậm hơn đường viền thường.
   *
   * Ở chế độ tối, nền cột sáng-tối lệch nhau rõ nên nhìn ra phân khu ngay. Ở
   * chế độ sáng thì cả ba cột đều gần trắng, đường viền --vien nhạt quá nên
   * nhìn thành một mảng liền. Token riêng để chỉnh chỗ này mà không làm đậm
   * mọi đường kẻ khác trong trang. */
  --vien-cot: var(--xam-4);
  --bong-cot: 1px 0 0 var(--xam-2);

  /* Trạng thái.
   *
   * ĐỎ VÀ LỤC KHÔNG ĐỔI SANG LAM. Chúng mang nghĩa (hỏng / xong) chứ không
   * phải màu trang trí — nhuộm cả trang thành một sắc là mất luôn tín hiệu
   * cảnh báo. Đỏ lấy đúng sắc đỏ trên logo nên vẫn nằm trong hệ.
   *
   * `--tin` đổi từ lam sang XANH NGỌC của cái cây trên logo: lam giờ là màu
   * chủ đạo của nút bấm, để nhãn "thông tin" cũng lam thì chip trạng thái nhìn
   * như nút. Xanh ngọc vừa tách bạch vừa vẫn là màu của thương hiệu. */
  --cho: #b45309;
  --cho-nen: #fdf1e3;
  --loi: #c62828;
  --loi-nen: #fdeaea;
  --tot: #147a3f;
  --tot-nen: #e5f5ec;
  --luu-y: #a3550b;
  --luu-y-nen: #fdf0e2;
  --tin: #0e7490;
  --tin-nen: #e2f2f7;

  /* Trạng thái đơn hàng */
  --tt-new: #57687d;
  --tt-new-nen: #eef2f7;
  --tt-confirmed: var(--tin);
  --tt-confirmed-nen: var(--tin-nen);
  --tt-shipping: var(--luu-y);
  --tt-shipping-nen: var(--luu-y-nen);
  --tt-done: var(--tot);
  --tt-done-nen: var(--tot-nen);
  --tt-cancelled: var(--loi);
  --tt-cancelled-nen: var(--loi-nen);

  /* Màu nhãn phân loại (dùng chung cho nhãn khách và loại hình).
   *
   * TÁM MÀU NÀY PHẢI PHÂN BIỆT ĐƯỢC VỚI NHAU, đó là cả công dụng của chúng.
   * Nên chỉ kéo về hệ lam những màu vốn đã trung tính (xám) hoặc vốn là lam;
   * tím, cam, vàng, hồng giữ nguyên. Kéo hết về một sắc thì nhãn nào cũng như
   * nhãn nào và bảng màu thành vô dụng. */
  --mau-xanh: #0e7490;
  --mau-xanh-nen: #e2f2f7;
  --mau-tim: #6d43c4;
  --mau-tim-nen: #eee8fb;
  --mau-cam: #b45309;
  --mau-cam-nen: #fdf1e3;
  --mau-do: #c62828;
  --mau-do-nen: #fdeaea;
  --mau-vang: #926a06;
  --mau-vang-nen: #fbf3dd;
  --mau-lam: #1a51a2;
  --mau-lam-nen: #e6eefa;
  --mau-hong: #b8306e;
  --mau-hong-nen: #fce8f1;
  --mau-xam: #55677f;
  --mau-xam-nen: #edf1f7;

  /* Đổ bóng — ám lam thay vì ám lục, cùng lý do với dải trung tính. */
  --bong-1: 0 1px 2px rgba(13, 32, 64, 0.07), 0 4px 12px rgba(13, 32, 64, 0.06);
  --bong-2: 0 2px 6px rgba(13, 32, 64, 0.11), 0 12px 28px rgba(13, 32, 64, 0.1);
  --bong-3: 0 8px 20px rgba(13, 32, 64, 0.15), 0 24px 56px rgba(13, 32, 64, 0.15);
  --phu-modal: rgba(9, 22, 45, 0.45);
}

/* ===== 3. Chủ đề tối ===================================================== */

/* Khai hai lần cùng nội dung: một cho hệ điều hành, một cho nút chuyển tay.
 * :not([data-theme="light"]) để nhân viên chọn "sáng" vẫn thắng hệ điều hành. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Dải trung tính ngả lam, cùng sắc với chủ đề sáng để hai chế độ là
     * một hệ chứ không phải hai bảng màu rời nhau. */
    --xam-0: #0f1520;
    --xam-1: #151c29;
    --xam-2: #1c2434;
    --xam-3: #273246;
    --xam-4: #36445e;
    --xam-5: #576987;
    --xam-6: #8798b5;
    --xam-7: #c0ccde;
    --xam-8: #edf2f9;

    /* #1A51A2 nguyên bản quá tối để làm màu nhấn trên nền tối — chữ trên nó
     * không đủ tương phản. Nên chế độ tối kéo cùng sắc lam lên sáng hơn và
     * giảm độ bão hoà, giữ đúng nhận diện mà vẫn đọc được. */
    --xanh: #5b9af0;
    --xanh-dam: #86b6f6;
    --xanh-sang: #86b6f6;
    --xanh-nen: #16294b;
    --xanh-nen-nhat: #121c2d;
    --tren-xanh: #08172e;

    --nen-app: #090e17;
    --nen-tam: var(--xam-1);
    --nen-chim: var(--xam-2);
    --nen-chat: #0d131e;
    --nen-ray: #0a1730;
    --chu-ray: #d8e3f4;
    --chu-ray-mo: #798aa8;
    --nen-ray-chon: rgba(255, 255, 255, 0.09);

    /* Nền các cột đã tự tách nhau ở chế độ tối, đường ranh chỉ cần mảnh. */
    --vien-cot: var(--xam-3);
    --bong-cot: none;

    --cho: #f0a35f;
    --cho-nen: #3a2413;
    --loi: #f28b8b;
    --loi-nen: #3a1a1a;
    --tot: #5fd08a;
    --tot-nen: #12301f;
    --luu-y: #efa864;
    --luu-y-nen: #33220f;
    --tin: #4cc3dd;
    --tin-nen: #10303a;

    --tt-new: #96a4b8;
    --tt-new-nen: #232b38;

    --mau-xanh: #4cc3dd;
    --mau-xanh-nen: #10303a;
    --mau-tim: #b49bf0;
    --mau-tim-nen: #251f3a;
    --mau-cam: #f0a35f;
    --mau-cam-nen: #33220f;
    --mau-do: #f28b8b;
    --mau-do-nen: #3a1a1a;
    --mau-vang: #ddb54f;
    --mau-vang-nen: #322a12;
    --mau-lam: #8ab8f7;
    --mau-lam-nen: #142744;
    --mau-hong: #ee8ab6;
    --mau-hong-nen: #351b28;
    --mau-xam: #9aa8bd;
    --mau-xam-nen: #232b36;

    --bong-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --bong-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
    --bong-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.5);
    --phu-modal: rgba(0, 0, 0, 0.62);
  }
}

:root[data-theme='dark'] {
  /* Dải trung tính ngả lam, cùng sắc với chủ đề sáng để hai chế độ là
   * một hệ chứ không phải hai bảng màu rời nhau. */
  --xam-0: #0f1520;
  --xam-1: #151c29;
  --xam-2: #1c2434;
  --xam-3: #273246;
  --xam-4: #36445e;
  --xam-5: #576987;
  --xam-6: #8798b5;
  --xam-7: #c0ccde;
  --xam-8: #edf2f9;

  /* #1A51A2 nguyên bản quá tối để làm màu nhấn trên nền tối — chữ trên nó
   * không đủ tương phản. Nên chế độ tối kéo cùng sắc lam lên sáng hơn và
   * giảm độ bão hoà, giữ đúng nhận diện mà vẫn đọc được. */
  --xanh: #5b9af0;
  --xanh-dam: #86b6f6;
  --xanh-sang: #86b6f6;
  --xanh-nen: #16294b;
  --xanh-nen-nhat: #121c2d;
  --tren-xanh: #08172e;

  --nen-app: #090e17;
  --nen-tam: var(--xam-1);
  --nen-chim: var(--xam-2);
  --nen-chat: #0d131e;
  --nen-ray: #0a1730;
  --chu-ray: #d8e3f4;
  --chu-ray-mo: #798aa8;
  --nen-ray-chon: rgba(255, 255, 255, 0.09);

  /* Nền các cột đã tự tách nhau ở chế độ tối, đường ranh chỉ cần mảnh. */
  --vien-cot: var(--xam-3);
  --bong-cot: none;

  --cho: #f0a35f;
  --cho-nen: #3a2413;
  --loi: #f28b8b;
  --loi-nen: #3a1a1a;
  --tot: #5fd08a;
  --tot-nen: #12301f;
  --luu-y: #efa864;
  --luu-y-nen: #33220f;
  --tin: #4cc3dd;
  --tin-nen: #10303a;

  --tt-new: #96a4b8;
  --tt-new-nen: #232b38;

  --mau-xanh: #4cc3dd;
  --mau-xanh-nen: #10303a;
  --mau-tim: #b49bf0;
  --mau-tim-nen: #251f3a;
  --mau-cam: #f0a35f;
  --mau-cam-nen: #33220f;
  --mau-do: #f28b8b;
  --mau-do-nen: #3a1a1a;
  --mau-vang: #ddb54f;
  --mau-vang-nen: #322a12;
  --mau-lam: #8ab8f7;
  --mau-lam-nen: #142744;
  --mau-hong: #ee8ab6;
  --mau-hong-nen: #351b28;
  --mau-xam: #9aa8bd;
  --mau-xam-nen: #232b36;

  --bong-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --bong-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  --bong-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.5);
  --phu-modal: rgba(0, 0, 0, 0.62);
}

/* ===== 4. Reset ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--chu-3);
  line-height: 1.5;
  color: var(--chu);
  background: var(--nen-app);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

a {
  color: var(--xanh);
}

img {
  max-width: 100%;
}

/* ===== 5. Tiêu điểm bàn phím ============================================= */

/* Viền tiêu điểm phải nhìn rõ trên cả nền sáng lẫn nền tối: hai lớp shadow,
 * lớp trong màu nền để tách viền xanh khỏi thành phần bên dưới. */
:focus-visible {
  outline: 2px solid var(--xanh);
  outline-offset: 2px;
  border-radius: var(--goc-1);
}

.ray-doc :focus-visible {
  outline-color: var(--xanh-sang);
}

/* Bỏ tiêu điểm khi bấm chuột, giữ khi dùng bàn phím */
:focus:not(:focus-visible) {
  outline: none;
}

/* Nhảy tới nội dung chính bằng bàn phím */
.bo-qua-toi-noi-dung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--k2) var(--k4);
  background: var(--nen-tam);
  border: 1px solid var(--vien-dam);
  border-radius: var(--goc-2);
}

.bo-qua-toi-noi-dung:focus {
  left: var(--k3);
  top: var(--k3);
}

/* ===== 6. Lớp tiện ích =================================================== */

.an {
  display: none !important;
}

/* Ẩn khỏi mắt nhưng vẫn đọc được bằng trình đọc màn hình */
.chi-doc-man-hinh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chu-phu {
  font-size: var(--chu-2);
  color: var(--chu-mo);
}

/* Biểu tượng SVG: canh giữa theo dòng chữ đứng cạnh, và tô theo màu chữ. */
.bt-svg {
  display: block;
  flex-shrink: 0;
}

button .bt-svg,
label .bt-svg,
span[data-icon] .bt-svg {
  display: inline-block;
  vertical-align: -0.22em;
}

.chu-loi {
  font-size: var(--chu-2);
  color: var(--loi);
  min-height: 1em;
}

.ten-lon {
  font-size: var(--chu-4);
  font-weight: var(--dam-nua);
}

.ghi-chu-nho {
  font-size: var(--chu-1);
  color: var(--chu-mo);
  line-height: 1.45;
}

/* ===== 7. Thanh cuộn ===================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--xam-4) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--xam-4);
  border-radius: var(--goc-tron);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--xam-5);
  background-clip: content-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== 8. Tôn trọng lựa chọn giảm chuyển động ============================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}