/* Cỡ chữ gốc toàn web (2026-10-30, anh yêu cầu): 16px -> 14px (nhỏ hơn 2px).
   Mọi cỡ chữ rem tự thu theo tỉ lệ này; các cỡ px trong file đã trừ 2px từng dòng.
   NGOẠI LỆ giữ nguyên kích thước cũ: khối ví .wallet-box (đã khóa sang px tương đương)
   và logo trên topbar (20px trong header_front.php, không đổi). */
html{font-size:14px}
/* Giao diện AdminLTE v4 + điểm nhấn riêng: sáng, có sidebar, có card nổi.
   AdminLTE lo phần khung (topbar, sidebar, footer); file này chỉ lo nội dung. */
body{font-family:Inter,Arial,Helvetica,sans-serif;color:#42424C;background:#FFFFFF}
/* Link toàn site (2026-10-29): không bao giờ gạch dưới (kể cả khi bấm/di
   chuột), không dùng màu xanh dương mặc định của link thường mà dùng indigo
   theo tông giao diện cho đẹp. */
a{color:#4F46E5;text-decoration:none}a:hover{color:#4338CA;text-decoration:none}a:focus,a:active,a:visited{text-decoration:none}
/* Dùng class Bootstrap cho nút: btn, btn-primary, btn-outline-primary...
   Không ghi đè .btn ở đây để Bootstrap giữ đúng chuẩn. */
/* Hero trang chủ: nền gradient xanh dương đậm -> xanh sáng, chữ trắng, có điểm nhấn. */
.hero{background:linear-gradient(135deg,#4EA0F5,#62D2F6);color:#fff;border-radius:16px;padding:32px 28px;margin-bottom:24px;box-shadow:0 10px 30px rgba(78,160,245,.35)}
.hero h1{color:#fff;font-weight:800}.hero .muted{color:#D5D5D5}.hero .btn{box-shadow:0 4px 14px rgba(0,0,0,.2)}
.muted{color:#59697D}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0}
.card{background:linear-gradient(-45deg,#FFFFFF 0%,#E9EFFA 100%);border:1px solid #DEE2E6;border-radius:14px;padding:20px;box-shadow:0 6px 24px rgba(15,23,42,.08)}
.card h3{margin-top:0;color:#232426}.price{color:#059669;font-weight:700}
/* Khối nội dung trang user ĐỒNG NHẤT chiều rộng trên các trang có cả form
   lẫn bảng/card bên dưới (Đặt đơn, Ví): dùng .form-wide để form rộng bằng
   container như card và table, cùng bo góc 14px, cùng padding, cùng khoảng
   cách dưới. .form thường giữ tối đa 560px cho các trang chỉ có 1 form
   (đăng nhập, đăng ký, liên hệ...) để form không bị kéo dài vô duyên.
   Trước đây form Đặt đơn/Nạp tiền chỉ 560px trong khi bảng bên dưới rộng
   100%, nên cùng một trang có chỗ nhỏ chỗ to. */
.form-wide{width:100%;max-width:none;background:linear-gradient(-45deg,#FFFFFF 0%,#E9EFFA 100%);border:1px solid #DEE2E6;border-radius:14px;padding:22px;box-shadow:0 6px 24px rgba(15,23,42,.08);margin-bottom:20px}
.form-wide label{display:block;margin:12px 0 4px;font-weight:600}
.form-wide input,.form-wide select,.form-wide textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #D6D6D6;background:#FFFFFF;color:#333333}
main .card{margin-bottom:20px}
.form{max-width:560px;background:linear-gradient(-45deg,#FFFFFF 0%,#E9EFFA 100%);border:1px solid #DEE2E6;border-radius:14px;padding:22px;box-shadow:0 6px 24px rgba(15,23,42,.08);margin-bottom:20px}
.form label{display:block;margin:12px 0 4px;font-weight:600}
.form input,.form select,.form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #D6D6D6;background:#FFFFFF;color:#333333}
table{width:100%;border-collapse:collapse;margin:14px 0;background:linear-gradient(-45deg,#FFFFFF 0%,#E9EFFA 100%);border:1px solid #DEE2E6;border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(15,23,42,.06)}
th,td{padding:10px;border-bottom:1px solid #DEE2E6;text-align:left}
.flash{background:#ecfdf5;border:1px solid #6ee7b7;color:#065f46;padding:10px 14px;border-radius:10px;margin-bottom:16px}
/* Dòng báo lỗi: nền đỏ nhạt, viền đỏ, chữ đỏ đậm (2026-10-29). Chỉ đổi màu,
   padding/bo góc/margin giữ nguyên như .flash để 2 loại thông báo đều nhau. */
.flash-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.badge{padding:.35em .65em;font-size:.8rem}
.footer{text-align:center;color:#2B3137;padding:24px;border-top:1px solid #EBF1F5;background:#FFFFFF}
button{padding:7px 12px;border-radius:8px;border:1px solid #DEE2E6;background:linear-gradient(-45deg,#FFFFFF,#EDF1F8);color:#282828;cursor:pointer}

/* Điểm nhấn theo thiết kế: hero giữ gradient, chữ trắng, nút nổi; card dịch vụ nâng lên khi rê chuột. */
.hero h1{font-size:36px;line-height:1.2;margin:0 0 12px}
.hero-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;margin-bottom:14px}
.hero-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px}
.hero-stats strong{display:block;font-size:20px;color:#fff}
.hero-stats span{color:#dbeafe;font-size:11px}
.service-card{transition:transform .18s ease,box-shadow .18s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.14)}
.service-icon{width:48px;height:48px;border-radius:12px;background:#EAF4FE;color:#3E90E5;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.price{color:#059669;font-weight:800;font-size:18px}
.step-num{width:36px;height:36px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}
/* Responsive cho điện thoại: bảng cuộn ngang thay vì tràn màn hình, hero/card co lại. */
@media (max-width: 768px) {
  table{display:block;overflow-x:auto;white-space:nowrap}
  .hero{padding:24px 18px;border-radius:12px}
  .hero h1{font-size:26px}
  .hero-stats{gap:16px}
  .form{padding:16px}
  .price{font-size:16px}
  img{max-width:100%;height:auto}
}

/* ===== Polish giao diện user kiểu getbootstrap.com (chỉ trang user, admin không load file này) ===== */
/* Kiểu chữ: tiêu đề đậm, khoảng cách thoáng như trang docs Bootstrap. */
main h1{font-family:Inter,Arial,Helvetica,sans-serif;font-size:2.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1rem;color:#232426}
main h2{font-family:Inter,Arial,Helvetica,sans-serif;font-size:1.5rem;font-weight:700;margin:2.25rem 0 1rem;color:#232426}
main h3{font-family:Inter,Arial,Helvetica,sans-serif;font-weight:700;color:#232426}
main p{line-height:1.6}
/* Margin trên/dưới cho nút, input, textarea: form không còn dính sát nhau. */
main .btn:not(.btn-sm){margin-top:6px;margin-bottom:6px;margin-right:6px;padding:10px 20px;font-weight:600;border-radius:10px}
main table .btn{margin:3px}
main button{margin-top:6px;margin-bottom:6px}
main form input[type="text"],main form input[type="email"],main form input[type="password"],main form input[type="number"],main form input[type="search"],main form input[type="tel"],main form select,main form textarea{margin-top:4px;margin-bottom:14px}
main form input:focus,main form select:focus,main form textarea:focus{border-color:#4EA0F5;box-shadow:0 0 0 .25rem rgba(78,160,245,.25);outline:0}
/* Card/bảng: viền nhạt kiểu Bootstrap, bo góc lớn, bóng nhẹ. */
.card,.form,.form-wide{border-color:#dee2e6;border-radius:16px}
main table{table-layout:auto}
main table th,main table td{vertical-align:middle}
/* DataTables: khoảng cách cho ô tìm kiếm/phân trang, bảng không bị cột dài kéo lệch. */
.dataTables_wrapper{margin:16px 0}
.dataTables_wrapper .dt-server{width:100% !important}
.dataTables_length,.dataTables_filter{margin-bottom:12px}
.dataTables_filter input{margin-left:8px;margin-bottom:0 !important}
/* Hàng điều khiển bảng thành viên gộp 1 hàng (2026-11-01): "Hiển thị … dòng"
   bên trái không xuống dòng, ô tìm kiếm bên phải co giãn theo phần còn lại. */
body.front .dataTables_length label{margin-bottom:0;white-space:nowrap}
body.front .dataTables_filter label{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-bottom:0}
body.front .dataTables_filter input{flex:1 1 auto;min-width:0;width:auto;margin-left:0}
.dataTables_paginate .pagination{margin:12px 0 0}
@media (min-width: 769px) {
  .hero{padding:48px 36px;border-radius:20px}
  .hero h1{font-size:2.75rem}
}

/* ===== Tông bootstrapstudio.io cho trang member (admin không load file này) ===== */
/* Nút chính: gradient xanh dương - cyan (Stripe) kiểu nút trong hình anh gửi. */
main .btn-primary,.front-topbar .btn-primary{background:linear-gradient(90deg,#4EA0F5,#62D2F6);border-color:transparent;color:#16324F}
main .btn-primary:hover,.front-topbar .btn-primary:hover{background:linear-gradient(90deg,#3E90E5,#4CC0EE);border-color:transparent;color:#16324F}
main .btn-primary:focus,.front-topbar .btn-primary:focus{box-shadow:0 0 0 .25rem rgba(78,160,245,.25)}
/* Nút trong banner hero tím: nút chính thành trắng chữ tím cho nổi, nút viền thành viền trắng chữ trắng. */
main .hero h1{color:#16324F}
main .hero .text-muted{color:rgba(22,50,79,.75)!important}
main .hero .btn-primary{background:#FFFFFF;color:#3E90E5;border-color:transparent}
main .hero .btn-primary:hover{background:#EAF4FE;color:#3E90E5;border-color:transparent}
main .hero .btn-outline-primary{background:linear-gradient(135deg,#D9E3FC,#FFFFFF);color:#16324F;border-color:rgba(22,50,79,.5)}
main .hero .btn-outline-primary:hover{background:linear-gradient(135deg,#C9D8FB,#F0F4FF);color:#16324F;border-color:#16324F}
/* Nút topbar Đăng ký / Đăng nhập dùng đúng màu nút hero trang chủ (không dùng
   gradient Stripe của nút chính, không dùng .topbar-soft cũ cho nút Đăng nhập):
   Đăng ký = nền trắng chữ #3E90E5 như nút chính trong hero; Đăng nhập =
   gradient nhạt #D9E3FC -> #FFFFFF chữ #16324F như nút viền trong hero.
   Nút chọn ngôn ngữ vẫn giữ .topbar-soft, không đổi. */
.front-topbar .topbar-hero-register{background:#FFFFFF;color:#3E90E5;border-color:transparent}
.front-topbar .topbar-hero-register:hover{background:#EAF4FE;color:#3E90E5;border-color:transparent}
.front-topbar .topbar-hero-register:focus{box-shadow:0 0 0 .25rem rgba(62,144,229,.25)}
.front-topbar .topbar-hero-login{background:linear-gradient(135deg,#D9E3FC,#FFFFFF);color:#16324F;border-color:rgba(22,50,79,.5);font-weight:600}
.front-topbar .topbar-hero-login:hover{background:linear-gradient(135deg,#C9D8FB,#F0F4FF);color:#16324F;border-color:#16324F}
/* Nút viền: gradient trắng nhạt, chữ đen, viền mờ. */
main .btn-outline-primary{background:linear-gradient(-45deg,#FFFFFF,#EDF1F8);color:#000;border-color:rgba(0,0,0,.1)}
main .btn-outline-primary:hover{background:linear-gradient(-45deg,#FFFFFF,#DCE6F5);color:#000;border-color:rgba(0,0,0,.3)}
/* Div tint + thẻ tính năng: gradient trắng nhạt cho đồng bộ với card. */
.tint{background:linear-gradient(-45deg,#FFFFFF,#E9EFFA);box-shadow:0 6px 24px rgba(15,23,42,.06)}
.feature-card{background:linear-gradient(-45deg,#FFFFFF,#E9EFFA)}
.feature-card h5{color:#232426}
/* Responsive: điện thoại, iPad dọc/ngang, laptop đều dùng được. */
@media (max-width: 768px) {
  .form,.form-wide{padding:16px}
  main h1{font-size:1.75rem}
  .front-topbar .nav-link{padding:10px 4px}
  main .btn:not(.btn-sm){padding:10px 16px}
}
@media (min-width: 769px) and (max-width: 1024px) {
  main h1{font-size:2rem}
  .hero{padding:36px 28px}
  .front-topbar .nav-link{padding:10px 12px}
  main table{font-size:.95rem}
}

/* Div giới thiệu dịch vụ trên trang đặt đơn: gradient + bóng nhẹ, nội dung dài
   thì cuộn trong khung (max-height) để trang không bị kéo dài vô tận. */
.svc-detail{background:linear-gradient(-45deg,#FFFFFF 0%,#E9EFFA 100%);border:1px solid #DEE2E6;border-radius:16px;padding:22px;margin-bottom:20px;box-shadow:0 6px 24px rgba(15,23,42,.08)}
.svc-detail h5{font-family:Inter,Arial,Helvetica,sans-serif;font-weight:700;color:#232426;margin-bottom:6px}
.svc-detail .svc-meta{color:#59697D}
.svc-detail .svc-info{line-height:1.6;max-height:360px;overflow-y:auto;padding-right:8px}
.svc-detail .svc-info a{color:#166BCB}
.svc-detail .svc-info img{max-width:100%;height:auto}
.feature-card{box-shadow:0 6px 24px rgba(15,23,42,.08);transition:transform .18s ease,box-shadow .18s ease}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.14)}
.feature-card .card-body{padding:8px 12px}
.feature-card .service-icon{width:29px;height:29px;font-size:13px;margin-bottom:6px}
.feature-card h5{margin-bottom:2px;font-size:14px;line-height:1.2}
.feature-card .card-body p{line-height:1.3;font-size:11px}

/* 3 widget tiền ở ví (dashboard): nền gradient, thấp gọn, có bóng đổ, chữ trắng
   cho dễ đọc — thay cho small-box AdminLTE cũ (chữ tối trên nền xanh/vàng bị chìm). */
.wallet-box{position:relative;overflow:hidden;border-radius:14px;padding:14px 18px 12px;color:#fff;box-shadow:0 8px 24px rgba(15,23,42,.18);height:100%}
.wallet-box h3{font-size:22.4px;font-weight:700;margin:0 0 2px;color:#fff;line-height:1.2}
.wallet-box p{margin:0;color:rgba(255,255,255,.94);font-size:14.4px}
.wallet-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:44px;color:rgba(255,255,255,.35);line-height:1}
.wallet-link{display:inline-block;margin-top:9px;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wallet-link:hover{color:#fff;opacity:.85}
.wallet-available{background:linear-gradient(135deg,#22c55e,#15803d)}
.wallet-reserved{background:linear-gradient(135deg,#f59e0b,#b45309)}
.wallet-total{background:linear-gradient(135deg,#38bdf8,#0369a1)}

/* ===== Giao diện thành viên kiểu fmi.mlock.cc (2026-10-29) =====
   Nền sáng, card trắng bo 20px bóng mềm, nút bo tròn hoàn toàn, nút chính
   gradient tối -> indigo, hero chữ gradient tối -> indigo -> hồng. Chỉ áp
   cho trang thành viên (body.front); trang admin không load file này.
   Đặt cuối file để ghi đè các rule cũ cùng tên, không sửa rule cũ. */
body.front main .btn-primary{background:linear-gradient(135deg,#111827,#4f46e5);border-color:transparent;color:#fff;border-radius:999px;box-shadow:0 12px 28px rgba(79,70,229,.28)}
body.front main .btn-primary:hover{background:linear-gradient(135deg,#000000,#4338ca);border-color:transparent;color:#fff}
body.front main .btn-primary:focus{box-shadow:0 0 0 .25rem rgba(99,102,241,.35)}
body.front main .btn-outline-primary{background:#FFFFFF;border-color:#e5e7eb;color:#111827;border-radius:999px}
body.front main .btn-outline-primary:hover{background:#fbfbfc;border-color:#6366f1;color:#111827}
body.front .front-topbar .topbar-hero-register{background:linear-gradient(135deg,#111827,#4f46e5);border-color:transparent;color:#fff;border-radius:999px;box-shadow:0 12px 28px rgba(79,70,229,.28)}
body.front .front-topbar .topbar-hero-register:hover{background:linear-gradient(135deg,#000000,#4338ca);color:#fff}
body.front .front-topbar .topbar-hero-login{background:#FFFFFF;border-color:#e5e7eb;color:#111827;border-radius:999px;font-weight:600}
body.front .front-topbar .topbar-hero-login:hover{background:#fbfbfc;border-color:#6366f1;color:#111827}
body.front .hero{background:transparent;box-shadow:none;border-radius:0;padding:38px 0 10px}
body.front .hero h1{color:#111827;background:linear-gradient(135deg,#111827 20%,#6366f1 55%,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.front .hero .text-muted,body.front .hero p.text-muted{color:#6b7280!important}
body.front .card,body.front .feature-card,body.front .form,body.front .form-wide,body.front .svc-detail{background:#FFFFFF;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 20px 50px rgba(17,24,39,.08)}
body.front .tint{background:#FFFFFF;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 20px 50px rgba(17,24,39,.08)}
body.front .service-icon{background:#eef2ff;color:#6366f1}
body.front .step-num{background:#6366f1}
body.front .list-group-item{background:#FFFFFF;border-color:#e5e7eb}
body.front .form input,body.front .form select,body.front .form textarea,body.front .form-wide input,body.front .form-wide select,body.front .form-wide textarea{background:#fbfbfc;border:1.5px solid #e5e7eb}
body.front .form input:focus,body.front .form select:focus,body.front .form textarea:focus,body.front .form-wide input:focus,body.front .form-wide select:focus,body.front .form-wide textarea:focus{border-color:#6366f1;background:#FFFFFF;box-shadow:0 0 0 4px rgba(99,102,241,.14)}
body.front a{color:#4f46e5}
/* Link phía member (2026-10-29): bỏ gạch dưới ở mọi trạng thái, phân trang
   DataTables dùng indigo thay cho xanh dương mặc định của Bootstrap.
   Cập nhật 2026-10-30: theo ý anh, nút phân trang DataTables và link ở
   footer đổi sang màu ĐEN cho nổi (xem rule .page-link ở trên và
   .front-footer a ngay dưới); link thường trong trang vẫn indigo. */
body.front .front-footer a{color:#111827;font-weight:600}
body.front .front-footer a:hover{color:#000000}
body.front a,body.front a:hover,body.front a:focus,body.front a:active{text-decoration:none}
body.front .page-link{color:#111827;font-weight:600}
body.front .page-link:hover{color:#111827;background:#e5e7eb}
body.front .page-item.active .page-link{background:#111827;border-color:#111827;color:#fff}
/* Danh sách dịch vụ trên điện thoại: tên/mô tả có link dài không ngắt được
   thì không được tràn ra ngoài màn hình (lỗi thấy ở ảnh mobile). */
body.front #svcList .svc-row{overflow-wrap:anywhere}
body.front #svcList .svc-row .text-muted{overflow-wrap:anywhere}
body.front main h1,body.front main h2,body.front main h3{color:#111827}
@media (max-width:640px){
  body.front .hero{padding:28px 0 8px}
  body.front .hero h1{font-size:2rem}
}
/* Khối thông tin liên hệ trên trang Liên hệ (2026-10-29): card trắng bo
   20px như các card thành viên, nằm phía trên form; link Facebook là nút
   riêng nằm phía dưới danh sách SĐT / Telegram / Email. */
body.front .contact-info{background:#FFFFFF;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 20px 50px rgba(17,24,39,.08);padding:22px 24px;margin-bottom:20px}
body.front .contact-info h2{margin:0 0 6px;font-size:1.4rem}
body.front .contact-list{list-style:none;margin:12px 0 0;padding:0}
body.front .contact-list li{padding:8px 0;border-bottom:1px solid #f3f4f6}
body.front .contact-list li:last-child{border-bottom:0}
body.front .contact-label{display:inline-block;min-width:92px;font-weight:600;color:#111827}
body.front .contact-fb{margin:16px 0 0}
/* 2 khung trang Liên hệ (2026-10-29, theo ý anh): điện thoại xếp dọc như
   cũ; từ màn hình máy tính (992px trở lên) 2 khung xếp ngang 2 bên, rộng
   bằng nhau, để không còn cảnh khung trên dài thượt còn form dưới ngắn
   cũn (form vốn bị giới hạn max-width 560px). align-items:flex-start để
   mỗi khung chỉ cao bằng nội dung của nó, không bị kéo giãn thừa.
   Sửa 2026-10-29: khe hở KHÔNG dùng gap của flex nữa mà dùng margin
   phải 28px của khung trái — gap 20px trước đây cộng với bóng mờ của
   2 card lan ra nên nhìn như 2 khung dính sát vào nhau, và trình duyệt
   cũ không hỗ trợ flex gap thì 2 khung dính hẳn luôn. Margin thì trình
   duyệt nào cũng tách ra rõ ràng. */
@media (min-width:992px){
  body.front .contact-wrap{display:flex;align-items:flex-start}
  body.front .contact-wrap .contact-info{flex:1 1 0;margin-right:28px;margin-bottom:0}
  body.front .contact-wrap .form{flex:1 1 0;max-width:none;margin-bottom:0}
}
/* Bảng DataTables trên điện thoại (2026-10-29): nguyên nhân bảng bị thụt
   vào là rule mobile table{display:block} — bảng thành khối block thì
   các dòng chỉ rộng bằng nội dung, không tràn hết chiều rộng khung dù
   table đã width:100%. Sửa riêng cho bảng DataTables: trả lại
   display:table để dòng tràn hết khung, wrapper cuộn ngang khi nội
   dung thật sự rộng hơn màn hình. Bảng thường khác giữ nguyên rule cũ
   để vẫn cuộn ngang được. */
/* Link trong widget ví thành nút bấm (2026-10-29): trước đây link bị
   body.front a nhuộm xanh indigo + gạch dưới mặc định, nhìn xấu trên
   nền màu của card. Giờ link là nút pill nền trắng, chữ tối, không gạch
   dưới, giống các nút khác của giao diện thành viên. */
body.front .wallet-link{display:inline-block;font-size:16px;margin-top:10px;background:#FFFFFF;color:#111827;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.18);text-align:center}
body.front .wallet-link:hover{background:#F8FAFC;color:#111827;text-decoration:none;opacity:1}
/* Ba cột ví cao bằng nhau, nút thẳng hàng dưới cùng (2026-10-29):
   trước đây khung Số dư khả dụng thấp hơn 2 khung kia vì nhãn của nó
   chỉ 1 dòng, 2 khung kia nhãn dài xuống 2 dòng, mà .wallet-box dùng
   height:100% — trong flex thì % chiều cao này không tính được nên
   mỗi khung chỉ cao bằng nội dung của nó. Sửa bằng flex thật: cột
   .col-4 thành flex, khung ví co giãn theo cột, bên trong khung ví
   cũng là flex cột với nút margin-top:auto (cộng margin-bottom của
   khối chữ để nút không dính sát chữ ở khung cao nhất), nút
   align-self:flex-start để nút pill không bị kéo giãn hết chiều rộng. */
body.front .wallet-row > .col-4{display:flex}
body.front .wallet-row .wallet-box{height:auto;flex:1 1 auto;display:flex;flex-direction:column}
body.front .wallet-row .wallet-box > div:first-child{margin-bottom:10px}
body.front .wallet-row .wallet-link{margin-top:auto;align-self:flex-start}
/* Widget ví gọn + 1 hàng trên điện thoại (2026-10-29): 3 card xếp ngang
   ngay cả trên điện thoại (dashboard.php dùng col-4), font nhỏ lại, card
   mỏng lại, icon thu nhỏ để vừa 1/3 màn hình mà không chồng lên chữ. */
@media (max-width:768px){
  body.front table.dt-server{display:table;width:100% !important}
  body.front .dataTables_wrapper{overflow-x:auto}
  body.front .wallet-box{padding:10px 8px 8px}
  body.front .wallet-box h3{font-size:15.2px}
  body.front .wallet-box p{font-size:10.9px;line-height:1.3}
  body.front .wallet-icon{font-size:26px;right:6px}
  body.front .wallet-link{font-size:10.9px;padding:6px 8px;margin-top:6px}
  body.front .wallet-row .wallet-box > div:first-child{margin-bottom:6px}
  body.front .wallet-row .wallet-link{margin-top:auto}
}
/* Icon ví chỉ đổi trên ĐIỆN THOẠI (2026-10-29, theo ý anh: máy tính và
   iPad giữ nguyên): trên điện thoại card hẹp nên icon mờ to ở giữa phải
   đè lên chữ. Riêng điện thoại (767px trở xuống, iPad 768px trở lên
   không đổi) icon thu nhỏ còn 18px, rõ hơn, giữ dạng absolute ở góc
   trên bên phải, khối chữ đẩy xuống 24px để không đè lên icon.
   Không đụng tới markup, chỉ CSS mobile nên desktop/iPad không
   thay đổi gì. */
@media (max-width:767px){
  body.front .wallet-icon{right:8px;top:8px;left:auto;transform:none;font-size:18px;color:rgba(255,255,255,.9)}
  body.front .wallet-row .wallet-box > div:first-child{margin-top:24px}
}
/* Khung chi tiết dịch vụ ở trang Đặt dịch vụ: chữ nhỏ lại (2026-10-29,
   theo ý anh). Trước đây tiêu đề là cỡ h5 mặc định (20px), dòng meta và
   phần mô tả là 16px nên khung nhìn to và dài. Giờ tiêu đề còn khoảng
   16px, meta khoảng 13.5px, mô tả 14px, khoảng cách đoạn trong mô tả
   cũng gọn lại. Áp dụng cho khung này ở mọi màn hình. */
body.front .svc-detail h5{font-size:1.02rem;line-height:1.4;margin-bottom:4px}
body.front .svc-detail .svc-meta{font-size:.84rem}
body.front .svc-detail .svc-info{font-size:.875rem;line-height:1.55}
body.front .svc-detail .svc-info p{margin-bottom:.45rem}
/* Trang Đơn của tôi: chữ của bảng (và bộ lọc + phân trang đi kèm) nhỏ lại
   một chút cho gọn. Chỉ áp trong .my-orders-wrap của my_orders.php. */
.my-orders-wrap{font-size:.85rem}
/* Nhan "Ket qua" dung 1 hang rieng, noi dung ket qua xuong hang duoi
   full be ngang cho de doc (yeu cau cua anh 2026-11-01 20:42). Cot
   response la cot thu 6 (index 5) trong bang Don cua toi. */
.my-orders-wrap li[data-dtr-index="5"] .dtr-data{display:block;margin-top:2px}
/* Anh trong ket qua tra ve: chi cho nho gon nhu anh demo cua em
   (yeu cau cua anh 2026-11-02), du nha cung cap tra anh lon co nao. */
.my-orders-wrap li[data-dtr-index="5"] .dtr-data img{max-width:120px;height:auto;border-radius:8px}
/* Nut mo chi tiet dong phia thanh vien: giong het admin — vong tron
   mau than voi dau + / -, thay mui ten tam giac mac dinh (yeu cau cua
   anh 2026-11-01 20:43; ban admin o admin.css 19px/12px). */
body.front table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
body.front table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
body.front table.dataTable.dtr-column>tbody>tr>td.dtr-control:before,
body.front table.dataTable.dtr-column>tbody>tr>th.dtr-control:before,
body.front table.dataTable>tbody>tr>td.control:before,
body.front table.dataTable>tbody>tr>th.control:before {
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-right:.45em; border-radius:50%;
  background:linear-gradient(180deg,#2b3442,#171d27); color:#fff;
  font-size:12px; font-weight:700; line-height:1; vertical-align:middle;
  box-shadow:0 1px 3px rgba(15,23,42,.3);
}
body.front table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
body.front table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before,
body.front table.dataTable.dtr-column>tbody>tr.parent>td.dtr-control:before,
body.front table.dataTable.dtr-column>tbody>tr.parent>th.dtr-control:before,
body.front table.dataTable>tbody>tr.parent>td.control:before,
body.front table.dataTable>tbody>tr.parent>th.control:before { content:"−"; }
.my-orders-wrap .form-control,.my-orders-wrap .form-select{font-size:.85rem}
.my-orders-wrap .page-link{font-size:.85rem}

/* ===== PREMIUM UI cho trang thành viên (2026-10-30, theo yêu cầu của anh:
   phần thành viên càng đẹp càng sang càng tốt) =====
   Nâng cấp lớp hoàn thiện trên nền tông fmi hiện có: gradient giàu hơn,
   card bo 24px bóng 2 lớp, nút chính gradient indigo -> violet có chiều
   sâu và hiệu ứng nhấc khi di chuột, ô nhập kính mờ viền sáng, bảng và
   danh sách dịch vụ thành từng hàng nổi, ví thêm lớp bóng gương. Chỉ
   body.front (thành viên/trang ngoài); admin không load file này nên
   không ảnh hưởng. Các rule mobile đã chốt trước đó (ví trên điện thoại,
   menu sau login, bảng Đơn của tôi...) không bị đụng tới. */
body.front ::selection{background:#c7d2fe}
@keyframes premiumFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
body.front main{animation:premiumFadeUp .45s ease both}
/* Tiêu đề lớn: gradient giàu hơn (đậm -> indigo -> violet -> hồng như logo) */
body.front .hero h1{background:linear-gradient(120deg,#111827 12%,#4f46e5 46%,#9333ea 72%,#ec4899 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
body.front main h1,body.front main h2{letter-spacing:-.015em}
/* Nút chính: gradient 3 chặng, bóng sâu + viền sáng trong, nhấc khi hover */
body.front main .btn-primary,body.front .front-topbar .topbar-hero-register{background:linear-gradient(135deg,#312e81 0%,#4f46e5 48%,#7c3aed 100%);border-color:transparent;color:#fff;border-radius:999px;box-shadow:0 14px 30px -8px rgba(79,70,229,.5),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .18s ease,box-shadow .18s ease}
body.front main .btn-primary:hover,body.front .front-topbar .topbar-hero-register:hover{background:linear-gradient(135deg,#27246e 0%,#4338ca 48%,#6d28d9 100%);color:#fff;transform:translateY(-1px);box-shadow:0 18px 36px -8px rgba(79,70,229,.55),inset 0 1px 0 rgba(255,255,255,.25)}
body.front main .btn-primary:active{transform:translateY(0)}
/* Nút viền: kính trắng, hover viền indigo + bóng nhẹ */
body.front main .btn-outline-primary,body.front .front-topbar .topbar-hero-login{background:rgba(255,255,255,.85);border:1px solid #e3e6ee;color:#111827;border-radius:999px;box-shadow:0 6px 18px -8px rgba(17,24,39,.18);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
body.front main .btn-outline-primary:hover,body.front .front-topbar .topbar-hero-login:hover{background:#FFFFFF;border-color:#a5b4fc;color:#111827;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(79,70,229,.35)}
/* Card: bo 24px, viền rất nhẹ, bóng 2 lớp kiểu premium */
body.front .card,body.front .feature-card,body.front .form,body.front .form-wide,body.front .svc-detail,body.front .contact-info{background:#FFFFFF;border:1px solid #e9ebf2;border-radius:24px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 40px -16px rgba(16,24,40,.14)}
body.front .feature-card,body.front .service-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.front .feature-card:hover,body.front .service-card:hover{transform:translateY(-4px);border-color:#ddd6fe;box-shadow:0 2px 4px rgba(16,24,40,.05),0 24px 48px -16px rgba(99,102,241,.28)}
/* Ô icon dịch vụ: nền gradient indigo -> violet, icon trắng */
body.front .service-icon{background:linear-gradient(135deg,#6366f1,#a855f7);color:#FFFFFF;box-shadow:0 10px 20px -8px rgba(124,58,237,.55);border-radius:14px}
body.front .step-num{background:linear-gradient(135deg,#6366f1,#a855f7);box-shadow:0 8px 16px -6px rgba(124,58,237,.5)}
/* Hộp số liệu trang chủ (24/7, PayOS...): kính mờ, số có gradient */
body.front .tint{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.8)!important;border-radius:18px;box-shadow:0 10px 26px -12px rgba(16,24,40,.16)}
body.front .tint strong{background:linear-gradient(120deg,#111827,#4f46e5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Danh sách dịch vụ: từng dòng thành thẻ nổi riêng, cách nhau 10px */
body.front #svcList{background:transparent}
body.front #svcList .svc-row{background:#FFFFFF;border:1px solid #e9ebf2;border-radius:16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 24px -14px rgba(16,24,40,.12);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.front #svcList .svc-row:hover{border-color:#c7d2fe;box-shadow:0 2px 4px rgba(16,24,40,.05),0 16px 32px -14px rgba(99,102,241,.3)}
body.front #svcList .svc-row .svc-name{color:#0f172a;font-weight:700}
body.front .price{color:#059669;font-weight:800}
/* Ô nhập liệu phía thành viên: bo 12px, nền mờ, focus phát sáng indigo */
body.front .form-control,body.front .form-select{border-radius:12px;border:1.5px solid #e5e7eb;background:#fbfbfc;color:#111827}
body.front .form-control:focus,body.front .form-select:focus{border-color:#6366f1;background:#FFFFFF;box-shadow:0 0 0 4px rgba(99,102,241,.15)}
/* Bảng phía thành viên: đầu bảng xám rất nhạt, hàng hover ánh indigo */
body.front main table{border:1px solid #e9ebf2;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -18px rgba(16,24,40,.16)}
body.front main table th{background:#f8fafc;color:#334155;font-weight:700;border-bottom:1px solid #e9ebf2}
body.front main table td{border-bottom:1px solid #f1f3f8}
body.front main table tbody tr{transition:background .15s ease}
body.front main table tbody tr:hover{background:#f5f7ff}
/* Phân trang: nút rời nhau, bo 10px */
body.front .page-link{border-radius:10px;margin:0 2px;border-color:#e9ebf2;box-shadow:0 1px 2px rgba(16,24,40,.05)}
/* Huy hiệu + hộp thông báo: bo tròn hơn, bóng nhẹ */
body.front .badge{border-radius:999px}
body.front .flash{border-radius:14px;box-shadow:0 10px 24px -14px rgba(16,24,40,.25)}
body.front .alert{border-radius:14px}
/* Menu xổ của thành viên: bo 16px, bóng sâu, mục bo 10px */
body.front .dropdown-menu{border:1px solid #eceef3;border-radius:16px;box-shadow:0 24px 50px -12px rgba(16,24,40,.28);padding:8px}
body.front .dropdown-item{border-radius:10px;padding:8px 12px}
body.front .dropdown-item:hover,body.front .dropdown-item:focus{background:#eef2ff}
/* Ví: gradient giàu hơn + lớp bóng gương phía trên + bóng sâu.
   Chỉ đổi nền/bóng/bo góc; padding, cỡ chữ, vị trí icon trên điện thoại
   giữ nguyên các rule mobile đã chốt ở trên. */
body.front .wallet-box{border-radius:18px;box-shadow:0 18px 36px -12px rgba(15,23,42,.38)}
body.front .wallet-box::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 170px at 85% -20%,rgba(255,255,255,.38),transparent 60%);pointer-events:none}
body.front .wallet-available{background:linear-gradient(135deg,#10b981,#047857)}
body.front .wallet-reserved{background:linear-gradient(135deg,#fbbf24,#d97706)}
body.front .wallet-total{background:linear-gradient(135deg,#6366f1,#7c3aed)}
body.front .wallet-link{box-shadow:0 8px 18px -6px rgba(0,0,0,.35)}
/* Chân trang: kính mờ như topbar */
body.front .footer{background:rgba(255,255,255,.65);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.6);color:#64748b}
@media (min-width:992px){
  body.front .hero h1{font-size:3rem}
}
/* Bảng thường trên điện thoại phía thành viên (2026-10-30, theo ảnh anh
   gửi ở trang Cửa hàng): trước đây rule mobile chung table{display:block}
   làm các bảng KHÔNG phải DataTables (Cửa hàng, Tải xuống, kết quả check)
   co theo nội dung — hàng tiêu đề hụt vô trong, chừa khoảng trắng ở cuối.
   Bảng DataTables đã được sửa riêng trước đó (.dt-server), nay áp dụng
   cách tương tự cho mọi bảng phía thành viên: giữ display:table và
   width:100% để cột dàn đều hết chiều ngang, chữ trong ô cho xuống dòng
   bình thường thay vì nowrap. */
@media (max-width:768px){
  body.front table{display:table;width:100%!important;white-space:normal}
  body.front table td,body.front table th{overflow-wrap:break-word}
}
/* CHỐNG TRÀN NGANG TOÀN TRANG (2026-10-30): ô <select> chọn dịch vụ ở
   trang Đặt đơn chứa option rất dài (tên dịch vụ + giá + thời gian);
   một số trình duyệt (Safari iOS, WebKit cũ) lấy option dài nhất làm
   chiều rộng tối thiểu của cả trang -> trang bị kéo rộng hơn gấp đôi
   màn hình điện thoại, zoom nhỏ lại thấy khoảng trắng lớn bên phải
   (anh báo 2026-10-30). overflow:hidden trên form-card giữ mọi nội
   dung bên trong đúng khung; select bị kẹp max-width:100% để không
   đội khung lên. Nội dung mô tả dịch vụ (HTML từ nhà cung cấp) cũng
   cho phép ngắt dòng ở mọi vị trí và kẹp ảnh/bảng theo khung, phòng
   dịch vụ khác có dòng ký tự dài không dấu cách hoặc bảng rộng. */
body.front .form,body.front .form-wide{overflow:hidden}
body.front .form select,body.front .form-wide select{max-width:100%}
body.front .svc-info{overflow-wrap:break-word}
body.front .svc-info img,body.front .svc-info table{max-width:100%}

/* --- Thẻ thông tin kết nối Dhru ở trang API của tôi (2026-10-30, anh yêu cầu): 3 dòng URL / username / key + nút sao chép, nút Đổi API key ngay cạnh key; phần hướng dẫn còn lại nằm ở thẻ "Dành cho người chuyên nghiệp" phía dưới. --- */
.api-cred{background:#fff;border:1px solid #E5E7EB;border-radius:20px;box-shadow:0 18px 36px -18px rgba(15,23,42,.28);overflow:hidden;margin-bottom:20px}
.api-cred-head{background:linear-gradient(135deg,#111827 0%,#4f46e5 55%,#7c3aed 100%);color:#fff;font-weight:700;padding:13px 18px;display:flex;align-items:center;gap:9px}
.api-cred-body{padding:16px 18px 12px}
.api-row{margin-bottom:14px}
.api-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6B7280;margin-bottom:5px}
.api-val{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.api-val .api-src{flex:1 1 220px;background:#F6F7FB;border:1px solid #E5E7EB;border-radius:10px;padding:9px 12px;color:#111827;word-break:break-all;display:flex;align-items:center}
.api-val .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.api-inline-form{display:inline-flex}
.api-val .api-act{font-weight:700}
.api-disable-form{margin-left:auto}
.api-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
/* Card hồ sơ (profile) — 2026-10-30: thay dòng chữ chạy dài bằng khối thông tin có cấu trúc cho đẹp. */
.prof-head{display:flex;align-items:center;padding-bottom:16px;border-bottom:1px solid #eef0f6;margin-bottom:4px}
.prof-avatar{width:54px;height:54px;flex:0 0 auto;margin-right:14px;border-radius:17px;background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#c026d3);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(99,73,237,.35)}
.prof-head-main{flex:1;min-width:0}
.prof-name{font-weight:800;font-size:17px;line-height:1.25;word-break:break-word}
.prof-sub{color:#64748b;font-size:13.5px;word-break:break-all}
.prof-badge{flex:0 0 auto;margin-left:12px;background:#eef2ff;color:#4338ca;border:1px solid #e0e7ff;font-weight:700;font-size:12px;padding:4px 11px;border-radius:999px;text-transform:capitalize}
.prof-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid #f3f4fa}
.prof-row:last-child{border-bottom:none}
.prof-label{color:#64748b;font-weight:600;flex:0 0 auto}
.prof-value{font-weight:700;text-align:right;word-break:break-all}
.prof-balance{color:#4f46e5}
/* Form Đổi thông tin trong card hồ sơ phải rộng hết card (2026-10-30, anh chê nó hụt vào trên máy tính vì .form bị max-width 560px). Trên điện thoại card vốn hẹp hơn 560px nên rule này không đổi gì. */
.prof-wrap .form{max-width:none}
.prof-edit-title{font-size:16px;font-weight:800;margin:0 0 14px}
.prof-edit-title .bi{color:#4f46e5}
.api-pro code{background:#eef2ff;color:#4338ca;padding:1px 6px;border-radius:6px;font-size:.92em;overflow-wrap:anywhere}
.api-pro p{line-height:1.65}
.api-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:#111827;color:#fff;padding:9px 18px;border-radius:999px;font-weight:600;box-shadow:0 12px 28px rgba(15,23,42,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:2000}
.api-toast.show{opacity:1;transform:translate(-50%,0)}
/* Điện thoại (2026-10-30, anh yêu cầu): 3 ô URL/username/key thu ngắn lại để nút sao chép đứng cùng một hàng thẳng với ô, các nút sao chép thẳng một cột. */
@media (max-width:767.98px){
  .api-val{flex-wrap:nowrap}
  .api-val .api-src{flex:1 1 auto;min-width:0}
  .api-val .api-copy-btn{flex:0 0 auto}
}
.api-pro-title{margin-top:0}

/* Bảng chi tiết đơn nạp PayOS (mã đơn / số tiền / cộng vào ví) */
.payos-detail{max-width:340px;margin:2px auto 14px;border:1px solid #e5e7eb;border-radius:14px;background:#f8fafc;padding:4px 16px;text-align:left}
.payos-drow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid #e5e7eb}
.payos-drow:last-child{border-bottom:0}
.payos-drow span{color:#64748b}
.payos-drow strong{color:#111827;font-weight:700;white-space:nowrap}
.payos-drow strong.payos-credit{color:#4f46e5}

/* Thẻ ghi chú thông tin (trang đặt đơn) */
.note-card{display:flex;align-items:flex-start;background:#eef2ff;border:1px solid #e0e7ff;border-radius:14px;padding:12px 14px;margin:12px 0;color:#334155;line-height:1.55}
.note-card .bi{color:#4f46e5;margin-right:10px;margin-top:2px;flex:0 0 auto}

/* Khung chat hỗ trợ <-> Telegram */
#chatFab{position:fixed;right:18px;bottom:18px;z-index:1040;width:56px;height:56px;border:0;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:24px;box-shadow:0 12px 28px rgba(79,70,229,.45);display:flex;align-items:center;justify-content:center;cursor:pointer}
#chatFab:active{transform:scale(.96)}
#chatBadge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center}
#chatPanel{position:fixed;right:18px;bottom:86px;z-index:1040;width:350px;max-width:calc(100vw - 24px);height:500px;max-height:calc(100dvh - 110px);background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.30);display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:13px 16px}
.chat-head-text{flex:1 1 auto;display:flex;flex-direction:column;line-height:1.3}
.chat-head-text small{opacity:.85}
#chatClose{background:rgba(255,255,255,.18);border:0;color:#fff;width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.chat-msgs{flex:1 1 auto;overflow-y:auto;background:#f8fafc;padding:14px;display:flex;flex-direction:column;gap:8px}
.chat-hint{color:#64748b;text-align:center;margin:4px 8px}
.chat-bubble{max-width:82%;padding:9px 12px;border-radius:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word}
.chat-bubble.visitor{align-self:flex-end;background:linear-gradient(135deg,#4f46e5,#6d28d9);color:#fff;border-bottom-right-radius:4px}
.chat-bubble.admin{align-self:flex-start;background:#fff;border:1px solid #e5e7eb;color:#111827;border-bottom-left-radius:4px}
.chat-inputrow{border-top:1px solid #e5e7eb;padding:10px;background:#fff}
.chat-inputrow #chatName{width:100%;margin-bottom:8px}
.chat-sendrow{display:flex;align-items:flex-end}
.chat-sendrow textarea{flex:1 1 auto;resize:none;max-height:90px}
.chat-sendrow #chatSend{flex:0 0 auto;margin-left:8px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.chat-sendrow #chatSend:disabled{opacity:.5}
@media (max-width:575.98px){#chatPanel{right:12px;left:12px;width:auto}}
/* Ô nhập phía THÀNH VIÊN (body.front) KHÔNG còn ghim 16px nữa: từ
   2026-11-01 19:27 cả hai phía (trang này + admin) khai maximum-scale=1
   trong viewport nên iOS Safari không tự zoom khi chạm vào ô nhập dù
   chữ nhỏ hơn 16px (bóp tay zoom vẫn được). Trước đó rule này ghim
   16px !important cho mọi input/textarea/select phía thành viên. */

/* Form đăng ký: bỏ giới hạn 560px của .form để form trải đầy bề ngang
   container như thẻ ghi chú phía trên, iPad/laptop không bị hụt vào. */
.reg-form{max-width:none}

/* Overlay dùng chung (giống admin): chi tiết hóa đơn mở tại chỗ, không nhảy trang. */
.queue-overlay { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1055; }
.queue-overlay[hidden] { display:none; }
.queue-overlay-backdrop { position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(15,23,42,.55); }
.queue-overlay-panel { position:relative; margin:24px auto; width:94vw; max-width:980px; max-height:calc(100vh - 48px); display:flex; flex-direction:column; background:linear-gradient(180deg,#ffffff,#eef1f4); border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.35); overflow:hidden; }
.queue-overlay-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid #dbe3ea; }
.queue-overlay-head h5 { margin:0; font-weight:700; color:#16324F; }
.queue-overlay-body { padding:14px 18px 18px; overflow:auto; }
.queue-overlay-panel.wide { max-width:1200px; }
.queue-overlay-panel.narrow { max-width:680px; }
.ov-panel { margin-top:14px; padding:12px 14px; border:1px solid #dbe3ea; border-radius:12px; background:#fff; }

/* Price cells never wrap (dt-nowrap column class from datatables-init.js) */
table td.dt-nowrap { white-space:nowrap; }