/* ===== KHUNG KHU QUẢN TRỊ =====
   Thanh trên (dính) → .admin-shell (menu trái + nội dung) → chân trang.

   Màu, bo góc, đổ bóng, cỡ chữ lấy hết từ admin/tokens.css. KHÔNG đặt màu bằng
   số cứng trong file này — màu thương hiệu do DB quyết (styles.admin_header_color),
   bốn site shop dùng chung một bộ mã nên hard-code là hỏng ba site còn lại.

   Menu trái nằm ở admin/sidebar.css. */

html {
    font-size: 16px;
    font-family: var(--font);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Thang cỡ chữ gốc. Nâng một nấc trên điện thoại ngày 2026-09-19 (chủ site
   chốt): 480px 14 -> 15px, 380px 13 -> 14px. Hai nấc điện thoại nay trùng nấc
   768px nên gộp còn hai mốc, khỏi nuôi một dòng không làm gì.

   ⚠ MENU TRÁI KHÔNG ĂN THEO thang này, và đó là chủ ý — chủ site muốn giữ
   nguyên nó. Được như vậy vì admin/sidebar.css đặt cỡ bằng px cố định
   (`600 13.5px` cho nhóm, `500 14px` cho mục), --sidebar-w cũng là px, còn
   .sidebar-label thì khai `font-size: inherit` để thoát khỏi quy tắc thẻ trần
   `span { font-size: .875rem }` của lib.css. Ai đổi sidebar.css sang rem là
   menu trái bắt đầu phình theo thang này — kiểm lại chỗ đó trước khi đổi.

   Đo ở 375px sau khi nâng: .form-label 11,70 -> 12,60px · .section-title
   12,35 -> 13,30px · .detail-group 10,56 -> 11,25px · span (lib.css .875rem)
   11,38 -> 12,25px. Menu trái giữ nguyên 13,5 / 14px. */
@media only screen and (max-width: 768px) { html { font-size: 15px; } }
@media only screen and (max-width: 380px) { html { font-size: 14px; } }

html, body {
    min-height: 100%;
    background: var(--bg);
}

body {
    /* Xếp dọc: thanh trên rồi tới .admin-shell. min-height:100vh để menu trái
       cao hết màn ngay cả khi trang ít nội dung. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: var(--font);
    /* KHÔNG dùng -webkit-font-smoothing: antialiased. Trên macOS nó bỏ khử răng
       cưa theo pixel phụ, chữ mảnh hẳn đi và cả trang trông mờ. Để mặc định. */
}


/* ===== THANH TRÊN ===== */

/* Thanh trên mang màu thương hiệu lấy từ DB (styles.admin_header_color), đúng
   như bản cũ. Mọi thứ đặt lên nó phải dùng --brand-ink / --brand-veil chứ không
   phải màu cố định: bốn site shop mỗi site một màu, có site nền sáng có site nền
   tối, đặt cứng trắng hay đen là hỏng một nửa. */
.site-header {
    position: sticky;
    top: 0;
    /* 1200: trên ngăn kéo menu (1100) và trên .image-list dính (999) — trước
       đây 900 nên cuộn trang sửa sản phẩm là khung ảnh trượt đè lên thanh trên. */
    z-index: 1200;
    flex: none;
    height: var(--header-h);
    background: var(--brand);
    color: var(--brand-ink);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    /* Cùng container với .admin-shell — xem --shell-max ở tokens.css. */
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
}

.logo {
    flex: none;
    width: var(--logo-w);
    height: 34px;
    display: block;
    text-decoration: none;
    background-image: url(../../images/logo.svg);
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
}

/* ----- Ô tìm kiếm ----- */

.header-search {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
}

/* ===== Ô TÌM THẲNG HÀNG VỚI MÉP TRÁI CỘT NỘI DUNG (khổ desktop) =====

   Thanh trên và .admin-shell dùng chung một container nên mép trái hai bên
   trùng nhau; từ đó mép trái cột nội dung chỉ còn cách một đoạn cố định:
   menu trái + khoảng hở. Trừ đi phần thanh trên đã tiêu trước ô tìm
   (--hdr-lead = bề ngang logo + gap) là ra margin cần.

   Khác hẳn cơ chế --hdr-lead cũ đã gỡ: hồi đó thanh trên chạy hết chiều ngang
   nên phải tính cả phần căn giữa theo 100vw, dính luôn lỗi thanh cuộn.

   --hdr-lead khai ngay trên .header-inner để site nào logo khác thì đổi một
   chỗ (thongke logo 36px -> 48px, xem admin/overrides.css). */
.header-inner {
    /* --logo-w phải khai ở ĐÂY chứ không phải ở .logo: biến CSS chỉ truyền
       xuống con, đặt ở .logo thì .header-inner không đọc được để tính --hdr-lead.
       thongke khai lại 36px trong admin/overrides.css. */
    --logo-w: 168px;
    --hdr-lead: calc(var(--logo-w) + 12px);
}

/* Mốc 768px, KHÔNG phải 1024: phải trùng đúng mốc menu trái thành cột trong
   admin/sidebar.css. Từ 768px đã có cột nội dung để căn theo, mà khối này còn
   để 1024 thì cả dải 768–1023px ô tìm đứng sai chỗ — đo ở 820px: ô tìm nằm
   lệch TRÁI 97,7px so với mép cột nội dung. Đổi mốc menu trái là phải đổi luôn
   số này. */
@media only screen and (min-width: 768px) {
    /* Menu trái THU GỌN thành dải icon: mép trái nội dung dời vào, nhưng logo
       168px chặn mất chỗ — muốn ô tìm hạ về đúng mép nội dung thì nó phải đè
       lên logo. Nên cho logo co bằng đúng dải icon. .logo dùng
       background-size: auto 100% + background-position: left center, nên thu
       bề ngang chỉ CẮT phần bên phải, giữ nguyên chiều cao và phần biểu tượng
       bên trái — không cần ảnh logo thứ hai. */
    body:not(.sidebar-open) .logo {
        /* min(): site nào logo vốn đã hẹp hơn dải icon (thongke 36px) thì giữ
           nguyên, đừng phóng to lên 68px. */
        width: min(var(--logo-w), var(--sidebar-w-min));
    }

    body:not(.sidebar-open) .header-inner {
        --hdr-lead: calc(min(var(--logo-w), var(--sidebar-w-min)) + 12px);
    }

    body:not(.sidebar-open) .header-search {
        margin-left: calc(var(--sidebar-w-min) + var(--shell-gap) - var(--hdr-lead));
    }

    .header-search {
        margin-left: calc(var(--sidebar-w) + var(--shell-gap) - var(--hdr-lead));
        margin-right: auto;
    }
}

.header-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 6px 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.header-search-inner:focus-within {
    border-color: var(--surface);
    box-shadow: 0 0 0 3px var(--brand-veil-strong);
}


.header-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font: 400 13px/1.4 var(--font);
}

.header-search input::placeholder { color: var(--muted); }

/* Trình duyệt tự thêm nút xoá cho input[type=search]; bỏ đi vì đã có nút tìm. */
.header-search input::-webkit-search-cancel-button { display: none; }

.header-search-submit {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    /* Xám trung tính, không dùng màu thương hiệu: ô tìm là việc thường ngày,
       tô màu nhấn thì nó tranh mất chú ý với các nút hành động thật trong trang. */
    background: var(--field);
    color: var(--ink-2);
    cursor: pointer;
}

/* Kính lúp tô bằng mask + currentColor chứ không phải background-image, để icon
   luôn ăn theo màu chữ của nút dù nền nút có đổi. Cùng cách làm với logo bên
   hamcau/docs/UI-KIT.md. */
.header-search-submit::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--icon-search) center / contain no-repeat;
    mask: var(--icon-search) center / contain no-repeat;
}

.header-search-submit:hover { background: var(--line); color: var(--ink); }

/* ===== NÚT TÀI KHOẢN ===== */

/* Bề ngang tối thiểu đặt ở KHỐI BỌC, rồi cả nút lẫn menu thả xuống đều lấy
   100% của nó — nhờ vậy hai cái luôn rộng bằng nhau. Trước đây min-width nằm
   trên menu thả xuống nên nó phình rộng hơn nút mỗi khi tên người dùng ngắn. */
.account-menu {
    position: relative;
    flex: none;
    min-width: 182px;
    margin-left: auto;
}

.account-menu-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    /* Chiều cao cố định bằng ô tìm kiếm để hai khối trên thanh bằng nhau và
       chừa đều trên dưới. Trước đây chỉ có padding nên chiều cao ăn theo nội
       dung, nút cao hơn ô tìm và lệch hẳn xuống đáy thanh. */
    height: 38px;
    padding: 0 10px 0 3px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.account-menu-toggle:hover,
.account-menu.is-open .account-menu-toggle { background: var(--surface-2); }

.account-menu-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font: 700 12.5px/1 var(--font);
}

.account-menu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-menu-name {
    overflow: hidden;
    color: var(--ink);
    font: 600 13px/1.25 var(--font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-role {
    color: var(--muted);
    font: 400 11px/1.25 var(--font);
}

.account-menu-arrow {
    display: flex;
    flex: none;
    /* Đẩy mũi tên sát mép phải của nút, luôn cách đúng padding-right (10px).

       Không có dòng này thì chỗ thừa của nút dồn hết vào SAU mũi tên: .account-
       menu-meta là `flex: 0 1 auto` (co được nhưng KHÔNG giãn), mũi tên là
       `flex: none`, nên phần dư nằm cuối hàng. Tên người dùng dài đúng bằng bề
       ngang nút thì trông vẫn 10px — đo trên máy này ra đúng 10px; nhưng tên
       ngắn hơn, hoặc nút rộng hơn nội dung, là hở ra ngay. Thử nới nút thêm
       60px: khoảng cách nhảy từ 10px lên 70px. Đó là lý do cùng một bộ mã mà
       mỗi máy thấy một kiểu. */
    margin-left: auto;
    color: var(--muted);
    transition: transform .18s ease;
}

.account-menu.is-open .account-menu-arrow { transform: rotate(180deg); }

.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    /* Neo theo MÉP PHẢI, không phải mép trái.
       Trước đây đặt left:0 + right:0 + min-width:212px: nút tài khoản hẹp hơn
       212px nên min-width thắng, menu phình sang phải và thò ra ngoài mép phải
       trang đúng 29px. Nó là position:absolute nên phần thò ra làm cả trang có
       thanh cuộn ngang — mọi trang admin, kể cả khi menu đang đóng, vì
       visibility:hidden vẫn chiếm chỗ trong tính toán bố cục. Thanh trên lại là
       sticky (chỉ rộng bằng khung nhìn) nên cuộn sang phải là thấy nó hụt.
       Neo phải thì menu nở vào trong, không bao giờ vượt mép.
       max(100%, 212px): rộng bằng nút khi nút đủ to, nếu không thì lấy 212px —
       tên 2-3 ký tự làm nút chỉ còn ~90px, bám cứng theo thì mỗi dòng vỡ làm ba. */
    right: 0;
    left: 0;
    z-index: 70;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.account-menu.is-open .account-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.account-menu-header {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
}

.account-menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--radius-control);
    color: var(--ink-2);
    font: 500 13.5px/1.3 var(--font);
    text-decoration: none;
}

.account-menu-item:hover {
    background: var(--field);
    color: var(--ink);
    text-decoration: none;
}

.account-menu-item::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.acc-icon-account::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b82' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c0-3.5 3.2-5.6 7.2-5.6s7.2 2.1 7.2 5.6'/%3E%3C/svg%3E");
}

.acc-icon-ads::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b82' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E");
}

.acc-icon-password::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b82' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='10.2' rx='2.2'/%3E%3Cpath d='M8.2 10.4V7.2a3.8 3.8 0 0 1 7.6 0v3.2'/%3E%3Ccircle cx='12' cy='15.5' r='1.4'/%3E%3C/svg%3E");
}

.account-menu-logout {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--line-soft);
}

.account-menu-logout .account-menu-item { color: var(--crit); }

.account-menu-logout .account-menu-item:hover {
    background: var(--crit-soft);
    color: var(--crit);
}

.acc-icon-logout::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a84632' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H6.5v15H14'/%3E%3Cpath d='M12.5 12h8m0 0-3-3m3 3-3 3'/%3E%3C/svg%3E");
}

/* ===== KHUNG NỘI DUNG ===== */

.admin-shell {
    display: flex;
    align-items: flex-start;
    flex: 1 0 auto;
    /* Khung cột: menu trái và nội dung nằm CHUNG một container căn giữa, giống
       cd360. Nhờ vậy mép trái menu, mép trái nội dung và mép trái thanh trên
       thẳng một hàng thay vì mỗi thứ căn theo một mốc. */
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--content-pad);
    gap: var(--shell-gap);
}

.admin-main {
    /* min-width:0 là bắt buộc: không có nó thì một cái bảng rộng bên trong sẽ
       thổi phồng cột flex này và đẩy cả trang tràn ngang. */
    flex: 1 1 auto;
    min-width: 0;
}

#content {
    /* Bề ngang và lề hai bên do .admin-shell lo. */
    width: 100%;
    padding: 18px 0 40px;
}

.content { width: 100%; }

/* Khu quản trị không có chân trang: dòng "Trình quản lý Vaccin" cũ không nói
   thêm điều gì, mà lại chiếm chỗ ở mọi trang. Menu trái đã đủ để định vị. */

/* ===== TIỆN ÍCH CÒN DÙNG ===== */

.mt-scale { margin-top: 20px; }
.mb-scale { margin-bottom: 15px; }

/* ===== MÀN HẸP ===== */

@media only screen and (max-width: 1023px) {
    /* Nội dung chiếm trọn bề ngang: menu trái ở khổ này là ngăn kéo, không
       chiếm chỗ, nên không còn gì để căn giữa theo. */
    #content { max-width: none; }
}

@media only screen and (max-width: 780px) {
    /* Chỉ còn avatar nên khối tài khoản thu về đúng cỡ avatar; menu thả xuống
       lúc này mới cần bề ngang riêng của nó. */
    .account-menu { min-width: 0; }
    .account-menu-meta { display: none; }
    .account-menu-toggle { width: auto; padding: 0 3px; }
    .account-menu-arrow { display: none; }
    .account-menu-dropdown { left: auto; min-width: 182px; }

    /* Tên người dùng chuyển vào trong menu thả xuống, không mất thông tin. */
    .account-menu-header { display: flex; }
    .account-menu-header .account-menu-meta { display: flex; }
}

@media only screen and (max-width: 600px) {
    .header-inner { gap: 8px; }

    .logo { width: 118px; height: 26px; }

    .header-search-inner { height: 34px; padding: 0 5px 0 13px; }
    .header-search input { font-size: 12.5px; }
    .header-search-submit { width: 26px; height: 26px; }

    .account-menu-avatar { width: 28px; height: 28px; font-size: 11.5px; }
    .account-menu-dropdown { min-width: 196px; }
}

@media only screen and (max-width: 420px) {
    /* Logo và ô tìm không thể cùng nằm vừa một hàng ở khổ này. Ô tìm quan trọng
       hơn với người trực đơn, nên logo nhường chỗ — nút menu trái vẫn về được
       trang chính. */
    .logo { display: none; }
}