/*
 * TUHA — giao diện mới (phong cách Apple) cho THANH MENU + THANH TRÊN của app khách hàng, cả sáng lẫn tối.
 * Chỉ có hiệu lực dưới body.tuha-apple (bật bằng cookie tuha_ui hoặc hằng UI_APPLE_DEFAULT; chỉ thương hiệu TUHA mặc định).
 * Chỉ đổi màu / bo góc / khoảng cách — KHÔNG đổi kích thước thanh menu (230px mở, 60px thu gọn) nên bố cục các trang giữ nguyên.
 * Sáng/tối dùng đúng cơ chế sẵn có: body.light / body.dark (cookie theme_color). Bộ biến trùng với Cổng quản trị (sd-apple.css).
 */
body.tuha-apple {
  --ta-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, system-ui, sans-serif;
  --ta-side: #f6f6f9; --ta-bar: rgba(246, 246, 249, .86); --ta-card: #ffffff; --ta-text: #1c1c1e; --ta-sub: #5f5f64;
  --ta-line: rgba(60, 60, 67, .16); --ta-fill: rgba(120, 120, 128, .12); --ta-hover: rgba(120, 120, 128, .10);
  --ta-blue: #0062cc; --ta-blue-bg: rgba(0, 98, 204, .10); --ta-blue-fill: #0062cc; --ta-shadow: 0 10px 34px rgba(0, 0, 0, .16);
}
body.tuha-apple.dark {
  --ta-side: #1c1c1e; --ta-bar: rgba(28, 28, 30, .86); --ta-card: #2c2c2e; --ta-text: #f5f5f7; --ta-sub: #aeaeb4;
  --ta-line: rgba(84, 84, 88, .6); --ta-fill: rgba(120, 120, 128, .26); --ta-hover: rgba(255, 255, 255, .07);
  --ta-blue: #6cb8ff; --ta-blue-bg: rgba(108, 184, 255, .16); --ta-blue-fill: #0a6fe0; --ta-shadow: 0 10px 34px rgba(0, 0, 0, .55);
}

/* ───── thứ tự lớp (z-index) ───── */
/* Giao diện gốc hạ thanh menu xuống z-index:10 ở màn ≤1024px → nội dung trang (z-index lớn hơn) đè lên hộp con của menu.
   Menu và thanh trên phải luôn nằm trên nội dung; vẫn dưới cửa sổ hộp thoại của Bootstrap (≥1050). */
body.tuha-apple .left-sidenav { z-index: 1002 !important; } /* cao hơn thanh trên 1 bậc: ở màn hẹp thanh trên xuống 2 dòng và chồng lên vùng menu */
body.tuha-apple .topbar { z-index: 1001; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 { z-index: 1003; }
/* Màn ≤1024px: giao diện gốc đặt overflow-y:auto cho thanh menu → cắt cụt hộp con vươn ra ngoài rộng 60px. Chế độ thu gọn phải để hộp con tràn ra như ở màn rộng. */
body.tuha-apple.enlarge-menu .left-sidenav { overflow: visible !important; }

/* ───── thanh menu bên trái ───── */
body.tuha-apple.dark-sidenav.navy-sidenav .left-sidenav { background: var(--ta-side) !important; border-right: .5px solid var(--ta-line); font-family: var(--ta-font); }
body.tuha-apple .left-sidenav .brand { margin: 14px 14px 10px !important; height: auto; text-align: left; background: transparent !important; }
body.tuha-apple .left-sidenav .brand .logo { display: flex; align-items: center; line-height: 1; }
/* logo: nền sáng dùng chữ logo tối; nền tối dùng chữ logo trắng; thu gọn dùng biểu tượng vuông */
body.tuha-apple .left-sidenav .logo-lg.logo-light { display: none !important; }
body.tuha-apple .left-sidenav .logo-sm-white { display: none !important; }
body.tuha-apple .left-sidenav .logo-ta-lt { display: block; height: 34px; width: auto; }
body.tuha-apple .left-sidenav .logo-ta-sm { display: none; }
body.tuha-apple.dark:not(.enlarge-menu) .left-sidenav .logo-ta-lt { display: none; }
body.tuha-apple.dark:not(.enlarge-menu) .left-sidenav .logo-lg.logo-light { display: block !important; height: 34px !important; width: auto; }
body.tuha-apple.enlarge-menu .left-sidenav .logo-ta-lt, body.tuha-apple.enlarge-menu .left-sidenav .logo-lg.logo-light { display: none !important; }
body.tuha-apple.enlarge-menu .left-sidenav .logo-ta-sm { display: block; width: 34px; height: 34px; border-radius: 9px; margin: 0 auto; }
body.tuha-apple.enlarge-menu .left-sidenav .brand { margin: 14px 0 10px !important; }

body.tuha-apple .left-sidenav .left-sidenav-menu { padding: 4px 10px 28px !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu *, body.tuha-apple .left-sidenav .left-sidenav-menu li > a { color: var(--ta-text) !important; font-family: var(--ta-font); }
body.tuha-apple .left-sidenav .left-sidenav-menu li { margin: 0 !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li.mm-active { background: transparent !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li > a.menu-lvl1 {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px !important; margin: 1px 0;
  border-radius: 10px !important; font-size: 14px; font-weight: 500; letter-spacing: -.005em; transition: background-color .15s, color .15s;
}
body.tuha-apple .left-sidenav .left-sidenav-menu li > a.menu-lvl1 .menu-icon {
  width: 20px !important; height: 20px !important; flex: 0 0 20px; margin: 0 !important; stroke-width: 1.8 !important; color: var(--ta-sub) !important; transition: color .15s;
}
body.tuha-apple .left-sidenav .left-sidenav-menu li > a.menu-lvl1:hover { background: var(--ta-hover) !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li > a.menu-lvl1:active { transform: scale(.985); }
/* nhóm đang mở / chứa trang hiện tại */
body.tuha-apple .left-sidenav .left-sidenav-menu li.mm-active > a.menu-lvl1 { background: var(--ta-blue-bg) !important; font-weight: 600; }
body.tuha-apple .left-sidenav .left-sidenav-menu li.mm-active > a.menu-lvl1, body.tuha-apple .left-sidenav .left-sidenav-menu li.mm-active > a.menu-lvl1 * { color: var(--ta-blue) !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li.mm-active > a.menu-lvl1 .menu-icon { color: var(--ta-blue) !important; }
body.tuha-apple.dark-sidenav .left-sidenav-menu li.mm-active > a { font-weight: 600; }

/* mục con (menu mở rộng) */
body.tuha-apple .left-sidenav .left-sidenav-menu li ul { margin: 2px 0 6px !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li > a {
  /* chữ bắt đầu ở 44px = thẳng hàng với chữ của mục cha; dòng xuống tiếp theo tự canh theo chữ. Chấm vẽ riêng bằng ::before (bên dưới). */
  position: relative; display: block; padding: 7px 10px 7px 44px !important; margin: 1px 0; border-radius: 8px !important; line-height: 1.35;
  font-size: 13.5px; font-weight: 400; color: var(--ta-sub) !important; transform: none !important; -webkit-transform: none !important; transition: background-color .15s, color .15s;
}
body.tuha-apple .left-sidenav .left-sidenav-menu ul.nav-second-level li:hover a { transform: none !important; -webkit-transform: none !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li > a:hover { background: var(--ta-hover) !important; color: var(--ta-text) !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li > a.active, body.tuha-apple .left-sidenav .left-sidenav-menu li ul li > a.menu-left-active {
  background: var(--ta-blue-bg) !important; color: var(--ta-blue) !important; font-weight: 600 !important; border-radius: 8px !important;
}

/* dấu chấm đầu mục con — vẽ bằng ::before của chính mục, đặt tuyệt đối theo DÒNG CHỮ ĐẦU (không phụ thuộc ô biểu tượng / font icon cũ):
   tâm chấm = lề trên 7px + nửa dòng (1,35em/2) + 1,4px (canh vào tâm của chữ thường — x-height — thấp hơn tâm dòng) ; cột chấm = tâm biểu tượng mục cha (22px) */
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li > a i { display: none !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li:not(.enlarge_menu_link_l3_head) > a::before {
  content: "" !important; position: absolute; left: 19.5px; top: calc(7px + .675em + 1.4px - 2.5px); width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .38; pointer-events: none; transition: opacity .15s, transform .15s;
}
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li:not(.enlarge_menu_link_l3_head) > a:hover::before { opacity: .65; }
body.tuha-apple .left-sidenav .left-sidenav-menu li ul li:not(.enlarge_menu_link_l3_head) > a.menu-left-active::before, body.tuha-apple .left-sidenav .left-sidenav-menu li ul li:not(.enlarge_menu_link_l3_head) > a.active::before { opacity: 1; transform: scale(1.15); }

/* thu gọn (chỉ biểu tượng) + hộp con bung khi rê chuột */
body.tuha-apple.enlarge-menu .left-sidenav .left-sidenav-menu { padding: 4px 6px 28px !important; }
body.tuha-apple.enlarge-menu .left-sidenav .left-sidenav-menu li > a.menu-lvl1 { justify-content: center; padding: 10px 0 !important; }
body.tuha-apple.enlarge-menu .left-sidenav .left-sidenav-menu li > a.menu-lvl1 .menu-icon { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link:hover, body.tuha-apple.enlarge-menu .enlarge_menu_link_l1:has(.enlarge_menu_link:hover) { background-color: transparent !important; }
body.tuha-apple.enlarge-menu .enlarge_menu_link_l2 {
  background: var(--ta-card) !important; border: .5px solid var(--ta-line); border-radius: 14px !important; box-shadow: var(--ta-shadow);
  width: 236px; left: 58px; padding: 6px !important; overflow: visible; /* visible: để "cầu nối" bên dưới nằm ngoài khung hộp */
  /* Luôn hiện trong DOM nhưng ẩn bằng visibility + trễ: rời chuột khỏi biểu tượng, hộp còn ~0,3s mới tắt → kịp đưa chuột sang chọn mục */
  display: block !important; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-4px);
  transition: opacity .14s ease .3s, transform .14s ease .3s, visibility 0s linear .44s;
}
/* cầu nối vô hình giữa biểu tượng và hộp: đi chuột qua khoảng hở không bị coi là rời khỏi menu */
body.tuha-apple.enlarge-menu .enlarge_menu_link_l2::before { content: ""; position: absolute; top: 0; bottom: 0; left: -22px; width: 22px; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l1:hover > .enlarge_menu_link_l2,
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2:hover {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s;
}
body.tuha-apple.enlarge-menu .enlarge_menu_link_l3_head { background: transparent !important; padding: 6px 12px 4px !important; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
body.tuha-apple.enlarge-menu .enlarge_menu_link_l3_head a { color: var(--ta-sub) !important; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li > a {
  position: relative; display: block; padding: 8px 12px 8px 30px !important; margin: 1px 0; border-radius: 8px !important; font-size: 13.5px; font-weight: 400; color: var(--ta-text) !important; line-height: 1.35;
}
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li > a i { display: none !important; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li:not(.enlarge_menu_link_l3_head) > a::before {
  content: "" !important; position: absolute; left: 12px; top: calc(8px + .675em + 1.4px - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .38; pointer-events: none;
}
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li > a.menu-left-active::before { opacity: 1; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li > a:hover::before { opacity: .65; }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li > a:hover { background: var(--ta-hover) !important; }
body.tuha-apple.enlarge-menu .enlarge_menu_link_l3:hover { background-color: transparent !important; }

/* ───── thanh trên ───── */
body.tuha-apple .topbar .navbar-custom {
  /* nền ĐẶC, không dùng backdrop-filter: trên Safari lớp kính tạo lớp vẽ riêng làm menu thả (tài khoản…) bị nội dung trang đè lên */
  background: var(--ta-side) !important; border-bottom: .5px solid var(--ta-line); font-family: var(--ta-font);
}
body.tuha-apple .topbar .navbar-custom .dropdown-menu { z-index: 1060; }
body.tuha-apple .topbar .navbar-custom .nav-link { color: var(--ta-sub) !important; font-weight: 500; transition: color .15s, background-color .15s; }
body.tuha-apple .topbar .navbar-custom .nav-link:hover, body.tuha-apple .topbar .navbar-custom .topbar-nav li.show .nav-link { color: var(--ta-text) !important; background: transparent !important; }
body.tuha-apple .topbar .navbar-custom .topbar-icon, body.tuha-apple .topbar .navbar-custom .nav-user-name { color: var(--ta-sub); }
body.tuha-apple .topbar .button-menu-mobile { color: var(--ta-sub) !important; }
/* các nút liên kết ngoài (Palbox, Work, OmiBox, Facebook, hotline) → viên thuốc nhạt, bớt nổi hơn nội dung */
body.tuha-apple .topbar .creat-btn .btn {
  background: var(--ta-blue-bg) !important; color: var(--ta-blue) !important; border: 0 !important; border-radius: 999px !important;
  padding: 5px 13px; font-weight: 600; font-size: 12.5px; box-shadow: none !important; transition: opacity .15s;
}
body.tuha-apple .topbar .creat-btn .btn:hover { opacity: .8; }
body.tuha-apple .topbar .creat-btn .btn i { color: inherit !important; }
body.tuha-apple .topbar .dropdown-menu {
  background: var(--ta-card); color: var(--ta-text); border: .5px solid var(--ta-line); border-radius: 14px; box-shadow: var(--ta-shadow); padding: 6px; font-family: var(--ta-font);
}
body.tuha-apple .topbar .dropdown-menu .dropdown-item { color: var(--ta-text); border-radius: 8px; padding: 8px 12px; }
body.tuha-apple .topbar .dropdown-menu .dropdown-item:hover, body.tuha-apple .topbar .dropdown-menu .dropdown-item:focus { background: var(--ta-hover); color: var(--ta-text); }
body.tuha-apple .topbar .dropdown-menu .dropdown-divider { border-color: var(--ta-line); }
body.tuha-apple .topbar ul.dropdown-menu li { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { body.tuha-apple * { transition-duration: .01ms !important; } }
body.tuha-apple.enlarge-menu .left-sidenav .enlarge_menu_link_l2 li.enlarge_menu_link_l3_head > a { padding-left: 0 !important; }

body.tuha-apple .left-sidenav .left-sidenav-menu li.enlarge_menu_link_l3_head > a::before { content: none !important; display: none !important; }
body.tuha-apple .left-sidenav .left-sidenav-menu li.enlarge_menu_link_l3_head > a { padding-left: 0 !important; display: block; }

/* ===== Hiển thị tiếng Việt ổn định trên Windows =====
   Gốc lỗi: tiêu đề/hộp thoại của giao diện cũ dùng Poppins (Google Fonts) mà Poppins KHÔNG có bộ ký tự tiếng Việt,
   nên mỗi chữ có dấu (ạ, ề, ố…) bị trình duyệt lẫn sang một font dự phòng khác — trên Mac là SF nên khó thấy,
   trên Windows là Arial nên lệch nét, lệch cao. Dùng chung MỘT chồng font hệ thống (Segoe UI trên Windows) cho cả
   chữ thường lẫn tiêu đề: đủ tiếng Việt, không phụ thuộc mạng/Google Fonts, không nhấp nháy khi tải font.
   (Chỉ chọn thẻ chữ — KHÔNG dùng * để khỏi đè font biểu tượng.) */
body.tuha-apple,
body.tuha-apple h1, body.tuha-apple h2, body.tuha-apple h3, body.tuha-apple h4, body.tuha-apple h5, body.tuha-apple h6,
body.tuha-apple .modal-content .modal-header .modal-title, body.tuha-apple .title-text, body.tuha-apple .card-title,
body.tuha-apple .page-title-box .breadcrumb, body.tuha-apple .page-title-box .page-title, body.tuha-apple .project-card,
body.tuha-apple .btn, body.tuha-apple .form-control, body.tuha-apple .form-select, body.tuha-apple .dropdown-menu,
body.tuha-apple .table, body.tuha-apple .nav-link, body.tuha-apple .badge, body.tuha-apple .swal2-popup,
body.tuha-apple .select2-container, body.tuha-apple .select2-results__option, body.tuha-apple .daterangepicker,
body.tuha-apple .datepicker, body.tuha-apple .tooltip, body.tuha-apple .popover { font-family: var(--ta-font); }
/* Segoe UI không có nét 500 (chỉ Regular 400 và Semibold 600): nét 500 sẽ hiện như 400 — chấp nhận, nét nhấn dùng 600. */
body.tuha-apple h1, body.tuha-apple h2, body.tuha-apple h3, body.tuha-apple h4, body.tuha-apple h5, body.tuha-apple h6 { letter-spacing: 0; }
/* Dấu tiếng Việt chồng cao (ế, ệ, ỗ…): dòng quá thấp trong ô overflow:hidden sẽ bị cắt đỉnh dấu */
body.tuha-apple .left-sidenav .left-sidenav-menu li > a { line-height: 1.4; }

/* Menu thu gọn: bấm một mục cha khiến metisMenu ghi style="height:14px" lên danh sách con và không bao giờ gỡ (animation đứng ở đầu chừng) → hộp con chỉ cao 14px,
   nền trắng thành một vạch nhỏ còn các mục con tràn ra ngoài, trong suốt, đè lên nội dung trang. Hộp con của menu thu gọn luôn phải cao theo nội dung. */
body.enlarge-menu .left-sidenav .enlarge_menu_link_l2 { height: auto !important; }
/* ───────── Thanh trên: logo + hàng chip lối tắt (giao diện mới) ───────── */
/* 1) Theme gốc (app.css) ở khổ ≤1316px ẨN logo thanh bên (.brand) và đẩy thanh bên xuống 52px → ô góc trái trên cùng trống. Giữ nguyên bố cục như màn rộng: thanh bên bắt đầu từ mép trên, logo ở đầu thanh bên (logo ngang khi mở rộng, logo vuông khi thu gọn — các luật .logo-ta-lt/.logo-ta-sm ở trên). */
@media (max-width: 1316.98px) {
  body.tuha-apple .left-sidenav { top: 0 !important; margin-top: 0 !important }
  body.tuha-apple .left-sidenav .brand { display: block !important; width: auto !important }
}
/* 2) Hàng chip lối tắt (Palbox/Work/OmiBox/Facebook/SĐT) rộng ~500px; ở khổ ~768–920px không còn chỗ cạnh cụm bên phải nên bị đẩy XUỐNG DÒNG (thanh trên cao 104px) và đè lên nội dung vì trang chỉ chừa 52px. Giữ cùng một dòng: chip co lại theo chỗ còn lại và cuộn ngang. */
@media (min-width: 768px) {
  body.tuha-apple .topbar .navbar-custom { display: flex; align-items: flex-start }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav.float-end { order: 2; margin-left: auto; flex: none; float: none }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) { order: 1; flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; float: none }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li { flex: none }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li.creat-btn { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li.creat-btn::-webkit-scrollbar { display: none }
}

/* 3) Thanh bên MỞ RỘNG ở khổ 1025–1316px: theme gốc đặt .page-wrapper{margin:0} ở khổ ≤1316px (vì mặc định coi thanh bên là ngăn kéo) nên thanh bên rộng 230px đè lên nội dung chính (và thanh trên rộng 100vw-230 bị lệch trái). Đẩy nội dung sang phải đúng bề rộng thanh bên; thu gọn (60px) vẫn dùng luật có sẵn ở xsale.css. */
@media (min-width: 1025px) and (max-width: 1316.98px) {
  body.tuha-apple:not(.enlarge-menu) .page-wrapper { margin-left: 230px !important }
}
/* Điện thoại (≤767px): thanh bên mở rộng là NGĂN KÉO phủ lên nội dung (không đẩy nội dung, vì 390px − 230px chỉ còn 160px). Nội dung và thanh trên giữ nguyên chỗ như lúc thu gọn (chừa 60px); thêm bóng + lớp mờ phía sau, bấm vào lớp mờ thì đóng (script ở header.php). Từ 768px trở lên theo xsale.css: đẩy nội dung sang phải 230px. */
@media (max-width: 767.98px) {
  body.tuha-apple:not(.enlarge-menu) .page-wrapper { margin-left: 60px !important; width: calc(100vw - 60px) }
  body.tuha-apple:not(.enlarge-menu) .topbar { width: calc(100vw - 60px) }
  body.tuha-apple:not(.enlarge-menu) .left-sidenav { box-shadow: var(--ta-shadow) }
  body.tuha-apple:not(.enlarge-menu) .tuha-vt { display: none !important } /* nút nổi «Bản máy tính» đè lên mục cuối của ngăn kéo */
  body.tuha-apple:not(.enlarge-menu)::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 1000; -webkit-tap-highlight-color: transparent }
}

/* ───────── Xếp hạng nhân viên (thay dòng chữ chạy ngang) ───────── */
body.tuha-apple .tt-rank { --tt-gold: #b87400; --tt-gold-bg: rgba(255, 184, 0, .20); --tt-silver: #636366; --tt-silver-bg: rgba(142, 142, 147, .22); --tt-bronze: #94562a; --tt-bronze-bg: rgba(205, 127, 50, .20);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 14px; text-align: left; font-family: var(--ta-font); color: var(--ta-text);
  background: var(--ta-card); border: .5px solid var(--ta-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03) }
body.tuha-apple.dark .tt-rank { --tt-gold: #ffc233; --tt-gold-bg: rgba(255, 184, 0, .22); --tt-silver: #c7c7cc; --tt-silver-bg: rgba(174, 174, 178, .24); --tt-bronze: #e0a070; --tt-bronze-bg: rgba(205, 127, 50, .26) }
body.tuha-apple .tt-rank .tt-i { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none }
body.tuha-apple .tt-bar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 7px }
body.tuha-apple .tt-ttl { font-size: 13px; font-weight: 600; letter-spacing: -.01em }
body.tuha-apple .tt-cap { display: none; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ta-sub); font-variant-numeric: tabular-nums }
body.tuha-apple .tt-i-p-month:checked ~ .tt-bar .tt-cap-month, body.tuha-apple .tt-i-p-day:checked ~ .tt-bar .tt-cap-day { display: inline }
body.tuha-apple .tt-segs { display: flex; flex-wrap: wrap; gap: 6px }
body.tuha-apple .tt-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--ta-fill) }
body.tuha-apple .tt-b { margin: 0; padding: 4px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--ta-sub); cursor: pointer; user-select: none; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s }
body.tuha-apple .tt-b:hover { color: var(--ta-text) }
body.tuha-apple .tt-i-r-sale:checked ~ .tt-bar .tt-b-sale, body.tuha-apple .tt-i-r-mkt:checked ~ .tt-bar .tt-b-mkt,
body.tuha-apple .tt-i-p-month:checked ~ .tt-bar .tt-b-month, body.tuha-apple .tt-i-p-day:checked ~ .tt-bar .tt-b-day { background: var(--ta-card); color: var(--ta-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px var(--ta-line) }
body.tuha-apple.dark .tt-i-r-sale:checked ~ .tt-bar .tt-b-sale, body.tuha-apple.dark .tt-i-r-mkt:checked ~ .tt-bar .tt-b-mkt,
body.tuha-apple.dark .tt-i-p-month:checked ~ .tt-bar .tt-b-month, body.tuha-apple.dark .tt-i-p-day:checked ~ .tt-bar .tt-b-day { background: #48484a }
body.tuha-apple .tt-i-r-sale:focus-visible ~ .tt-bar .tt-b-sale, body.tuha-apple .tt-i-r-mkt:focus-visible ~ .tt-bar .tt-b-mkt,
body.tuha-apple .tt-i-p-month:focus-visible ~ .tt-bar .tt-b-month, body.tuha-apple .tt-i-p-day:focus-visible ~ .tt-bar .tt-b-day { outline: 2px solid var(--ta-blue); outline-offset: 1px }
body.tuha-apple .tt-l { display: none; flex: 1 1 440px; min-width: 0; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
body.tuha-apple .tt-i-r-sale:checked ~ .tt-i-p-month:checked ~ .tt-l-sale-month, body.tuha-apple .tt-i-r-sale:checked ~ .tt-i-p-day:checked ~ .tt-l-sale-day,
body.tuha-apple .tt-i-r-mkt:checked ~ .tt-i-p-month:checked ~ .tt-l-mkt-month, body.tuha-apple .tt-i-r-mkt:checked ~ .tt-i-p-day:checked ~ .tt-l-mkt-day { display: grid }
body.tuha-apple .tt-it { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr); grid-template-areas: "rk av nm" "rk av vl"; column-gap: 9px; align-items: center; min-width: 0; padding: 7px 10px; border-radius: 12px; background: var(--ta-fill) }
body.tuha-apple .tt-rk { grid-area: rk; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ta-sub); background: transparent }
body.tuha-apple .tt-n1 .tt-rk { color: var(--tt-gold); background: var(--tt-gold-bg) }
body.tuha-apple .tt-n2 .tt-rk { color: var(--tt-silver); background: var(--tt-silver-bg) }
body.tuha-apple .tt-n3 .tt-rk { color: var(--tt-bronze); background: var(--tt-bronze-bg) }
body.tuha-apple .tt-av { grid-area: av; position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--ta-blue-bg); color: var(--ta-blue); display: flex; align-items: center; justify-content: center; font-size: 14px }
body.tuha-apple .tt-av b { font-weight: 600 }
body.tuha-apple .tt-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ta-card) }
body.tuha-apple .tt-nm { grid-area: nm; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em }
body.tuha-apple .tt-vl { grid-area: vl; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--ta-sub); font-variant-numeric: tabular-nums }
body.tuha-apple .tt-n1 .tt-vl { color: var(--tt-gold) }
body.tuha-apple .tt-empty { grid-column: 1 / -1; padding: 8px 2px; font-size: 13px; color: var(--ta-sub) }
@media (max-width: 767.98px) {
  body.tuha-apple .tt-rank { padding: 10px 12px; gap: 10px }
  body.tuha-apple .tt-bar { flex: 1 1 100% }
  body.tuha-apple .tt-segs { width: 100% }
  body.tuha-apple .tt-seg { flex: 1 1 0 }
  body.tuha-apple .tt-b { flex: 1 1 0; text-align: center; padding: 9px 8px; font-size: 13px }
  body.tuha-apple .tt-l { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr) }
  body.tuha-apple .tt-it { padding: 7px 12px }
  body.tuha-apple .tt-l { gap: 6px }
  body.tuha-apple .tt-nm { font-size: 14px }
  body.tuha-apple .tt-vl { font-size: 13px }
}
@media (min-width: 768px) and (max-width: 1100px) {
  body.tuha-apple .tt-l { flex-basis: 100%; }
}

/* Hàng chip lối tắt trên thanh trên: vệt mờ báo «còn nữa» ở mép bị che (tuha-topbar.js tự trượt khi rê chuột) */
@media (min-width: 768px) {
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li.creat-btn.tb-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent) }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li.creat-btn.tb-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px); mask-image: linear-gradient(90deg, transparent, #000 34px) }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) > li.creat-btn.tb-fade-l.tb-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent) }
}


/* ═════════ Độ tương phản — rà soát giao diện mới 21/10/2026 ═════════
   Khách báo ô nhập «mờ nhạt, không viền», nhất là trên màn hình kém. Đo thật trên 11 màn: ranh giới ô nhập chỉ 1,0–1,7:1 (chuẩn WCAG 1.4.11: ≥ 3:1),
   chữ gợi ý 2,6–3,8:1 và chữ xanh 4,0:1 (cần ≥ 4,5:1), xám phụ 3,3:1, ô tích chọn gần như vô hình. Nguồn duy nhất của các giá trị là bộ biến bên dưới;
   các tệp tuha-*.css khác chỉ dùng lại (var(--tf-*), var(--ta-mute), var(--ta-blue-fill)), không tự đặt màu ô nhập riêng. */
body.tuha-apple {
  --tf-bg: #ffffff; --tf-bd: #a8b1c5; --tf-bd-bot: #838ea7; --tf-bd-sec: #c3cad8; --tf-bd-grey: #98a2b8; --tf-bd-hover: #55627f; --tf-bd-sep: #cfd5e1; --tf-ro-bg: #f4f6fa; --tf-ro-bd: #cfd5e1;
  --tf-ph: #6c6c70; --tf-addon: #eef1f6; --tf-ring: rgba(0, 98, 204, .30); --ta-mute: #6e6e73; --tf-err: #c4001a; --tf-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(30, 41, 82, .12), 0 2px 5px rgba(30, 41, 82, .05);
}
body.tuha-apple.light, body.tuha-apple.dark { --border-input-color: var(--tf-bd); --bg-select-color: var(--tf-bg) }
body.tuha-apple.dark {
  --tf-bg: #1c1c1e; --tf-bd: #5f6a82; --tf-bd-bot: #7d879f; --tf-bd-sec: #454b5c; --tf-bd-grey: #6c7790; --tf-bd-hover: #b8c0d4; --tf-bd-sep: #4a4f5e; --tf-ro-bg: #25272e; --tf-ro-bd: #4a4f5e;
  --tf-ph: #a1a1a6; --tf-addon: #363a47; --tf-ring: rgba(108, 184, 255, .35); --ta-mute: #b0b0b6; --tf-err: #ff7a72; --tf-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .25);
}

/* ô nhập / chọn: viền đặc 1px (≥ 3:1 với nền thẻ và nền trang), nền riêng, chữ rõ; focus = viền xanh + vòng sáng */
body.tuha-apple .form-control, body.tuha-apple .form-select, body.tuha-apple textarea.form-control,
body.tuha-apple .select2-container--default .select2-selection--single, body.tuha-apple .select2-container--default .select2-selection--multiple {
  background-color: var(--tf-bg); border: 1px solid var(--tf-bd); color: var(--ta-text); box-shadow: var(--tf-shadow); border-bottom-color: var(--tf-bd-bot)
}
body.tuha-apple .form-control:hover, body.tuha-apple .form-select:hover, body.tuha-apple .select2-container--default .select2-selection:hover { border-color: var(--tf-bd-hover) }
body.tuha-apple .form-control:focus, body.tuha-apple .form-select:focus,
body.tuha-apple .select2-container--default.select2-container--focus .select2-selection, body.tuha-apple .select2-container--default.select2-container--open .select2-selection {
  border-color: var(--ta-blue); box-shadow: 0 0 0 3px var(--tf-ring); outline: 0;
}
body.tuha-apple .form-control[readonly], body.tuha-apple .form-control:disabled, body.tuha-apple .form-select:disabled {
  background-color: var(--tf-ro-bg); border-color: var(--tf-ro-bd); color: var(--ta-sub); opacity: 1; box-shadow: none;
}
body.tuha-apple .form-control.is-invalid, body.tuha-apple .form-control.error, body.tuha-apple .form-select.is-invalid { border-color: var(--tf-err) }
body.tuha-apple ::placeholder, body.tuha-apple .select2-container--default .select2-selection__placeholder { color: var(--tf-ph); opacity: 1; font-weight: 400 }
body.tuha-apple .input-group-text { background: var(--tf-addon); border: 1px solid var(--tf-bd); color: var(--ta-text) }
/* ô tích / nút chọn: viền rõ; bật = xanh đặc */
body.tuha-apple input[type="checkbox"], body.tuha-apple input[type="radio"] { accent-color: var(--ta-blue-fill) }
body.tuha-apple .form-check-input { background-color: var(--tf-bg); border: 1px solid var(--tf-bd-bot) }
body.tuha-apple .form-check-input:checked { background-color: var(--ta-blue-fill) !important; border-color: var(--ta-blue) !important }
body.tuha-apple .form-check-input:focus { box-shadow: 0 0 0 3px var(--tf-ring); border-color: var(--ta-blue) }

/* nhãn / nút viền màu của giao diện gốc (app.css): chữ nhạt 1,7–2,4:1 → dùng màu đủ đậm; nền nhạt giữ nguyên */
body.tuha-apple { --lc-ok: #1e7e34; --lc-warn: #8a5a00; --lc-bad: #c4001a; --lc-pur: #5b4fd6; --lc-sub: #434a60; }
body.tuha-apple.dark { --lc-ok: #4cd37c; --lc-warn: #ffc247; --lc-bad: #ff7a72; --lc-pur: #bcb4ff; --lc-sub: #b4bbd2; }
body.tuha-apple :is(.badge-soft-primary, .badge-soft-info, .badge-outline-primary, .badge-outline-info, .text-primary, .text-info) { color: var(--ta-blue) !important }
body.tuha-apple :is(.badge-soft-success, .badge-outline-success, .text-success) { color: var(--lc-ok) !important }
body.tuha-apple :is(.badge-soft-warning, .badge-outline-warning, .text-warning) { color: var(--lc-warn) !important }
body.tuha-apple :is(.badge-soft-danger, .badge-outline-danger, .text-danger) { color: var(--lc-bad) !important }
body.tuha-apple :is(.badge-soft-purple, .badge-soft-pink, .badge-outline-purple, .badge-outline-pink) { color: var(--lc-pur) !important }
body.tuha-apple :is(.badge-soft-secondary, .badge-outline-secondary, .badge-soft-dark, .bg-secondary-50, .text-muted, .text-secondary) { color: var(--lc-sub) !important }
body.tuha-apple .btn-outline-success { color: var(--lc-ok); border-color: var(--lc-ok) }
body.tuha-apple .btn-outline-warning { color: var(--lc-warn); border-color: var(--lc-warn) }
body.tuha-apple .btn-outline-danger { color: var(--lc-bad); border-color: var(--lc-bad) }
body.tuha-apple .btn-outline-primary, body.tuha-apple .btn-outline-info { color: var(--ta-blue); border-color: var(--ta-blue) }
body.tuha-apple .btn-outline-secondary { color: var(--lc-sub); border-color: var(--lc-sub) }
/* chân trang + mục hiện tại của breadcrumb dùng #7081b9 (3,5–3,8:1) */
body.tuha-apple .footer, body.tuha-apple .footer a, body.tuha-apple .breadcrumb-item.active { color: var(--ta-sub) }
/* nút / nhãn đặc chữ trắng của giao diện gốc: nền quá nhạt (1,9–2,6:1) → nền đậm hơn (≥ 4,5:1) */
body.tuha-apple .btn-warning { background-color: #a85400; border-color: #a85400 !important; color: #fff !important }
body.tuha-apple .btn-success { background-color: #1e7e34; border-color: #1e7e34; color: #fff }
body.tuha-apple .btn-danger { background-color: #c4001a; border-color: #c4001a; color: #fff }
body.tuha-apple .btn-info { background-color: #0a6c8a; border-color: #0a6c8a; color: #fff }
body.tuha-apple .badge.bg-success { background-color: #1e7e34 !important; color: #fff !important }
body.tuha-apple .badge.bg-danger { background-color: #c4001a !important; color: #fff !important }
body.tuha-apple .badge.bg-primary { background-color: var(--ta-blue-fill) !important; color: #fff !important }
body.tuha-apple .badge.bg-info { background-color: #0a6c8a !important; color: #fff !important }
body.tuha-apple .badge.bg-secondary { background-color: #5a6178 !important; color: #fff !important }
body.tuha-apple .badge.bg-warning { background-color: #ffb822 !important; color: #1c1c1e !important }
/* phân trang / tab của giao diện gốc dùng xanh #1761fd — chế độ tối chỉ 2,6:1 */
body.tuha-apple.dark .page-item:not(.active) .page-link, body.tuha-apple.dark .nav-tabs .nav-link.active, body.tuha-apple.dark .nav-pills .nav-link:not(.active) { color: var(--ta-blue) }
body.tuha-apple.dark .bg-secondary-50 { color: #fff !important }
/* mép dưới đậm hơn cho ô lấy viền từ quy tắc cũ (switch_theme.css, có !important) */
body.tuha-apple .form-control:not(:focus):not(:hover):not(.is-invalid):not([readonly]):not(:disabled), body.tuha-apple .form-select:not(:focus):not(:hover):not(.is-invalid):not(:disabled),
body.tuha-apple .select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
body.tuha-apple .select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple { border-bottom-color: var(--tf-bd-bot) !important }

/* Điện thoại: bảng thông báo / lịch / thư mở ra bị thanh menu bên trái che mất đầu chữ (Popper đặt lệch trái ra ngoài màn hình). Ghim bảng vào khung nhìn, chừa thanh menu 60px bên trái. */
@media (max-width: 767.98px) {
  body.tuha-apple .notification-list:not([class*="ua-expli"]) > .dropdown-menu.show { position: fixed !important; inset: 56px 8px auto 68px !important; transform: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100vh - 72px); overflow-y: auto; margin: 0 !important }
  body.tuha-apple .notification-list:not([class*="ua-expli"]) > .dropdown-menu .simplebar-wrapper, body.tuha-apple .notification-list:not([class*="ua-expli"]) > .dropdown-menu .slimscroll { max-height: calc(100vh - 190px) }
}

/* Điện thoại (≤767px): thanh trên cùng MỘT hàng. Trước đây cụm biểu tượng bên phải (~273px) + nút ☰ (60px) vượt 315px nên nút ☰ rơi xuống
   dòng hai, thanh trên (fixed, nền trong suốt) cao 104px và CHE nút «?» / «⋯» / tiêu đề trang — bấm vào là bấm trúng thanh trên (28/10/2026). */
@media (max-width: 767.98px) {
  body.tuha-apple .topbar .navbar-custom { display: flex; flex-wrap: nowrap; align-items: center; min-height: 52px }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) { order: 1; flex: none; float: none; display: flex }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav:not(.float-end) .button-menu-mobile { padding-left: 10px; padding-right: 10px; width: auto }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav.float-end { order: 2; margin-left: auto; float: none; display: flex; flex-wrap: nowrap; align-items: center; min-width: 0 }
  body.tuha-apple .topbar .navbar-custom > ul.topbar-nav.float-end > li { flex: none }
  body.tuha-apple .topbar .nav-link { padding-left: 6px; padding-right: 6px }
  /* Hộp thoại cũ đặt cứng bề rộng trong HTML (style="width: 1000px; height: 600px" ở «Sửa nhanh đơn hàng», 450px ở nhiều hộp khác) → tràn khỏi màn */
  body.tuha-apple .modal-dialog[style*="width"] { width: auto !important; max-width: calc(100vw - 16px) !important; height: auto !important; margin: 8px auto !important }
}
@media (max-width: 400px) { body.tuha-apple .topbar .tb-gon .tm-p { display: none } }
/* ≤480px: trang có thẻ «N đơn chưa xử lý» thì cụm phải vẫn dư ~10px → bỏ «Góp ý» khỏi thanh trên (vẫn còn ở trang Hướng dẫn) */
@media (max-width: 480px) { body.tuha-apple .topbar li.tb-gon:has(a[onclick*="tuhaPhanHoi"]) { display: none } }
/* Bảng của các trang cũ rộng hơn màn (Nhật ký, Mẫu in, Chi phí quảng cáo…): tuha-topbar.js bọc riêng bảng tràn vào khung cuộn ngang này */
body.tuha-apple .ta-tscroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch }
@media (max-width: 767.98px) { body.tuha-apple .page-content select.form-select { max-width: 100% } body.tuha-apple .page-content .pagination { flex-wrap: wrap; row-gap: 4px } }

/* Điện thoại hẹp: thanh trên cùng KHÔNG được xuống dòng (thẻ «N đơn chưa xử lý» + chuông + lịch + thư + ảnh + nút menu rộng hơn khung → dòng hai đè lên nội dung trang). Thẻ chỉ còn chấm + số. */
@media (max-width: 480px) {
  body.tuha-apple a.ua-pend .ua-s, body.tuha-apple a.ua-pend .ua-l { display: none !important }
  body.tuha-apple a.ua-pend { padding-left: 10px !important; padding-right: 10px !important }
  body.tuha-apple .topbar .nav-link { padding-left: 8px; padding-right: 8px }
}


/* ───── Liên kết tài khoản (chuyển nhanh sang tài khoản shop con) + «TK Gốc» ───── */
body.tuha-apple .lk-li > .nav-link { display: inline-flex; align-items: center; gap: 6px }
body.tuha-apple .lk-li .lk-ic { flex: none }
body.tuha-apple .lk-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ta-blue-bg); color: var(--ta-blue); font-size: 12px; font-weight: 700; line-height: 1 }
body.tuha-apple .lk-s { display: none }
body.tuha-apple .lk-back-in { display: none }
body.tuha-apple .lk-bk .lk-shop { color: var(--ta-blue) !important }
body.tuha-apple .lk-bk { border-bottom: .5px solid var(--ta-line); border-radius: 12px 12px 0 0 !important; margin-bottom: 8px !important }
body.tuha-apple .lk-back { color: var(--ta-blue) !important; font-weight: 600 }
body.tuha-apple .topbar .dropdown-menu.lk-menu { width: 372px; max-width: calc(100vw - 16px); max-height: min(72vh, 540px) !important; padding: 6px; overflow-y: auto }
body.tuha-apple .lk-head { padding: 8px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ta-sub) }
body.tuha-apple .lk-menu li { border: 0 }
body.tuha-apple .topbar .lk-menu .dropdown-item.lk-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 10px 12px; margin: 2px 0; border-radius: 12px; white-space: normal }
body.tuha-apple .lk-i br, body.tuha-apple .lk-i .lk-pre, body.tuha-apple .lk-i .lk-dup { display: none }
body.tuha-apple .lk-i .badge { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; font-weight: 400; text-align: left; white-space: normal }
body.tuha-apple .lk-i .lk-shop { grid-column: 1; grid-row: 1; font-size: 14px !important; font-weight: 700 !important; color: var(--ta-text) !important; line-height: 1.3; overflow-wrap: anywhere }
body.tuha-apple .lk-i .lk-sub { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0 }
body.tuha-apple .lk-i .lk-user, body.tuha-apple .lk-i .lk-name { font-size: 12.5px !important; color: var(--ta-sub) !important }
body.tuha-apple .lk-i .lk-user { font-weight: 600 !important; color: var(--ta-blue) !important }
body.tuha-apple .lk-i .lk-name:not(.lk-dup)::before { content: '· '; color: var(--ta-sub) }
body.tuha-apple .lk-i .lk-st { grid-column: 2; grid-row: 1; align-self: start; padding: 3px 9px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 600 !important; white-space: nowrap !important }
body.tuha-apple .lk-i.lk-success .lk-st { background: rgba(52, 199, 89, .16) !important; color: #1e7e34 !important }
body.tuha-apple .lk-i.lk-danger .lk-st { background: rgba(255, 59, 48, .12) !important; color: #d70015 !important }
body.tuha-apple.dark .lk-i.lk-success .lk-st { background: rgba(48, 209, 88, .2) !important; color: #30d158 !important }
body.tuha-apple.dark .lk-i.lk-danger .lk-st { background: rgba(255, 69, 58, .2) !important; color: #ff6961 !important }
body.tuha-apple .lk-i.lk-current .lk-st { background: var(--ta-blue-bg) !important; color: var(--ta-blue) !important }
body.tuha-apple .lk-i.lk-current { cursor: default; background: var(--ta-hover) }
body.tuha-apple .lk-i.lk-success:hover, body.tuha-apple .lk-i.lk-success:focus-visible { background: var(--ta-blue-bg) !important }
body.tuha-apple .lk-i.lk-danger { opacity: .6; cursor: not-allowed }
body.tuha-apple .lk-i.lk-danger:hover { background: transparent !important }
@media (max-width: 1024px) {
  body.tuha-apple .lk-li .lk-t { display: none }
  body.tuha-apple .lk-li .lk-back .lk-s { display: none }
  body.tuha-apple .lk-li .lk-back { background: var(--ta-blue-bg); border-radius: 50%; width: 34px; height: 34px; min-height: 0 !important; padding: 0 !important; align-self: center; justify-content: center }
  body.tuha-apple .lk-li > .nav-link { padding-left: 8px !important; padding-right: 8px !important; min-height: 52px; justify-content: center }
  body.tuha-apple .lk-li.dropdown { position: static }
  body.tuha-apple .lk-li.dropdown > .dropdown-menu.lk-menu.show { position: fixed !important; inset: 56px 8px auto 68px !important; transform: none !important; width: auto !important; max-width: none !important; margin: 0 !important; max-height: calc(100vh - 72px) !important }
}
@media (max-width: 560px) {
  /* điện thoại: chỉ biểu tượng, số lượng thành chấm nhỏ ở góc — thanh trên không bị xuống dòng */
  body.tuha-apple .lk-li > .nav-link { position: relative; padding-left: 6px !important; padding-right: 6px !important }
  body.tuha-apple .lk-li.lk-fold { display: none }
  body.tuha-apple .lk-back-in { display: list-item }
  body.tuha-apple .lk-li .lk-n { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px }
}

/* ───── Thông báo: popup, chuông, trang danh sách ───── */
/* nội dung do quản trị soạn (đoạn, đậm/nghiêng/gạch chân, danh sách, liên kết, trích dẫn) — dùng chung cho popup và trang thông báo */
body.tuha-apple .nf-mbody, body.tuha-apple .nf-body { font-size: 15px; line-height: 1.65; color: var(--ta-text); overflow-wrap: anywhere }
body.tuha-apple .nf-mbody p, body.tuha-apple .nf-mbody li, body.tuha-apple .nf-mbody ul, body.tuha-apple .nf-mbody ol, body.tuha-apple .nf-body p, body.tuha-apple .nf-body li, body.tuha-apple .nf-body ul, body.tuha-apple .nf-body ol { font-size: inherit; line-height: inherit; color: inherit }
body.tuha-apple .nf-mbody p, body.tuha-apple .nf-body p { margin: 0 0 .75em }
body.tuha-apple .nf-mbody p:last-child, body.tuha-apple .nf-body p:last-child { margin-bottom: 0 }
body.tuha-apple .nf-mbody ul, body.tuha-apple .nf-mbody ol, body.tuha-apple .nf-body ul, body.tuha-apple .nf-body ol { margin: 0 0 .75em; padding-left: 1.4em }
body.tuha-apple .nf-mbody li, body.tuha-apple .nf-body li { margin: .15em 0 }
body.tuha-apple .nf-mbody h3, body.tuha-apple .nf-body h3 { font-size: 17px; font-weight: 700; margin: 1em 0 .4em }
body.tuha-apple .nf-mbody h4, body.tuha-apple .nf-body h4 { font-size: 15.5px; font-weight: 700; margin: .9em 0 .35em }
body.tuha-apple .nf-mbody blockquote, body.tuha-apple .nf-body blockquote { margin: 0 0 .75em; padding: 6px 14px; border-left: 3px solid var(--ta-blue); background: var(--ta-blue-bg); border-radius: 0 10px 10px 0; color: var(--ta-text) }
body.tuha-apple .nf-mbody hr, body.tuha-apple .nf-body hr { border: 0; border-top: .5px solid var(--ta-line); margin: 1em 0 }
body.tuha-apple .nf-mbody a, body.tuha-apple .nf-body a { color: var(--ta-blue) !important; text-decoration: underline; text-underline-offset: 2px; word-break: break-all }
body.tuha-apple .nf-body { margin-top: 6px !important }
/* ảnh / bảng / khung nhúng trong nội dung thông báo: không bao giờ rộng hơn khung chứa */
body.tuha-apple .nf-mbody img, body.tuha-apple .nf-body img, body.tuha-apple .nf-mbody video, body.tuha-apple .nf-body video { max-width: 100% !important; height: auto !important; border-radius: 10px }
body.tuha-apple .nf-mbody iframe, body.tuha-apple .nf-body iframe { max-width: 100%; border: 0; border-radius: 10px }
body.tuha-apple .nf-mbody table, body.tuha-apple .nf-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 .75em; -webkit-overflow-scrolling: touch }
body.tuha-apple .nf-mbody th, body.tuha-apple .nf-mbody td, body.tuha-apple .nf-body th, body.tuha-apple .nf-body td { padding: 6px 10px; border: .5px solid var(--ta-line); font-size: 14px }
body.tuha-apple .nf-mbody pre, body.tuha-apple .nf-body pre { max-width: 100%; overflow-x: auto; padding: 10px 12px; border-radius: 10px; background: var(--ta-hover); font-size: 13px }
/* popup */
body.tuha-apple #notificationModal .modal-dialog { max-width: 560px; margin: 1.5rem auto }
body.tuha-apple #notificationModal .modal-content { background: var(--ta-card); color: var(--ta-text); border: .5px solid var(--ta-line); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); overflow: hidden; font-family: var(--ta-font) }
body.tuha-apple #notificationModal .modal-header.nf-mh { display: flex; align-items: center; gap: 12px; padding: 20px 20px 8px; background: transparent !important; border: 0; color: var(--ta-text) }
body.tuha-apple #notificationModal .nf-mi { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--ta-blue-bg); color: var(--ta-blue) }
body.tuha-apple #notificationModal .modal-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ta-text) }
body.tuha-apple #notificationModal .btn-close { flex: none; width: 32px; height: 32px; padding: 0; margin: 0; border-radius: 50%; background-color: var(--ta-hover); background-size: 12px; opacity: 1; filter: none }
body.tuha-apple.dark #notificationModal .btn-close { filter: invert(1) grayscale(1) brightness(1.6) }
body.tuha-apple #notificationModal .modal-body.nf-mbody { padding: 8px 24px 8px; max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch }
body.tuha-apple #notificationModal .modal-body br[clear] { display: none }
body.tuha-apple #notificationModal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 20px 18px; border: 0 }
body.tuha-apple #notificationModal .modal-footer > div { float: none !important; margin: 0 }
body.tuha-apple #notificationModal .modal-footer .pull-left { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ta-sub) }
body.tuha-apple #notificationModal .modal-footer .pull-left input { width: 18px; height: 18px; margin: 0; accent-color: var(--ta-blue); cursor: pointer }
body.tuha-apple #notificationModal .modal-footer .pull-left label { margin: 0; cursor: pointer; padding: 8px 0 }
body.tuha-apple #notificationModal .nf-close { min-height: 42px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--ta-blue-fill, var(--ta-blue)) !important; color: #fff !important; font-size: 15px; font-weight: 600 }
@media (max-width: 640px) {
  body.tuha-apple #notificationModal .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; width: 100%; transform: translateY(40px) }
  body.tuha-apple #notificationModal.show .modal-dialog { transform: none }
  body.tuha-apple #notificationModal .modal-content { border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom) }
  body.tuha-apple #notificationModal .modal-header.nf-mh { padding: 16px 16px 6px }
  body.tuha-apple #notificationModal .modal-body.nf-mbody { padding: 6px 18px; max-height: 56vh }
  body.tuha-apple #notificationModal .modal-footer { flex-direction: column-reverse; align-items: stretch; padding: 10px 16px 16px }
  body.tuha-apple #notificationModal .modal-footer .pull-left { justify-content: center; min-height: 44px }
  body.tuha-apple #notificationModal .nf-close { width: 100%; min-height: 46px }
}
/* chuông: đoạn trích chữ thuần, tối đa 3 dòng; chấm xanh cho thông báo chưa đọc */
body.tuha-apple .notification-menu .dropdown-item.nf-bell { white-space: normal }
body.tuha-apple .notification-menu .nf-bell .media-body { white-space: normal !important; overflow: visible !important; min-width: 0 }
body.tuha-apple .notification-menu .nf-bell h6 { white-space: normal; font-size: 13.5px; font-weight: 600 !important; line-height: 1.35; overflow-wrap: anywhere }
body.tuha-apple .notification-menu .nf-bell .nf-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ta-sub) !important }
body.tuha-apple .notification-menu .dropdown-item.nf-bell { display: flex; flex-direction: column; padding: 12px 14px 12px 20px !important; border-bottom: .5px solid var(--ta-line) }
body.tuha-apple .notification-menu .nf-bell > .media { order: 1; width: 100% }
body.tuha-apple .notification-menu .nf-bell > small.float-end { order: 2; float: none !important; padding: 4px 0 0 52px !important; font-size: 11.5px; color: var(--ta-sub) !important }
body.tuha-apple .topbar .notification-list:not([class*="ua-expli"]) > .dropdown-menu:has(.nf-bell) { width: 360px; max-width: calc(100vw - 16px) }
body.tuha-apple .notification-menu:has(.nf-bell) { max-height: min(60vh, 440px) !important }
body.tuha-apple .notification-menu:has(.nf-bell) { overflow-y: auto; -webkit-overflow-scrolling: touch }
body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-wrapper { height: auto !important }
body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-mask, body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-offset, body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-content-wrapper { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important }
body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-placeholder, body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-track, body.tuha-apple .notification-menu:has(.nf-bell) .simplebar-height-auto-observer-wrapper { display: none !important }
body.tuha-apple .notification-menu .dropdown-item.noti-active { position: relative }
body.tuha-apple .notification-menu .dropdown-item.noti-active::before { content: ''; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--ta-blue) }
/* trang «Thông báo» */
body.tuha-apple .activity-info-text .nf-body { color: var(--ta-text) !important }
body.tuha-apple .activity-info { padding: 16px 6px; border-bottom: .5px solid var(--ta-line) }
body.tuha-apple .activity-info:last-child { border-bottom: 0 }
body.tuha-apple .activity-info-text h6 { font-size: 15px; font-weight: 700; color: var(--ta-text); line-height: 1.35 }
body.tuha-apple .activity-info-text > .d-flex > .text-muted { font-size: 12px; white-space: nowrap; color: var(--ta-sub) !important }
body.tuha-apple .activity-info-text > .d-flex > h6 { width: auto !important; flex: 1; min-width: 0; padding-right: 12px }
body.tuha-apple.modal-open .tuha-vt { display: none !important }