/* ============================================================
   KHÁCH SẠN DUY HƯNG - CSS Giao Diện
   ============================================================ */

:root {
  --mau-chinh:     #1a3c6e;
  --mau-phu:       #c9a227;
  --mau-xanh-la:   #198754;
  --mau-do:        #dc3545;
  --mau-vang:      #fd7e14;
  --mau-xam:       #6c757d;
  --mau-nen:       #f0f2f5;
  --mau-trang:     #ffffff;
  --mau-sidebar:   #0f2444;
  --mau-sidebar-hover: #1a3c6e;
  --radius:        10px;
  --bong:          0 2px 15px rgba(0,0,0,.08);
  --bong-mo:       0 4px 25px rgba(0,0,0,.15);
}

* { box-sizing: border-box; }
body { background: var(--mau-nen); font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 14px; color: #333; }

/* ---- SIDEBAR ---- */
.sidebar {
  position: fixed; top: 0; left: 0; width: 240px; height: 100vh;
  background: var(--mau-sidebar); z-index: 100;
  display: flex; flex-direction: column;
  transition: all .3s;
}
.sidebar-logo {
  padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-logo img { width: 40px; height: 40px; border-radius: 8px; }
.sidebar-logo-text h5 { color: #fff; margin: 0; font-size: 16px; font-weight: 700; }
.sidebar-logo-text small { color: var(--mau-phu); font-size: 11px; }
.sidebar-menu { padding: 12px 10px; flex: 1; overflow-y: auto; }
.sidebar-menu a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  color: rgba(255,255,255,.7); border-radius: var(--radius); margin-bottom: 3px;
  text-decoration: none; font-size: 13.5px; transition: all .2s;
}
.sidebar-menu a:hover, .sidebar-menu a.active {
  background: var(--mau-sidebar-hover); color: #fff;
}
.sidebar-menu a.active { background: var(--mau-chinh); border-left: 3px solid var(--mau-phu); }
.sidebar-menu a i { width: 20px; text-align: center; font-size: 16px; }
.sidebar-menu .menu-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.35); padding: 14px 14px 6px; margin-top: 6px;
}
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer .nhanvien-info { display: flex; align-items: center; gap: 10px; }
.sidebar-footer .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mau-phu); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #fff; font-size: 14px;
}
.sidebar-footer .nhanvien-ten { color: #fff; font-size: 13px; font-weight: 600; }
.sidebar-footer .nhanvien-quyen { color: rgba(255,255,255,.5); font-size: 11px; }

/* ---- LAYOUT CHÍNH ---- */
.main-wrapper { margin-left: 240px; min-height: 100vh; }
.topbar {
  background: #fff; border-bottom: 1px solid #e8edf2; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.topbar-tieude { font-size: 18px; font-weight: 700; color: var(--mau-chinh); margin: 0; }
.noi-dung { padding: 24px; }

/* ---- THẺ / CARD ---- */
.the { background: #fff; border-radius: var(--radius); box-shadow: var(--bong); border: none; }
.the .the-tieude { padding: 16px 20px; border-bottom: 1px solid #f0f2f5; font-weight: 600; color: var(--mau-chinh); display: flex; align-items: center; gap: 8px; }
.the .the-noidung { padding: 20px; }
.the-kpi {
  background: #fff; border-radius: var(--radius); padding: 20px;
  box-shadow: var(--bong); border-left: 4px solid var(--mau-chinh);
}
.the-kpi.xanh { border-color: var(--mau-chinh); }
.the-kpi.vang { border-color: var(--mau-phu); }
.the-kpi.xanh-la { border-color: var(--mau-xanh-la); }
.the-kpi.do { border-color: var(--mau-do); }
.the-kpi .gia-tri { font-size: 26px; font-weight: 800; color: var(--mau-chinh); }
.the-kpi.vang .gia-tri { color: var(--mau-phu); }
.the-kpi.xanh-la .gia-tri { color: var(--mau-xanh-la); }
.the-kpi.do .gia-tri { color: var(--mau-do); }
.the-kpi .nhan { font-size: 12px; color: var(--mau-xam); text-transform: uppercase; letter-spacing: .5px; }

/* ---- SƠ ĐỒ PHÒNG ---- */
.so-do-phong { display: flex; flex-direction: column; gap: 20px; }
.tang-phong .tang-tieude {
  font-weight: 700; color: var(--mau-chinh); font-size: 15px;
  padding: 10px 16px; background: #f0f4ff; border-radius: 8px;
  margin-bottom: 12px; border-left: 4px solid var(--mau-chinh);
}
.luoi-phong { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 12px; }
.o-phong {
  border-radius: var(--radius); padding: 14px 10px; text-align: center;
  cursor: pointer; border: 2px solid transparent; transition: all .2s;
  position: relative;
}
.o-phong:hover { transform: translateY(-2px); box-shadow: var(--bong-mo); }
.o-phong.trong    { background: #d1fae5; border-color: #6ee7b7; }
.o-phong.dang-o   { background: #fee2e2; border-color: #fca5a5; }
.o-phong.cho-don  { background: #fef3c7; border-color: #fcd34d; }
.o-phong.bao-tri  { background: #f3f4f6; border-color: #d1d5db; }
.o-phong.duoc-chon { box-shadow: 0 0 0 3px var(--mau-chinh) !important; transform: translateY(-3px); }
.o-phong .so-phong { font-size: 20px; font-weight: 800; color: #1f2937; }
.o-phong .loai-phong { font-size: 11px; color: #6b7280; margin-top: 2px; }
.o-phong .bieu-tuong { font-size: 22px; margin-bottom: 4px; }

/* ---- BẢNG DỮ LIỆU ---- */
.bang-data { width: 100%; border-collapse: separate; border-spacing: 0; }
.bang-data thead th {
  background: #f8fafc; padding: 12px 16px; font-weight: 600;
  color: var(--mau-chinh); font-size: 13px; white-space: nowrap;
  border-bottom: 2px solid #e8edf2;
}
.bang-data tbody tr { transition: background .15s; }
.bang-data tbody tr:hover { background: #f8fafc; }
.bang-data td { padding: 12px 16px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.bang-data td:first-child { border-left: 3px solid transparent; }
.bang-data tr:hover td:first-child { border-left-color: var(--mau-phu); }

/* ---- NHÃN TRẠNG THÁI ---- */
.nhan-trang-thai {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.nhan-trang-thai.success { background: #d1fae5; color: #065f46; }
.nhan-trang-thai.danger  { background: #fee2e2; color: #991b1b; }
.nhan-trang-thai.warning { background: #fef3c7; color: #92400e; }
.nhan-trang-thai.info    { background: #dbeafe; color: #1e40af; }
.nhan-trang-thai.secondary { background: #f3f4f6; color: #374151; }

/* ---- FORM ---- */
.nhom-form { margin-bottom: 18px; }
.nhom-form label { font-weight: 600; color: #374151; font-size: 13px; margin-bottom: 6px; display: block; }
.nhom-form .form-control, .nhom-form .form-select {
  border-radius: 8px; border: 1.5px solid #e5e7eb; padding: 10px 14px;
  font-size: 14px; transition: all .2s; background: #fff;
}
.nhom-form .form-control:focus, .nhom-form .form-select:focus {
  border-color: var(--mau-chinh); box-shadow: 0 0 0 3px rgba(26,60,110,.1);
}

/* ---- NÚT BẤM ---- */
.nut { border-radius: 8px; font-weight: 600; padding: 9px 18px; font-size: 13.5px; border: none; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
.nut:hover { transform: translateY(-1px); }
.nut-chinh { background: var(--mau-chinh); color: #fff; }
.nut-chinh:hover { background: #1e4a85; }
.nut-vang  { background: var(--mau-phu); color: #1f2937; }
.nut-vang:hover { background: #b8901f; }
.nut-xanh  { background: var(--mau-xanh-la); color: #fff; }
.nut-xanh:hover { background: #157347; }
.nut-do    { background: var(--mau-do); color: #fff; }
.nut-do:hover { background: #c82333; }
.nut-outline { background: transparent; border: 1.5px solid var(--mau-chinh); color: var(--mau-chinh); }
.nut-outline:hover { background: var(--mau-chinh); color: #fff; }
.nut-nho { padding: 5px 12px; font-size: 12px; }

/* ---- TIÊU ĐỀ TRANG ---- */
.tieude-trang { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tieude-trang h4 { font-size: 20px; font-weight: 800; color: var(--mau-chinh); margin: 0; }

/* ---- THANH TÌM KIẾM ---- */
.thanh-timkiem { background: #fff; border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--bong); margin-bottom: 20px; }

/* ---- BIỂU ĐỒ CỘT ---- */
.bieu-do-cot { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.cot-bien { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cot-thanh { width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(to top, var(--mau-chinh), #4a90d9); transition: all .4s; }
.cot-nhan { font-size: 11px; color: #9ca3af; }
.cot-gia-tri { font-size: 11px; color: #374151; font-weight: 600; }

/* ---- TRANG ĐĂNG NHẬP ---- */
.trang-dangnhap { min-height: 100vh; background: linear-gradient(135deg, #0f2444 0%, #1a3c6e 100%); display: flex; align-items: center; justify-content: center; }
.the-dangnhap { background: #fff; border-radius: 16px; padding: 40px; width: 420px; max-width: calc(100vw - 32px); box-shadow: 0 25px 60px rgba(0,0,0,.3); }
.logo-dangnhap { text-align: center; margin-bottom: 30px; }
.logo-dangnhap h2 { color: var(--mau-chinh); font-weight: 800; }
.logo-dangnhap p { color: var(--mau-xam); font-size: 13px; }

/* ---- TRANG KHÁCH HÀNG ---- */
.hero-section {
  background: linear-gradient(135deg, #0f2444 0%, #1a3c6e 60%, #0f2444 100%);
  padding: 80px 0; text-align: center; color: #fff;
}
.hero-section h1 { font-size: 52px; font-weight: 800; margin-bottom: 12px; }
.hero-section h1 span { color: var(--mau-phu); }
.nut-datphong { background: var(--mau-phu); color: #1f2937; border: none; border-radius: 12px; padding: 16px 48px; font-size: 18px; font-weight: 700; cursor: pointer; transition: all .3s; box-shadow: 0 8px 30px rgba(201,162,39,.4); text-decoration: none; display: inline-block; }
.nut-datphong:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(201,162,39,.5); color: #1f2937; }
.the-loai-phong { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 24px; backdrop-filter: blur(10px); transition: all .3s; color: #fff; }
.the-loai-phong:hover { background: rgba(255,255,255,.15); transform: translateY(-4px); }
.the-loai-phong .gia { color: var(--mau-phu); font-size: 22px; font-weight: 800; }
.khung-datphong { background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.12); overflow: hidden; }
.buoc-indicator { display: flex; background: #f8fafc; padding: 20px; gap: 0; }
.buoc-item { flex: 1; display: flex; align-items: center; gap: 0; }
.buoc-so { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.buoc-so.hoan-thanh { background: var(--mau-xanh-la); color: #fff; }
.buoc-so.hien-tai { background: var(--mau-chinh); color: #fff; }
.buoc-so.chua-den { background: #e5e7eb; color: #9ca3af; }
.buoc-ten { font-size: 13px; margin-left: 8px; white-space: nowrap; }
.buoc-duong { flex: 1; height: 2px; background: #e5e7eb; margin: 0 8px; }
.buoc-duong.hoan-thanh { background: var(--mau-xanh-la); }
.noi-dung-buoc { padding: 28px; }
.the-phong-chon { border: 2px solid #e5e7eb; border-radius: 12px; padding: 18px; cursor: pointer; transition: all .2s; }
.the-phong-chon:hover { border-color: var(--mau-chinh); background: #f8faff; }
.the-phong-chon.da-chon { border-color: var(--mau-chinh); background: #eff6ff; }
.the-dich-vu { border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 14px; cursor: pointer; transition: all .2s; }
.the-dich-vu:hover { border-color: var(--mau-xanh-la); background: #f0fdf4; }
.the-dich-vu.da-chon { border-color: var(--mau-xanh-la); background: #f0fdf4; }

/* ---- HÓA ĐƠN IN ---- */
@media print {
  .sidebar, .topbar, .nut, button, .alert { display: none !important; }
  .main-wrapper { margin-left: 0; }
  .hoa-don-in { max-width: 800px; margin: 0 auto; padding: 20px; }
}

/* ================================================================
   MOBILE CARD LAYOUT — Đặt phòng (dat_phong.php) thay thế bảng
   ================================================================ */

.dp-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8edf2;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .2s;
}
.dp-card:active { box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.dp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #f0f2f5;
  background: #f8fafc;
}
.dp-ma {
  font-weight: 800;
  font-size: 13px;
  font-family: monospace;
  color: var(--mau-chinh);
  text-decoration: none;
  letter-spacing: .4px;
}
.dp-ma:hover { text-decoration: underline; color: var(--mau-chinh); }

.dp-card-body {
  padding: 10px 14px 8px;
}
.dp-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.dp-info-icon {
  width: 30px; height: 30px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mau-chinh); font-size: 14px;
  flex-shrink: 0;
}
.dp-khach { font-weight: 700; font-size: 14px; color: #1f2937; }
.dp-sdt   { font-size: 12px; color: #6b7280; margin-top: 1px; }
.dp-phong { font-weight: 800; font-size: 15px; color: var(--mau-chinh); }
.dp-loai  { font-size: 11px; color: #9ca3af; }

.dp-ngay-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #374151;
  background: #f8fafc;
  border-radius: 8px;
  padding: 6px 10px;
}
.dp-dem {
  margin-left: auto;
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.dp-card-finance {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f2f5;
  border-bottom: 1px solid #f0f2f5;
}
.dp-fin-item {
  flex: 1;
  padding: 8px 10px;
  text-align: center;
}
.dp-fin-lbl {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #9ca3af;
  margin-bottom: 2px;
}
.dp-fin-val {
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
}
.dp-fin-divider { width: 1px; background: #f0f2f5; align-self: stretch; }
.dp-no   { color: #dc2626 !important; }
.dp-paid { color: #16a34a !important; font-size: 12px !important; }

.dp-card-actions {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  flex-wrap: wrap;
}
.dp-btn {
  flex: 1;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s, transform .1s;
  white-space: nowrap;
}
.dp-btn:active { transform: scale(.97); filter: brightness(.9); }
.dp-btn-blue   { background: #1a3c6e; color: #fff; }
.dp-btn-green  { background: #16a34a; color: #fff; }
.dp-btn-red    { background: #dc2626; color: #fff; }
.dp-btn-purple { background: #7c3aed; color: #fff; }

/* ================================================================
   UNIVERSAL TABLE → CARD on mobile (JS tự inject data-label từ thead)
   Áp dụng cho MỌI trang admin có .bang-data
   ================================================================ */
@media (max-width: 767px) {
  /* Bỏ min-width cứng đặt trên desktop */
  .bang-data { min-width: unset !important; display: block !important; }
  .bang-data thead { display: none !important; }
  .bang-data tbody { display: block !important; }

  /* Mỗi <tr> thành 1 card */
  .bang-data tr {
    display: block !important;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    transition: box-shadow .2s;
  }
  .bang-data tr:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }

  /* Mỗi <td> thành 1 dòng label:value */
  .bang-data td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px !important;
    border: none !important;
    border-bottom: 1px solid #f0f2f5 !important;
    white-space: normal !important;
    min-height: 44px;
    font-size: 13px;
    gap: 8px;
  }
  .bang-data td:last-child { border-bottom: none !important; }

  /* Nhãn từ data-label (được inject bởi JS) */
  .bang-data td[data-label]::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    min-width: 78px;
    flex-shrink: 0;
  }

  /* Ô đầu tiên = tiêu đề card */
  .bang-data tr td:first-child {
    background: #f8fafc;
    font-weight: 700;
    font-size: 13.5px;
    border-bottom: 2px solid #e5e7eb !important;
  }

  /* Nút thao tác trong ô cuối */
  .bang-data td .d-flex { flex-wrap: wrap; gap: 5px !important; justify-content: flex-end; }
  .bang-data td .nut, .bang-data td .btn { min-height: 38px; font-size: 12px; }

  /* Badge, nhãn trạng thái: căn phải */
  .bang-data td .nhan-trang-thai,
  .bang-data td .badge { margin-left: auto; }

  /* Tránh conflict với dat_phong card layout (bảng đã ẩn bằng d-none d-md-block) */
  .table-responsive.d-none { display: none !important; }
}

/* ================================================================
   MOBILE ADMIN UI — Thiết kế lại giao diện điện thoại chuyên nghiệp
   ================================================================ */

/* ---- BOTTOM NAVIGATION (chỉ hiện trên mobile) ---- */
.bottom-nav {
  display: none;
}

/* ---- SIDEBAR BACKDROP ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 299;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeInBackdrop .25s ease;
}
.sidebar-backdrop.mo { display: block; }
@keyframes fadeInBackdrop { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   BREAKPOINT 992px — Tablet & Mobile: Ẩn sidebar, hiện hamburger
   ================================================================ */
@media (max-width: 992px) {
  /* --- Sidebar trượt vào từ trái --- */
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 300;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.mo { transform: translateX(0); }

  /* --- Layout chính --- */
  .main-wrapper { margin-left: 0; }
  .noi-dung { padding: 16px 12px 80px; }

  /* --- Topbar gọn hơn --- */
  .topbar {
    padding: 0 14px;
    height: 56px;
    position: sticky; top: 0; z-index: 200;
  }
  .topbar-tieude { font-size: 15px; }
  .topbar-clock { display: none; }

  /* --- Bottom navigation bar --- */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: #fff;
    border-top: 1px solid #e8edf2;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    z-index: 200;
    align-items: stretch;
  }
  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #9ca3af;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    padding: 6px 2px 4px;
  }
  .bn-item i { font-size: 21px; transition: transform .15s; }
  .bn-item.active { color: var(--mau-chinh); }
  .bn-item.active i { transform: translateY(-2px); }
  .bn-item.active::after {
    content: '';
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    background: var(--mau-chinh);
    border-radius: 0 0 4px 4px;
  }
  .bn-item:hover { color: var(--mau-chinh); }
  /* Nút menu (☰) mở sidebar */
  .bn-item.bn-menu { color: #6b7280; }
  .bn-item.bn-menu.mo { color: var(--mau-chinh); }

  /* --- KPI cards 2 cột trên mobile --- */
  .tieude-trang { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 14px; }
  .tieude-trang h4 { font-size: 16px; }
  .tieude-trang .nut { font-size: 12px; padding: 7px 12px; white-space: nowrap; }

  .the-kpi { padding: 14px 16px; border-radius: 12px; }
  .the-kpi .gia-tri { font-size: 22px; }
  .the-kpi .nhan { font-size: 10px; }

  /* --- Bảng dữ liệu: scroll ngang --- */
  .the .the-noidung { padding: 0; overflow-x: auto; }
  .the-noidung .table-responsive,
  .bang-data-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Bảng trong container Bootstrap cũng cần wrap */
  .container-fluid .table-responsive,
  .card-body .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bang-data { min-width: 560px; }
  .bang-data td, .bang-data th {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  /* Padding bottom cho container-fluid pages */
  .container-fluid { padding-bottom: 76px; }

  /* --- Thẻ card nhỏ gọn hơn --- */
  .the .the-tieude { padding: 12px 16px; font-size: 14px; }

  /* --- Modal full-screen trên mobile --- */
  .modal-dialog { margin: 8px; }
  .modal-xl, .modal-lg { max-width: calc(100vw - 16px); }
}

/* ================================================================
   BREAKPOINT 768px — Điện thoại: Chuyên nghiệp hóa toàn bộ
   ================================================================ */
@media (max-width: 768px) {
  /* --- Noi dung thêm space cho bottom nav --- */
  .noi-dung { padding: 14px 10px 76px; }

  /* --- Row KPI: dùng grid 2 cột --- */
  .row.g-3 > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
  .row.g-3 > [class*="col-md-"].col-12 { flex: 0 0 100%; max-width: 100%; }

  /* --- Bảng: row tối giản --- */
  .bang-data thead th { font-size: 11px; padding: 9px 10px; white-space: nowrap; }
  .bang-data td { font-size: 12px; padding: 9px 10px; }

  /* --- Nút thao tác nhỏ hơn --- */
  .nut-nho { padding: 5px 10px; font-size: 11.5px; }

  /* ===== KHÁCH HÀNG ===== */
  /* Navbar */
  .ks-nav .container { flex-wrap: nowrap; padding: 0 12px; }
  /* Booking steps */
  .buoc-bar { padding: 12px 10px; gap: 0; overflow-x: auto; }
  .b-so { width: 28px; height: 28px; font-size: 11px; }
  .b-nm { font-size: 11px; }
  .b-ln { margin: 0 6px; }
  /* Form */
  #formDP { padding: 18px 16px !important; }
  .nhom-form .form-control, .nhom-form .form-select, .nhom-form textarea {
    padding: 10px 12px; font-size: 13px;
  }
  /* Room cards */
  .phong-opt { padding: 14px; }
  /* Payment options */
  .pt-opt { padding: 12px 14px; gap: 10px; }
  .pt-opt:hover { transform: none; }
  /* Success */
  .xn-wrap { padding: 24px 16px !important; margin: 24px 8px !important; border-radius: 16px; }
  .xn-grid { grid-template-columns: 1fr !important; gap: 8px !important; padding: 16px !important; }
  .datcoc-box { padding: 14px 12px; }
  .datcoc-box img { width: 160px !important; }
  /* Search */
  .search-box { padding: 20px 14px !important; border-radius: 14px !important; }
  .nut { padding: 10px 16px; font-size: 13px; }
  /* Service */
  .dv-opt { padding: 10px 12px; gap: 8px; }
  /* Stats */
  .stat-cell { padding: 14px 16px; }
  .stat-n { font-size: 22px; }
  .stat-l { font-size: 9px; }
  /* Hero */
  .hero { padding: 100px 0 60px; }
  .hero-scroll { display: none; }
  .testi { padding: 18px; }
  .ctct-card { padding: 14px 16px; }
  /* Table overflow global */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .bang-data td, .bang-data th { white-space: nowrap; }
}

/* ================================================================
   BREAKPOINT 576px — Điện thoại nhỏ
   ================================================================ */
@media (max-width: 576px) {
  .noi-dung { padding: 10px 8px 74px; }

  /* Tất cả col thành full-width */
  .row.g-3 > [class*="col-md-"],
  .row.g-3 > [class*="col-sm-"] { flex: 0 0 50%; max-width: 50%; }
  .row.g-4 > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }

  /* KPI */
  .the-kpi { padding: 12px; }
  .the-kpi .gia-tri { font-size: 18px !important; }
  .the-kpi .nhan { font-size: 9px; letter-spacing: 0; }

  /* Sơ đồ phòng */
  .luoi-phong { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px; }
  .o-phong { padding: 10px 6px; }
  .o-phong .so-phong { font-size: 15px; }
  .o-phong .loai-phong { font-size: 10px; }
  .o-phong .bieu-tuong { font-size: 18px; }

  /* Nút nhỏ */
  .nut { padding: 8px 12px; font-size: 12px; }
  .nut i { font-size: 13px; }

  /* Tiêu đề trang */
  .tieude-trang { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tieude-trang h4 { font-size: 15px; }

  /* Bottom nav text */
  .bn-item { font-size: 8.5px; }
  .bn-item i { font-size: 19px; }
}

/* ================================================================
   BREAKPOINT 480px — Điện thoại rất nhỏ
   ================================================================ */
@media (max-width: 480px) {
  .hero-h1 { font-size: 32px !important; letter-spacing: -0.5px !important; }
  .hero-p  { font-size: 14px !important; }
  .btn-hero { padding: 14px 28px !important; font-size: 14px !important; }
  .btn-hero-outline { padding: 13px 20px !important; font-size: 13px !important; }
  .hero-cta { gap: 10px !important; }

  .buoc-bar { padding: 10px 8px; }
  .b-nm { display: none; }

  #formDP { padding: 14px 12px !important; }
  .phong-opt { padding: 12px; }

  .xn-wrap { padding: 20px 14px !important; }
  .nav-brand { font-size: 15px !important; }
  .nav-badge { display: none; }
  .btn-nav { padding: 7px 14px !important; font-size: 12px !important; }

  /* Admin login */
  .the-dangnhap { padding: 24px 20px; }
}

/* ================================================================
   TOUCH DEVICE — Tắt hover animation, tăng tap target
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  .nut, .btn, button { min-height: 44px; }
  .sidebar-menu a { min-height: 48px; font-size: 14px; }
  .pt-opt { cursor: default; }
  .pt-opt:hover, .pt-opt.active { transform: none; }
  .phong-opt:hover, .room-card:hover, .dv-opt:hover { transform: none; }
  .ctct-card:hover { transform: none; border-color: #e8edf2; }
  .o-phong:hover { transform: none; }
}

/* ================================================================
   PRINT — In hóa đơn / phiếu tạm trú
   ================================================================ */
@media print {
  .sidebar, .topbar, .ks-nav, .no-print, .bottom-nav, .sidebar-backdrop,
  .nut, button:not([type=submit]), .alert, nav, footer { display: none !important; }
  .main-wrapper { margin-left: 0 !important; }
  body { background: #fff !important; font-size: 12pt; }
}