/* =============================================================================
 * SBAY Responsive Overlay — 2026-05-03
 * -----------------------------------------------------------------------------
 * Mục tiêu: làm các page PC (Bootstrap 3 + AdminLTE) render OK trên phone <768px
 * mà KHÔNG phá desktop / tablet hiện tại.
 *
 * Module isolated: file mới, KHÔNG sửa file PC nào ngoài 1 dòng <link> trong
 * header-base-v1.php. Load SAU sbay-ui-fixes.css để override khi cần.
 *
 * Root cause được xử lý (audit 2026-05-03):
 *   #1 Grid thiếu col-xs-* → ép col-md-*/col-sm-* stack 100% trên phone
 *   #2 Tables không bọc .table-responsive → ép display:block; overflow-x:auto
 *   #3 white-space:nowrap ép ở mọi viewport (header-base-css.php:182,265,430)
 *      → undo trên phone
 *   #6 menu.php navbar không có collapse → CSS-only stack vertical trên phone
 *   #7 Inline width:NNNpx (250/500/520/300/160/140) → override max-width:100%
 *
 * KHÔNG xử lý (giữ nguyên design hiện tại):
 *   #4 sbay-ui-fixes.css:864 — đây là pattern overlay sidebar AdminLTE, KHÔNG bug
 *   #5 specificity bombs body{color!important} — sửa = phá theme desktop
 *   #8 legacy <table width=...> trong email templates — không liên quan UX phone
 * ============================================================================= */


/* ============================================================================
 * 1) MOBILE PHONES (max-width: 767px)
 * ============================================================================ */
@media (max-width: 767px) {

  /* 1.1 — GRID STACKING
   * Toàn site dùng col-md-* / col-sm-* không có col-xs-*.
   * BS3 không stack col-md-* dưới 992px → phone thấy chen chúc.
   * Ép stack qua width:100% + clear float. Loại trừ navbar/sidebar cols. */
  .content-wrapper .row > [class*="col-md-"]:not(.no-mobile-stack),
  .content-wrapper .row > [class*="col-sm-"]:not(.no-mobile-stack),
  .content .row > [class*="col-md-"]:not(.no-mobile-stack),
  .content .row > [class*="col-sm-"]:not(.no-mobile-stack),
  .container .row > [class*="col-md-"]:not(.no-mobile-stack),
  .container .row > [class*="col-sm-"]:not(.no-mobile-stack) {
    width: 100% !important;
    float: none !important;
    margin-left: 0;
    margin-right: 0;
  }

  /* 1.2 — DISABLED 2026-05-03 — ép display:block đẩy nút "Xuất vé" cuối hàng
     ra ngoài viewport, user phải scroll table riêng → khó tìm.
     Để tables tràn tự nhiên — page horizontal scroll vẫn reach được button.
     Cần wrap responsive sẽ làm sau bằng class opt-in (.table-mobile-scroll). */
  /* DISABLED rule kept here for reference:
  .content-wrapper table:not(.dataTable):not([role="presentation"]),
  .content table:not(.dataTable):not([role="presentation"]),
  .box-body > table:not(.dataTable),
  .panel-body > table:not(.dataTable),
  .danh-sach-nap-quy > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
  } */

  /* 1.3 — UNDO white-space:nowrap
   * header-base-css.php:182 (.display-one-row), :265 (.table-white-space),
   * :430 (.danh-sach-nap-quy td trong @media max-width:767px CỐ Ý ép nowrap)
   * → cell wrap cho phép xuống dòng, table không tràn. */
  .table-white-space th,
  .table-white-space td,
  .danh-sach-nap-quy th,
  .danh-sach-nap-quy td,
  .display-one-row {
    white-space: normal !important;
  }

  /* 1.4 — INPUTS / SELECTS WIDTH
   * Override inline style="width:NNNpx" trên các form fields.
   * Áp riêng .content area (tránh đụng modal/popup/utility). */
  .content input[type="text"],
  .content input[type="password"],
  .content input[type="number"],
  .content input[type="email"],
  .content input[type="tel"],
  .content input[type="date"],
  .content input[type="search"],
  .content input:not([type]),
  .content textarea,
  .content select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Specific override: inputs/selects với inline width 140-250px
   * (bao-luu/chon-ghe/doi-ten/huy-ve/tach-hk/web-checkin pattern + dat-cho filter) */
  .content input[style*="width:160px"],
  .content input[style*="width:140px"],
  .content input[style*="width:250px"],
  .content input[style*="width:100px"],
  .content select[style*="width:160px"],
  .content select[style*="width:140px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Hidden fields có style="width:140px;display:none" — giữ display:none */
  .content input[style*="display:none"][style*="width:140px"] {
    width: 0 !important;
  }

  /* 1.5 — FLEX ROWS
   * Pattern bao-luu/chon-ghe/...: <div style="display:flex"> chứa
   * select 160px + input 140px chen ngang. Force wrap. */
  .content [style*="display:flex"],
  .content [style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: 6px;
  }

  /* 1.6 — SPECIFIC FIXED-WIDTH ELEMENTS (audit findings) */
  /* admin-checkin-scan.php:79 QR reader 500px */
  #reader,
  div[id="reader"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* xuat-ve-noi-dia-v1.php:233 alert max-width:520px */
  .alert[style*="max-width: 520px"],
  .alert[style*="max-width:520px"] {
    max-width: 100% !important;
    display: block !important;
  }
  /* profile-v1.php:85 QR image width:300px + bất kỳ vietqr image */
  img[src*="img.vietqr.io"],
  .content img[style*="width: 300px"],
  .content img[style*="width:300px"] {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 1.7 — MENU.PHP NAVBAR (CSS-only fix, không sửa HTML)
   * Navbar không có .navbar-toggle/.navbar-collapse → UL luôn hiện wrap loạn.
   * Force stack vertical trên phone, dropdown sub-menu inline. */
  .row-menu-page .navbar-default {
    border-radius: 0;
    margin-bottom: 8px;
    min-height: auto;
  }
  .row-menu-page .navbar-default .container-fluid > .navbar-header {
    float: none !important;
    width: 100%;
  }
  .row-menu-page .navbar-default .navbar-brand {
    padding: 12px 16px;
    height: auto;
    display: block;
    text-align: center;
  }
  .row-menu-page .navbar-default .nav.navbar-nav,
  .row-menu-page .navbar-default .nav.navbar-nav.navbar-left,
  .row-menu-page .navbar-default .nav.navbar-nav.navbar-right {
    float: none !important;
    margin: 0;
    display: block;
  }
  .row-menu-page .navbar-default .navbar-nav > li {
    float: none !important;
    display: block;
    border-bottom: 1px solid #e5e7eb;
  }
  .row-menu-page .navbar-default .navbar-nav > li > a {
    padding: 11px 16px;
    line-height: 1.4;
  }
  /* Sub-menu (dropdown) — display inline, indent */
  .row-menu-page .navbar-default .navbar-nav > li > ul {
    position: static !important;
    float: none !important;
    display: block;
    box-shadow: none;
    background: #f8fafc;
    border: 0;
    padding: 4px 0 4px 16px;
    margin: 0;
    list-style: none;
  }
  .row-menu-page .navbar-default .navbar-nav > li > ul li {
    list-style: none;
  }
  .row-menu-page .navbar-default .navbar-nav > li > ul li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
  }
  /* Hide button "Menu" cũ trong menu.php (.nut-menu-mobile) — handler đã chết
   * vì header-base.php redirect ngay line 2. Không cần button vì đã stack tự nhiên. */
  .row-menu-page .nut-menu-mobile { display: none !important; }

  /* 1.8 — TOUCH TARGETS (≥40px)
   * Buttons/inputs đủ lớn để tap chính xác trên phone */
  .content .btn:not(.btn-xs):not(.btn-sm),
  .content-header .btn:not(.btn-xs):not(.btn-sm) {
    min-height: 38px;
    line-height: 1.4;
  }
  .content .form-control {
    min-height: 38px;
  }

  /* 1.9 — PAGINATION wrap không tràn */
  .pagination {
    float: none !important;
    text-align: center;
  }
  .pagination > li {
    display: inline-block;
    float: none;
  }
  .box-footer .pagination,
  .panel-footer .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }

  /* 1.10 — BOX HEADER pull-right stack
   * Buttons "Thêm/Xuất/Lọc" pull-right tràn ra ngoài box trên phone */
  .box-header > .pull-right,
  .box-header > .box-tools.pull-right,
  .panel-heading > .pull-right {
    float: none !important;
    margin-top: 8px;
    display: block;
  }

  /* 1.11 — CONTENT PADDING giảm cho phone (tăng diện tích usable) */
  .content-wrapper > .content,
  .wrapper > .content-wrapper > .content {
    padding: 8px 10px;
  }
  .content-header {
    padding: 8px 12px 0;
  }
  .content-header > h1 {
    font-size: 22px;
    margin: 0;
  }

  /* 1.12 — BREADCRUMB form inline (header-base-v1.php:388)
   * Ô tìm kiếm "Tìm kiếm TK" tràn ngang trên phone */
  .breadcrumb {
    padding: 6px 12px;
    margin-bottom: 8px;
  }
  .breadcrumb .form-inline {
    display: block;
    margin-top: 6px;
  }
  .breadcrumb .form-inline .form-control,
  .breadcrumb .form-inline input[type="text"] {
    width: 100% !important;
    margin: 0 0 4px 0;
    display: block;
  }
  .breadcrumb .form-inline .btn {
    width: 100%;
    margin: 0;
  }

  /* 1.13 — DROPDOWN MENU user (header-base-v1.php:263) — table .table-thong-ke-bao-cao
   * Dropdown user có table 8 dòng, trên phone không tràn quá viewport */
  .navbar-custom-menu .dropdown-menu {
    max-width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: auto !important;
  }
  .navbar-custom-menu .dropdown-menu .table-thong-ke-bao-cao {
    width: 100% !important;
  }
  .navbar-custom-menu .dropdown-menu .table-thong-ke-bao-cao td {
    padding: 6px 4px;
    white-space: normal !important;
    font-size: 12px;
  }

  /* 1.14 — SECTION-NOTIFICATION alert ép nowrap (header-base-v1.php:343 h4)
   * <h4 style="white-space:nowrap"> alert tài khoản hết hạn — ép tràn */
  .section-notification h4[style*="white-space:nowrap"],
  .section-notification h4[style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* 1.15 — IFRAMES & EMBEDS responsive */
  .content iframe:not([class*="embed-responsive"]) {
    max-width: 100% !important;
  }
  .embed-responsive {
    max-width: 100%;
  }
}


/* ============================================================================
 * 2) SMALL TABLET / LARGE PHONE (max-width: 991px) — chỉ rules nhẹ
 * ============================================================================ */
@media (max-width: 991px) {
  /* Box header h3 không ép one-line bị cut */
  .box-header > .box-title {
    white-space: normal;
  }
}


/* ============================================================================
 * 3) SAFETY — IMG fluid (đã có ở sbay-ui-fixes.css:896 nhưng đảm bảo cascade)
 * ============================================================================ */
.content img,
.content-wrapper img:not(.logo-mini):not(.logo-lg) {
  max-width: 100%;
  height: auto;
}


/* ============================================================================
 * 4) UX ENHANCE — "DỄ DÙNG" (max-width: 767px) — bổ sung 2026-05-03
 *    Mục tiêu: tap chính xác, không zoom khi focus, sidebar dễ mở/đóng,
 *              modal/dropdown vừa màn hình, scroll mượt.
 * ============================================================================ */
@media (max-width: 767px) {

  /* 4.1 — iOS ZOOM PREVENTION
   * Safari iOS auto-zoom khi input focus nếu font-size <16px → ép ≥16px.
   * Tiêu chuẩn Apple HIG. */
  .content input[type="text"],
  .content input[type="password"],
  .content input[type="number"],
  .content input[type="email"],
  .content input[type="tel"],
  .content input[type="date"],
  .content input[type="search"],
  .content input:not([type]),
  .content textarea,
  .content select,
  .form-control {
    font-size: 16px !important;
  }

  /* 4.2 — TOUCH TARGETS LỚN HƠN (≥44px Apple HIG / Google Material)
   * Override 1.8 (38px) lên 44px cho buttons + form controls + nav links */
  .content .btn:not(.btn-xs):not(.btn-sm),
  .content-header .btn:not(.btn-xs):not(.btn-sm),
  .navbar .btn:not(.btn-xs):not(.btn-sm),
  .main-header .btn:not(.btn-xs):not(.btn-sm),
  .form-actions .btn,
  .modal-footer .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .content .form-control,
  .content input.form-control,
  .content select.form-control {
    min-height: 44px;
  }
  /* Nav links trong AdminLTE sidebar + menu.php */
  .main-sidebar .sidebar-menu > li > a,
  .row-menu-page .navbar-default .navbar-nav > li > a {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* 4.3 — STICKY HEADER trên phone (luôn thấy nav khi scroll)
   * AdminLTE main-header mặc định static — pin lên top trên mobile.
   * Scroll dài (table dài, list dài) vẫn truy cập nav nhanh. */
  .wrapper > .main-header {
    position: sticky;
    top: 0;
    z-index: 1030;
  }

  /* 4.4 — SIDEBAR DỄ MỞ + BACKDROP DỄ ĐÓNG
   * AdminLTE: sidebar slide-in qua class body.sidebar-open.
   * Thêm backdrop tự động khi sidebar open — tap ngoài đóng. */
  body.sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1049;
    -webkit-tap-highlight-color: transparent;
  }
  body.sidebar-open .main-sidebar {
    box-shadow: 2px 0 18px rgba(0, 0, 0, .25);
  }
  /* Hamburger toggle (sidebar-toggle) tap-target ≥48px — KHÔNG override display
     để không ảnh hưởng AdminLTE :before icon hamburger. */
  .main-header .sidebar-toggle {
    min-width: 48px;
    min-height: 48px;
    box-sizing: border-box;
  }

  /* 4.5 — MODAL FULL-SCREEN trên phone (dễ đọc / dễ tương tác)
   * BS3 modal mặc định còn margin trên phone. Ép full-width. */
  .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
  }
  .modal-content {
    border-radius: 0 !important;
    border: 0;
    min-height: 100vh;
  }
  .modal-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    border-bottom: 1px solid #e5e7eb;
  }
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
    border-top: 1px solid #e5e7eb;
  }
  .modal-footer .btn {
    flex: 1;
    margin: 0 4px;
  }
  .modal-footer {
    display: flex;
  }

  /* 4.6 — DROPDOWN MENU vừa màn hình (không tràn / cuộn được)
   * BS3 dropdown mặc định fixed width 160px → trên phone có thể tràn. */
  .dropdown-menu {
    max-width: calc(100vw - 16px) !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4.7 — FORM SPACING dễ tap (tránh tap nhầm field cạnh nhau)
   * BS3 form-group mặc định margin-bottom:15px → tăng lên 18px trên phone. */
  .content .form-group {
    margin-bottom: 18px;
  }
  .content .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
  }
  /* Checkbox/radio size + spacing dễ tap */
  .content input[type="checkbox"],
  .content input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }
  .content .checkbox label,
  .content .radio label {
    padding-left: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    line-height: 1.5;
  }

  /* 4.8 — PRIMARY ACTION FULL-WIDTH (CTA chính) trên phone
   * Submit/login/save buttons full-width dễ tap chính xác.
   * Áp cho .btn-block + .btn primary trong form-actions. */
  .content form .btn-primary:only-child,
  .content form .btn-success:only-child,
  .content form .btn-danger:only-child,
  .content .form-actions .btn,
  .content .modal-footer .btn-primary {
    width: 100%;
  }
  /* btn-block đã có sẵn — đảm bảo full-width */
  .content .btn-block {
    width: 100% !important;
    display: block;
  }

  /* 4.9 — SCROLL MƯỢT trên iOS Safari (momentum scroll) */
  body,
  .content-wrapper,
  .modal-body,
  .dropdown-menu {
    -webkit-overflow-scrolling: touch;
  }

  /* 4.10 — DATEPICKER dùng native trên phone (dễ chọn ngày hơn jQuery UI)
   * Force input[type=date] hiện native picker (đè CSS plugins/datepicker3.css) */
  .content input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 8px;
  }
  .content input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
  }

  /* 4.11 — TABLES NHỎ NỘI DUNG (dễ đọc)
   * Khi table scroll-x trên phone, thu padding cell + font-size để đọc hơn.
   * Áp riêng .table (BS3) tránh đụng table layout email. */
  .content .table > thead > tr > th,
  .content .table > tbody > tr > td,
  .content .table > tfoot > tr > td {
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.4;
  }
  /* Header sticky khi scroll-x table */
  .content .table > thead > tr > th {
    background: #f8fafc;
    position: sticky;
    top: 0;
  }

  /* 4.12 — ALERT/NOTIFICATION POSITION
   * Section-notification (header-base-v1.php:340) padding gọn, dễ đọc. */
  .section-notification {
    padding: 0 8px;
    margin-bottom: 8px;
  }
  .section-notification .alert {
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 14px;
  }
  .section-notification .alert h4 {
    font-size: 15px;
    margin: 0 0 4px;
  }
  .section-notification .alert .close {
    padding: 8px;
    font-size: 18px;
    line-height: 1;
  }

  /* 4.13 — LOADING SPINNER full-screen trên phone (dễ thấy)
   * sbay-ui-fixes.js có thể tạo overlay — đảm bảo z-index đúng. */
  .sbay-loading-overlay,
  #sbay-loading,
  .loadersmall {
    z-index: 9998;
  }

  /* 4.14 — TEXTAREA cao hơn dễ nhập
   * Mặc định BS3 textarea height ~34px = 1 dòng. Trên phone ép min 80px. */
  .content textarea.form-control,
  .content textarea {
    min-height: 80px;
    resize: vertical;
  }

  /* 4.15 — LINK MÀU PHÂN BIỆT (a11y) — đảm bảo link đủ contrast trên phone */
  .content a:not(.btn):not(.label):not(.dropdown-toggle):not(.navbar-brand) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .content a:not(.btn):not(.label):not(.dropdown-toggle):not(.navbar-brand):hover,
  .content a:not(.btn):not(.label):not(.dropdown-toggle):not(.navbar-brand):focus {
    text-decoration: none;
  }

  /* 4.16 — BREADCRUMB NHỎ GỌN (header-base-v1.php:384)
   * "Trang chủ" + form tìm kiếm chiếm chiều cao. Gom 1 dòng nhỏ. */
  .breadcrumb {
    background: transparent;
    font-size: 13px;
  }
  .breadcrumb > li {
    display: inline-block;
  }

  /* 4.17 — FOOTER spacing trên phone */
  .main-footer {
    padding: 12px;
    text-align: center;
    font-size: 12px;
  }
}


/* ============================================================================
 * 5) UX ENHANCE PORTRAIT NHỎ (max-width: 480px) — phone hẹp
 * ============================================================================ */
@media (max-width: 480px) {

  /* 5.1 — REMOVED 2026-05-03 — gây mất label text trên buttons (báo cáo: mất nút "Xuất vé").
     Giữ icon-only optimization sẽ làm sau với data-attribute opt-in. */

  /* 5.2 — Section-content-header h1 nhỏ hơn */
  .content-header > h1 {
    font-size: 18px;
  }
  .content-header > h1 small {
    display: block;
    font-size: 12px;
    margin-top: 2px;
  }

  /* 5.3 — Modal title clip + ellipsis */
  .modal-header .modal-title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 80px);
  }

  /* 5.4 — Pagination chỉ giữ Prev/Next + Số hiện tại */
  .pagination > li:not(:first-child):not(:last-child):not(.active):not(.active + li):not(.active ~ li:nth-of-type(-n+2)) {
    /* Không hide các li khác — giữ default. CSS selector này phức tạp,
       BS3 paginate đã wrap-friendly đủ. */
  }

  /* 5.5 — Logo brand chỉ giữ icon (logo-mini), ẩn logo-lg */
  .main-header .logo .logo-lg {
    font-size: 16px;
  }
}


/* ============================================================================
 * 6) PRO POLISH — siêu đẹp, siêu chuyên nghiệp (max-width: 767px) — 2026-05-07
 *    Mục tiêu:
 *      - Min font-size 16px cho mọi text đọc được (override các rule cũ <16px)
 *      - Rhythm khoảng trống đồng nhất (scale 8/12/16/20)
 *      - Card/box mềm mại (radius 12px, shadow nhẹ, divider thay border đậm)
 *      - Tabular numerals cho số tiền — đảm bảo cột tiền KHÔNG truncate / lệch
 *      - Safe-area-inset cho iPhone notch / Android gesture bar
 *      - Focus state rõ (a11y)
 *      - Transition mượt cho sidebar / modal / dropdown
 *
 *    Tuyệt đối KHÔNG: ẩn / cắt / làm tròn số tiền. Mọi value `number_format(...)`
 *    trong PHP phải hiển thị nguyên vẹn — nếu hẹp thì wrap xuống dòng, không clip.
 * ============================================================================ */
@media (max-width: 767px) {

  /* 6.1 — TYPOGRAPHY BASE — min 16px tất cả text đọc được trong content */
  .content,
  .content p,
  .content li,
  .content td,
  .content th,
  .content label,
  .content .help-block,
  .content .text-muted,
  .content small,
  .content .small,
  .content .label,
  .content .badge,
  .breadcrumb,
  .breadcrumb > li,
  .breadcrumb > li > a,
  .main-footer,
  .section-notification .alert,
  .section-notification .alert h4,
  .navbar-custom-menu .dropdown-menu .table-thong-ke-bao-cao td {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  /* Section-notification phụ tiêu đề có thể to hơn body */
  .section-notification .alert h4 {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
  /* Footer phụ — vẫn 16px nhưng line-height gọn */
  .main-footer { line-height: 1.45 !important; }
  /* Badge / label small — vẫn 14px chấp nhận được vì là nhãn ngắn 1-2 từ */
  .content .label,
  .content .badge {
    font-size: 14px !important;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
  }

  /* 6.2 — TABLE BODY READABILITY (override 4.11 13px → 16px)
   * Số tiền ở các bảng phải đọc được, KHÔNG bao giờ truncate. */
  .content .table > thead > tr > th,
  .content .table > tbody > tr > td,
  .content .table > tfoot > tr > td {
    padding: 12px 10px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .content .table > thead > tr > th {
    font-weight: 700;
    background: #f1f5f9;
    color: #0f172a;
    border-bottom: 1px solid #cbd5e1;
  }
  .content .table > tbody > tr > td {
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    vertical-align: middle;
  }
  .content .table > tbody > tr:hover > td {
    background: #f8fafc;
  }

  /* 6.3 — TABULAR NUMERALS cho cột số tiền (cấm sai lệch tiền: số phải đều cột)
   * Áp cho mọi <td>/<span> chứa class money / số / value. Cũng áp cho mọi
   * cell có data-* hint số. Selector rộng hơn .text-right vì pattern site có
   * dùng .text-right cho số tiền. */
  .content .table .text-right,
  .content .table td.number,
  .content .table td.money,
  .content .table td.amount,
  .content .table td.tien,
  .content .table td.tongtien,
  .content .table td[align="right"],
  .content .money,
  .content .amount,
  .content .tongtien,
  .content .so-tien,
  .content .danh-sach-nap-quy td,
  .navbar-custom-menu .dropdown-menu .table-thong-ke-bao-cao td:last-child {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    white-space: nowrap;
    text-overflow: clip;       /* không bao giờ truncate số tiền */
    overflow: visible;
  }
  /* Khi td số quá dài, cho wrap xuống dòng KHÔNG clip — money phải đầy đủ */
  .content .table td.money,
  .content .table td.amount,
  .content .table td.tien {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* User account total ở header — đảm bảo số dư hiển thị đầy đủ */
  .navbar-custom-menu .user-menu .hidden-xs,
  .navbar-custom-menu .dropdown-toggle {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* 6.4 — BOX / PANEL — mềm mại + nâng cấp (AdminLTE & BS3 panel)
   * Radius 12px, shadow nhẹ thay viền cứng, header gọn gàng */
  .content .box,
  .content .panel {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
    overflow: hidden;
    margin-bottom: 16px;
  }
  .content .box-header,
  .content .panel-heading {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
  }
  .content .box-header > .box-title,
  .content .panel-heading > .panel-title,
  .content .box-header > h3,
  .content .panel-heading > h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
  }
  .content .box-body,
  .content .panel-body {
    padding: 14px 16px !important;
  }
  .content .box-footer,
  .content .panel-footer {
    padding: 12px 16px !important;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
  }
  /* Box variants giữ accent-color ở border-top mảnh thay vì full background */
  .content .box.box-primary { border-top: 3px solid #3b82f6 !important; }
  .content .box.box-success { border-top: 3px solid #16a34a !important; }
  .content .box.box-warning { border-top: 3px solid #f59e0b !important; }
  .content .box.box-danger  { border-top: 3px solid #dc2626 !important; }
  .content .box.box-info    { border-top: 3px solid #0ea5e9 !important; }

  /* 6.5 — BUTTONS đẹp + nhất quán touch */
  .content .btn {
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  }
  .content .btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 rgba(0,0,0,0);
  }
  .content .btn-primary { background: #2563eb; border-color: #2563eb; }
  .content .btn-success { background: #16a34a; border-color: #16a34a; }
  .content .btn-danger  { background: #dc2626; border-color: #dc2626; }
  .content .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #1e293b; }
  .content .btn-default {
    background: #fff;
    border-color: #cbd5e1;
    color: #0f172a;
  }
  .content .btn-xs, .content .btn-sm {
    border-radius: 8px !important;
    font-size: 14px !important;
    min-height: 34px;
  }

  /* 6.6 — FORM CONTROLS — nâng cấp focus + spacing */
  .content .form-control {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1;
    padding: 10px 12px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .content .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    outline: none;
  }
  .content .form-group { margin-bottom: 16px; }
  .content .form-group label {
    font-size: 16px !important;
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .content .input-group-addon {
    border-radius: 10px;
    background: #f1f5f9;
    border-color: #cbd5e1;
    font-size: 16px;
  }

  /* 6.7 — ALERTS — softer */
  .content .alert,
  .section-notification .alert {
    border-radius: 12px !important;
    border: 1px solid transparent;
    padding: 14px 16px;
    font-size: 16px !important;
    line-height: 1.5;
  }
  .content .alert-success, .section-notification .alert-success { background: #ecfdf5; color: #14532d; border-color: #bbf7d0; }
  .content .alert-info,    .section-notification .alert-info    { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; }
  .content .alert-warning, .section-notification .alert-warning { background: #fffbeb; color: #78350f; border-color: #fde68a; }
  .content .alert-danger,  .section-notification .alert-danger  { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; }

  /* 6.8 — RHYTHM khoảng trống đồng nhất (scale 8 / 12 / 16 / 20) */
  .content-wrapper > .content,
  .wrapper > .content-wrapper > .content {
    padding: 12px 12px 24px 12px;
  }
  .content-header { padding: 12px 12px 4px; }
  .content-header > h1 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
  }
  .content > .row,
  .content-wrapper > .content > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .content > .row > [class*="col-"],
  .content-wrapper > .content > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* 6.9 — SIDEBAR transition mượt (đã có sticky ở 4.3, thêm slide smooth) */
  .main-sidebar {
    transition: transform .25s ease, box-shadow .25s ease;
  }
  body.sidebar-open::before { animation: sbayBackdropFade .25s ease; }
  @keyframes sbayBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* 6.10 — SAFE-AREA cho iPhone notch / Android gesture bar */
  body { padding-bottom: env(safe-area-inset-bottom); }
  .main-header,
  .row-menu-page .navbar-default {
    padding-top: env(safe-area-inset-top);
  }
  .main-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* 6.11 — FOCUS RING nhất quán (a11y) cho mọi tap target */
  .content a:focus-visible,
  .content .btn:focus-visible,
  .content .form-control:focus-visible,
  .main-header .sidebar-toggle:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* 6.12 — STICKY ACTION BAR (form submit cuối trang) — opt-in qua .form-actions
   * Form dài, button submit dán đáy luôn truy cập được */
  .content .form-actions.sticky-bottom,
  .content .form-actions[data-sticky="bottom"] {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    margin: 16px -12px 0;
    border-top: 1px solid #e2e8f0;
    z-index: 5;
  }

  /* 6.13 — DIVIDERS thay viền cứng — dùng giữa các nhóm trong list */
  .content .list-group-item {
    padding: 14px 12px;
    font-size: 16px !important;
    border-color: #e2e8f0;
  }
  .content .list-group-item:first-child,
  .content .list-group-item:last-child { border-radius: 12px; }

  /* 6.14 — DROPDOWN polish (override 1.13 12px → 16px) */
  .navbar-custom-menu .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .12);
    padding: 6px;
    margin-top: 6px;
  }
  .navbar-custom-menu .dropdown-menu > li > a {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 16px;
  }
  .navbar-custom-menu .dropdown-menu > li > a:hover,
  .navbar-custom-menu .dropdown-menu > li > a:focus {
    background: #f1f5f9;
  }
  /* Override 1.13 — dropdown table cell font 12px → 16px */
  .navbar-custom-menu .dropdown-menu .table-thong-ke-bao-cao td {
    padding: 8px 6px !important;
    font-size: 16px !important;
  }

  /* 6.15 — IMAGES với rounded + shadow nhẹ trong content */
  .content .box-body img:not(.img-circle):not(.no-radius),
  .content .panel-body img:not(.img-circle):not(.no-radius) {
    border-radius: 8px;
  }

  /* 6.16 — MENU.PHP polish (theo 1.7 đã stack) */
  .row-menu-page .navbar-default {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
  }
  .row-menu-page .navbar-default .navbar-brand {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
  }
  .row-menu-page .navbar-default .navbar-nav > li > a {
    font-size: 16px !important;
    color: #0f172a;
  }
  .row-menu-page .navbar-default .navbar-nav > li:last-child {
    border-bottom: 0;
  }
  .row-menu-page .navbar-default .navbar-nav > li > ul li a {
    font-size: 15px !important;
    color: #334155;
  }

  /* 6.17 — COLOR VARIABLES (CSS custom property) — phòng dùng sau */
  :root {
    --sbay-bg:        #f8fafc;
    --sbay-fg:        #0f172a;
    --sbay-muted:     #64748b;
    --sbay-border:    #e2e8f0;
    --sbay-divider:   #f1f5f9;
    --sbay-primary:   #2563eb;
    --sbay-success:   #16a34a;
    --sbay-warning:   #f59e0b;
    --sbay-danger:    #dc2626;
    --sbay-radius:    12px;
    --sbay-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --sbay-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  }

  /* 6.18 — BACKGROUND content layer — softer */
  .content-wrapper {
    background: #f8fafc;
  }

  /* 6.19 — TABLE-RESPONSIVE wrap đẹp */
  .content .table-responsive {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }
  .content .table-responsive > .table {
    margin-bottom: 0;
  }

  /* 6.20 — EMPTY state đẹp */
  .content .empty-state,
  .content .text-empty {
    text-align: center;
    padding: 32px 16px;
    color: #64748b;
    font-size: 16px;
  }
}


/* ============================================================================
 * 6b) PRO POLISH — refinement cho phone hẹp (max-width: 480px)
 * ============================================================================ */
@media (max-width: 480px) {
  .content .box-header,
  .content .panel-heading,
  .content .box-body,
  .content .panel-body { padding: 12px !important; }
  .content .table > thead > tr > th,
  .content .table > tbody > tr > td { padding: 10px 8px !important; }
  .content-header > h1 { font-size: 20px; }
  /* Money values trên phone hẹp vẫn đủ chỗ — không scale down */
  .content .money,
  .content .amount,
  .content .tongtien,
  .content .so-tien,
  .content .table .text-right,
  .content .table td[align="right"] {
    font-size: 16px !important;
    font-weight: 600;
  }
}

/* ============================================================== */
/* MOBILE LOGIN — Premium Travel UI                                */
/* Added: 2026-05-10                                               */
/* Scope: ONLY #login wrapper on login.php (no money fields)      */
/* Rollback: cp sbay-responsive.css.bak.20260510-001823-premobile  */
/* ============================================================== */
@media (max-width: 768px) {

  /* Reset desktop centering only when #login present */
  body:has(#login) {
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    font-family: -apple-system, "SF Pro Display", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  body:has(#login) > .container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body:has(#login) .row {
    margin: 0 !important;
  }

  body:has(#login) .col-md-3 { display: none !important; }

  body:has(#login) #login {
    width: 100% !important;
    max-width: 100% !important;
    padding: max(env(safe-area-inset-top), 24px) 20px max(env(safe-area-inset-bottom), 24px) 20px !important;
    margin: 0 !important;
    float: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Hero brand above card */
  body:has(#login) #login::before {
    content: "SBAY";
    display: block;
    text-align: center;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0,0,0,0.25);
    margin-bottom: 8px;
    font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  }
  body:has(#login) #login::after {
    content: "Hệ sinh thái du lịch số";
    display: block;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
    margin-top: -8px;
    order: -1;
  }

  /* Glass-morphism card */
  body:has(#login) #login .panel.panel-primary {
    background: rgba(255,255,255,0.98) !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.35),
                0 0 0 1px rgba(255,255,255,0.1) inset !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden !important;
    margin: 0 !important;
  }

  body:has(#login) #login .panel-heading {
    background: transparent !important;
    border: none !important;
    padding: 28px 24px 8px !important;
    text-align: center !important;
  }

  body:has(#login) #login .panel-heading h4 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.3px !important;
  }

  body:has(#login) #login .panel-body {
    padding: 8px 24px 28px !important;
    background: transparent !important;
  }

  /* Input fields — 52px touch target */
  body:has(#login) #login .form-control {
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 18px !important;
    font-size: 16px !important; /* 16px+ ngừa iOS zoom */
    border-radius: 14px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(#login) #login .form-control:focus {
    border-color: #6366f1 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12) !important;
    outline: none !important;
  }

  body:has(#login) #login .form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
  }

  /* Hide line break <br> giữa input — dùng margin thay */
  body:has(#login) #login form > br { display: none !important; }

  /* Login button block */
  body:has(#login) #login .login-button-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }

  body:has(#login) #login .login-button-main .btn {
    width: 100% !important;
    height: 52px !important;
    line-height: 1 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    border: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 0 !important;
  }

  body:has(#login) #login .login-button-main .btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -4px rgba(99,102,241,0.5) !important;
  }
  body:has(#login) #login .login-button-main .btn-primary:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px -2px rgba(99,102,241,0.4) !important;
  }

  body:has(#login) #login .login-button-main .btn-danger {
    background: #fff !important;
    color: #dc2626 !important;
    border: 2px solid #fecaca !important;
  }
  body:has(#login) #login .login-button-main .btn-danger:active {
    background: #fef2f2 !important;
  }

  body:has(#login) #login .login-button-main .btn-warning {
    background: transparent !important;
    color: #64748b !important;
    font-size: 14px !important;
    height: 40px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
  }

  /* Social login section */
  body:has(#login) #login .dang-nhap-mang-xa-hoi {
    margin-top: 22px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    text-align: center !important;
  }

  body:has(#login) #login .dang-nhap-mang-xa-hoi h5 {
    font-size: 12px !important;
    color: #64748b !important;
    margin: 0 0 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
  }

  body:has(#login) #login .dang-nhap-mang-xa-hoi .row {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  /* Support contact alerts */
  body:has(#login) #login > .alert.alert-success {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 12px 0 0 !important;
    font-size: 13px !important;
    text-align: center !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  body:has(#login) #login > .alert.alert-success a {
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  body:has(#login) #login > .alert.alert-success:nth-of-type(1)::before {
    content: "📞 ";
  }
  body:has(#login) #login > .alert.alert-success:nth-of-type(2)::before {
    content: "💬 ";
  }
}

/* Fallback for browsers without :has() — Android 4-5, old iOS */
@media (max-width: 768px) {
  body { background-attachment: fixed; }
  #login { padding: 24px 20px !important; }
  #login .form-control { height: 52px !important; font-size: 16px !important; border-radius: 14px !important; }
  #login .login-button-main .btn { width: 100% !important; height: 52px !important; border-radius: 14px !important; margin-bottom: 8px !important; }
}
/* ============================================================== */
/* END MOBILE LOGIN                                                 */
/* ============================================================== */