* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

body {
    background: #ffffff;
    color: #1a202c;
}

.hotel-wrapper {
    background: linear-gradient(135deg, rgba(240, 245, 251, 0.95), rgba(255, 255, 255, 0.98)),
                url('/assets/images/background_ks.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 40px 0;
    min-height: 80vh;
}
.weekend-deals,
.featured-hotels,
.promo-wrapper,
.destinations,
.places {
    background: #ffffff;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.header {
    background: #e8edf2;
    padding: 15px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative;
}

/* Nhóm phải: nav + nút liên hệ */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;       /* không để header-right co lại */
    flex-wrap: nowrap;    /* không xuống hàng */
}

.logo {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}

/* Nav luôn là flex row ở desktop — tránh link xuống hàng ở ~820px (iPad Air) */
.header nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.header nav a {
    color: #1a202c;
    margin-left: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.search-box {
    background: #f5f5f5;
    padding: 40px 0;
    text-align: center;
}

.search-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.search-form input,
.search-form button {
    padding: 10px;
    font-size: 14px;
}

.search-form button {
    background: #0071c2;
    color: #fff;
    border: none;
    cursor: pointer;
}

.hotel-list {
    padding: 40px 0;
}

.hotel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.hotel-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.hotel-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.hotel-info {
    padding: 15px;
}

.hotel-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.hotel-info p {
    font-size: 14px;
    color: #666;
}

.price {
    display: block;
    margin: 10px 0;
    font-weight: bold;
    color: #d32f2f;
}

.btn {
    display: inline-block;
    padding: 8px 12px;
    background: #0071c2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
}

.destination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.destination-card {
    height: 220px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.destination-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.1)
    );
    color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.destination-overlay h3 {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
}

.destination-overlay p {
    margin-top: 5px;
    font-size: 14px;
    opacity: 0.9;
}
.destination-card:hover {
    transform: scale(1.03);
    transition: 0.3s ease;
}


.section-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
}

.muted {
    color: #777;
}


.weekend-deals {
    margin: 60px 0;
}

.weekend-deals h2 {
    font-size: 26px;
    margin-bottom: 6px;
}

.muted-text {
    color: #6b6b6b;
    margin-bottom: 24px;
}

.deal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.deal-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.deal-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.deal-body {
    padding: 14px;
}

.deal-body h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.deal-location {
    font-size: 13px;
    color: #777;
}

.deal-rating {
    margin: 8px 0;
}

.score {
    background: #9d174d;
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 13px;
    margin-right: 6px;
}

.deal-price {
    text-align: right;
}

.deal-price .old {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
    margin-right: 6px;
}

.deal-price .new {
    color: #d4111e;
    font-weight: bold;
}

.weekend-deals {
    margin: 50px 0;
}

.weekend-deals h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.weekend-deals .subtitle {
    color: #6b6b6b;
    margin-bottom: 20px;
}

.deal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.deal-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.deal-card:hover {
    transform: translateY(-6px);
}

.deal-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.deal-info {
    padding: 14px;
}

.tag {
    display: inline-block;
    background: #008009;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.deal-info h3 {
    font-size: 16px;
    margin: 6px 0;
}

.location {
    color: #555;
    font-size: 14px;
}

.price {
    margin-top: 10px;
}

.price .old {
    text-decoration: line-through;
    color: #999;
    margin-right: 8px;
}

.price .new {
    color: #d32f2f;
    font-weight: 700;
    font-size: 16px;
}

/* ====== HOVER HIỂN NỘI DUNG DEAL ====== */

.deal-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.deal-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.deal-card:hover .deal-desc {
    opacity: 1;
    max-height: 120px;
    margin-top: 8px;
}

.deal-price {
    transition: transform 0.3s ease;
}

.deal-card:hover .deal-price {
    transform: translateY(-4px);
}

.deal-card img {
    transition: transform 0.4s ease;
}

.deal-card:hover img {
    transform: scale(1.05);
}

/* =========================
   WEEKEND DEALS - Đẹp bắt mắt với khách sạn nổi bật
   ========================= */

.weekend-deals {
    margin: 50px 0;
    background: #fff;
}

.weekend-deals .container,
.featured-hotels .container,
.destinations .container,
.promo-wrapper .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.weekend-deals h2 {
    font-size: 24px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 6px;
}

/* Grid 3 cột giống fh-grid */
.deal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 20px;
}

/* – Card – */
.weekend-deals .deal-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    overflow: visible !important; /* badge không bị cắt */
    display: flex;
    flex-direction: column;
    transition: all .25s ease;
}

.weekend-deals .deal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 28px rgba(0,0,0,.13);
}

/* – Vùng ảnh – */
.weekend-deals .deal-card .img-wrap {
    position: relative;
    height: 190px;
    overflow: hidden;         /* cắt ảnh trong wrap */
    border-radius: 14px 14px 0 0;
}

.weekend-deals .deal-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.weekend-deals .deal-card:hover .img-wrap img {
    transform: scale(1.05);
}

/* Badge % giảm TRONG img-wrap */
.weekend-deals .deal-card .img-wrap .discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #16a34a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    z-index: 3;
}

/* Tim giảm TRONG img-wrap */
.weekend-deals .deal-card .img-wrap .favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    color: #a0aec0;
    z-index: 3;
    transition: all .2s;
}
.weekend-deals .deal-card .img-wrap .favorite.active { color: #e53e3e; }
.weekend-deals .deal-card .img-wrap .favorite:hover  { transform: scale(1.15); }

/* – Body – */
.weekend-deals .deal-body {
    padding: 14px 16px;
    flex: 1;
}

.weekend-deals .deal-location {
    font-size: 12px;
    color: #a0aec0;
    margin-bottom: 4px;
}

.weekend-deals .deal-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 8px;
    line-height: 1.3;
}

.weekend-deals .deal-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}

.weekend-deals .deal-rating .score {
    background: #9d174d;
    color: #fff;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 13px;
}

.weekend-deals .deal-rating strong { font-weight: 600; color: #2d3748; }
.weekend-deals .deal-rating .reviews { color: #a0aec0; font-size: 13px; }

/* – Footer giá – */
.weekend-deals .deal-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #f0f4f8;
    gap: 8px;
}

.weekend-deals .deal-price .price-left {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.weekend-deals .deal-price .old {
    text-decoration: line-through;
    color: #a0aec0;
    font-size: 12px;
}

.weekend-deals .deal-price .new {
    font-size: 18px;
    font-weight: 800;
    color: #e60023;
}

.weekend-deals .deal-price .per {
    font-size: 12px;
    color: #a0aec0;
}

.weekend-deals .deal-price .btn-deal {
    display: inline-block;
    background: #0071c2;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s;
    flex-shrink: 0;
}

.weekend-deals .deal-price .btn-deal:hover {
    background: #005999;
}

@media(max-width: 768px) {
    .deal-grid { grid-template-columns: 1fr; }
}

.favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    border: none;
}

.favorite:hover {
    transform: scale(1.1);
}

.favorite.active {
    color: red;
    font-weight: bold;
    transform: scale(1.2);
}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 12px 18px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 14px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== PROMO ===== */

.promo-wrapper {
    padding: 50px 0;
    background: #ffffff;
}

.promo-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.promo-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    transform: translateY(-4px);
}

.promo-left {
    flex: 1;
}

.promo-right {
    flex: 1;
    text-align: right;
}

.promo-right img {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
}

.promo-title {
    font-size: 30px;
    margin-bottom: 8px;
    font-weight: 700;
}

.promo-desc {
    color: #666;
    margin-bottom: 25px;
    font-size: 16px;
}

.promo-left h3 {
    font-size: 22px;
    margin: 10px 0;
}

.promo-left p {
    color: #444;
    line-height: 1.6;
}

.promo-button {
    display: inline-block;
    margin-top: 15px;
    background: #0071c2;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.promo-button:hover {
    background: #005fa3;
    transform: scale(1.05);
}

/* ===== LOGIN ===== */

.login-header {
    background: #9d174d;
    padding: 18px 0;
}

.header-container {
    width: 90%;
    margin: auto;
}

.login-wrapper {
    background: #ffffff;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: white;
    padding: 40px;
    width: 420px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.login-box h2 {
    margin-bottom: 15px;
}

.login-sub {
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

label {
    font-size: 14px;
    font-weight: 600;
}

input {
    width: 100%;
    padding: 12px;
    margin: 8px 0 20px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

input:focus {
    border-color: #0071c2;
    outline: none;
}

.btn-primary {
    width: 100%;
    background: #0071c2;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

.btn-primary:hover {
    background: #005999;
}

.divider {
    text-align: center;
    margin: 25px 0;
    font-size: 13px;
    color: #777;
}

.social-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0;
    border: 1px solid #ddd;
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
}

.social-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.btn-register {
    display: block;
    text-align: center;
    background: #28a745;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

.btn-register:hover {
    background: #218838;
}

.forgot-link {
    display: block;
    text-align: center;
    margin-top: 5px;
    color: #e91e8c;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* ===== OTP VERIFY ===== */

.otp-wrapper {
    background: #f2f2f2;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.otp-box {
    background: #fff;
    padding: 40px;
    width: 420px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.otp-box h2 {
    margin-bottom: 10px;
}

.otp-text {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.otp-inputs input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

.otp-inputs input:focus {
    border-color: #0071c2;
    outline: none;
}

.btn-otp {
    width: 100%;
    background: #0071c2;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

.btn-otp:hover {
    background: #005999;
}

.resend {
    margin-top: 15px;
    font-size: 13px;
}

.resend a {
    color: #0071c2;
    text-decoration: none;
}

.resend a:hover {
    text-decoration: underline;
}

/* ===== OTP VERIFY ===== */


/* • FIX LAYOUT fh-footer & deal-price • */

/* Khách sạn nổi bật - footer */
.fh-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 16px !important;
}

.fh-price-wrap {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.fh-footer .card-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
}

.fh-footer .btn-outline,
.fh-footer .fh-book-btn {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Ưu đãi cuối tuần - footer giá */
.deal-price {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

.deal-price .price-left {
    width: 100% !important;
}

.deal-price .card-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
}

.deal-price .btn-outline,
.deal-price .btn-deal {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Khách sạn nổi bật - footer */

/* ================================================
BLOG DETAIL (blog-detail.php)
================================================ */

/* – Chung – */
.bd-container { max-width:1100px; margin:0 auto; padding:0 20px; }

/* – Hero – */
.bd-hero { position:relative; height:480px; overflow:hidden; }
.bd-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.bd-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.2) 60%,transparent 100%); display:flex; align-items:flex-end; padding-bottom:40px; }
.bd-cat-badge { display:inline-block; padding:4px 14px; background:#e91e8c; color:#fff; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; border-radius:20px; margin-bottom:14px; }
.bd-hero-title { font-size:30px; font-weight:900; color:#fff; margin:0 0 16px; line-height:1.3; text-shadow:0 2px 12px rgba(0,0,0,.4); max-width:800px; }
.bd-hero-meta { display:flex; gap:22px; flex-wrap:wrap; }
.bd-hero-meta span { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.88); font-size:13px; font-weight:600; }

/* – Layout – */
.bd-layout { padding:48px 0 60px; background:#fff; }
.bd-grid { display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }

/* – Main content – */
.bd-summary-box { background:linear-gradient(135deg,#fdf4ff,#f0f9ff); border-left:4px solid #e91e8c; border-radius:0 10px 10px 0; padding:18px 22px; margin-bottom:32px; }
.bd-summary-box p { font-size:15.5px; color:#2d3748; line-height:1.8; margin:0; font-style:italic; font-weight:500; }

.bd-content { font-size:15px; color:#374151; line-height:1.85; }
.bd-content h3 { font-size:19px; font-weight:800; color:#1a202c; margin:36px 0 14px; padding-bottom:8px; border-bottom:2px solid #e9ecef; }
.bd-content p { margin:0 0 18px; }
.bd-content strong { color:#1a202c; font-weight:700; }
.bd-content ul, .bd-content ol { padding-left:22px; margin-bottom:18px; }
.bd-content li { margin-bottom:8px; }

/* Tags */
.bd-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:32px 0; padding-top:24px; border-top:1px solid #e9ecef; }
.bd-tags-label { font-size:13px; font-weight:700; color:#4a5568; }
.bd-tag { padding:5px 13px; background:#f1f5f9; color:#4a5568; font-size:12px; font-weight:600; border-radius:20px; text-decoration:none; transition:all .2s; }
.bd-tag:hover { background:#e91e8c; color:#fff; }

/* Share */
.bd-share { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.bd-share-label { font-size:13px; font-weight:700; color:#4a5568; }
.bd-share-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
.bd-share-fb { background:#1877f2; color:#fff; }
.bd-share-fb:hover { background:#1465d0; }
.bd-share-copy { background:#f1f5f9; color:#4a5568; }
.bd-share-copy:hover { background:#e2e8f0; }

/* Nav bài trước/sau */
.bd-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.bd-nav-btn { display:flex; align-items:center; gap:12px; padding:16px 18px; background:#f8f9fa; border-radius:12px; text-decoration:none; border:1.5px solid #e9ecef; transition:all .2s; }
.bd-nav-btn:hover { border-color:#e91e8c; background:#fdf4ff; }
.bd-nav-next { justify-content:flex-end; text-align:right; }
.bd-nav-btn span { display:block; font-size:11px; color:#a0aec0; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.bd-nav-btn strong { display:block; font-size:13px; color:#2d3748; font-weight:700; line-height:1.4; }
.bd-nav-btn svg { flex-shrink:0; color:#e91e8c; }

/* – Sidebar – */
.bd-sidebar { display:flex; flex-direction:column; gap:24px; position:sticky; top:24px; }
.bd-widget { background:#fff; border:1.5px solid #e9ecef; border-radius:14px; padding:20px; }
.bd-widget-title { font-size:14px; font-weight:800; color:#1a202c; text-transform:uppercase; letter-spacing:1px; margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #e9ecef; }

/* Author */
.bd-author-card { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bd-author-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#e91e8c,#f472b6); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bd-author-role { font-size:11px; color:#a0aec0; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin:0 0 2px; }
.bd-author-name { font-size:14px; font-weight:800; color:#1a202c; margin:0; }
.bd-author-desc { font-size:13px; color:#718096; line-height:1.6; margin:0; }

/* Related */
.bd-related-item { display:flex; gap:12px; text-decoration:none; padding:10px 0; border-bottom:1px solid #f0f4f8; transition:opacity .2s; }
.bd-related-item:last-child { border-bottom:none; padding-bottom:0; }
.bd-related-item:hover { opacity:.8; }
.bd-related-item img { width:72px; height:60px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.bd-related-cat { font-size:10px; font-weight:800; color:#e91e8c; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px; }
.bd-related-title { font-size:13px; font-weight:700; color:#2d3748; margin:0 0 4px; line-height:1.4; }
.bd-related-date  { font-size:11px; color:#a0aec0; }

/* Categories */
.bd-cat-item { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid #f0f4f8; text-decoration:none; color:#4a5568; font-size:13.5px; font-weight:600; transition:color .2s; }
.bd-cat-item:last-child { border-bottom:none; }
.bd-cat-item:hover { color:#e91e8c; }
.bd-cat-count { background:#fdf4ff; color:#e91e8c; font-size:11px; font-weight:800; padding:2px 9px; border-radius:20px; }

/* – More section – */
.bd-more-section { background:#f8f9fa; padding:56px 0 64px; border-top:1px solid #e9ecef; }
.bd-more-title { font-size:22px; font-weight:800; color:#1a202c; margin:0 0 28px; }
.bd-more-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.bd-more-card  { text-decoration:none; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 3px 14px rgba(0,0,0,.07); transition:all .25s; display:block; }
.bd-more-card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.12); }
.bd-more-img   { position:relative; height:180px; overflow:hidden; }
.bd-more-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.bd-more-card:hover .bd-more-img img { transform:scale(1.06); }
.bd-more-cat   { position:absolute; top:10px; left:10px; padding:3px 10px; background:#e91e8c; color:#fff; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; border-radius:20px; }
.bd-more-body  { padding:16px 18px 20px; }
.bd-more-date  { font-size:11.5px; color:#a0aec0; margin:0 0 8px; font-weight:600; }
.bd-more-body h4 { font-size:14px; font-weight:800; color:#1a202c; margin:0 0 8px; line-height:1.4; }
.bd-more-body p  { font-size:13px; color:#718096; line-height:1.6; margin:0; }
.bd-back-btn { display:inline-flex; align-items:center; padding:12px 28px; background:#e91e8c; color:#fff; font-size:14px; font-weight:700; text-decoration:none; border-radius:10px; transition:background .2s; }
.bd-back-btn:hover { background:#be185d; }

/* – Responsive – */
@media(max-width:900px) {
    .bd-grid { grid-template-columns:1fr; }
    .bd-sidebar { position:static; }
    .bd-more-grid { grid-template-columns:1fr 1fr; }
    .bd-hero { height:320px; }
    .bd-hero-title { font-size:22px; }
}
@media(max-width:580px) {
    .bd-more-grid { grid-template-columns:1fr; }
    .bd-nav { grid-template-columns:1fr; }
    .bd-hero { height:260px; }
    .bd-hero-title { font-size:18px; }
}

/* ================================================
BLOG list (blog-list.php)
================================================ */
/* – Chung – */
.bl-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* – Hero – */
.bl-hero {
    background: linear-gradient(135deg, #0a2e5c 0%, #e91e8c 60%, #f472b6 100%);
    padding: 48px 20px 52px;
    text-align: center;
}
.bl-hero-label {
    font-size: 11px; font-weight: 800; letter-spacing: 3px;
    color: rgba(255,255,255,.7); text-transform: uppercase; margin: 0 0 10px;
}
.bl-hero-title {
    font-size: 36px; font-weight: 900; color: #fff;
    margin: 0 0 10px; text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.bl-hero-sub { font-size: 15px; color: rgba(255,255,255,.8); margin: 0; }

/* – Tab lắc danh mục – */
.bl-filter-bar {
    background: #fff;
    border-bottom: 2px solid #e9ecef;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.bl-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.bl-tabs::-webkit-scrollbar { display: none; }
.bl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #4a5568;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
    border: 1.5px solid transparent;
}
.bl-tab:hover {
    background: #fdf4ff;
    color: #e91e8c;
}
.bl-tab.active {
    background: #e91e8c;
    color: #fff;
    border-color: #e91e8c;
}
.bl-tab-count {
    background: rgba(255,255,255,.25);
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
}
.bl-tab:not(.active) .bl-tab-count {
    background: #e2e8f0;
    color: #718096;
}

/* – Thông báo đang lắc – */
.bl-filter-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fdf4ff;
    border: 1.5px solid #f5d0fe;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 28px;
    font-size: 13.5px;
    color: #2d3748;
    flex-wrap: wrap;
}
.bl-filter-notice svg { color: #e91e8c; flex-shrink: 0; }
.bl-filter-notice strong { color: #e91e8c; }
.bl-filter-clear {
    margin-left: auto;
    font-size: 12px;
    color: #718096;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all .2s;
}
.bl-filter-clear:hover { background: #fee2e2; color: #e53e3e; border-color: #fca5a5; }

/* – Empty state – */
.bl-empty {
    text-align: center;
    padding: 60px 0;
    color: #a0aec0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.bl-empty p { font-size: 15px; margin: 0; }

/* – Section – */
.bl-section { background: #ffffff; padding: 40px 0 72px; }

/* – Danh sách độc – */
.bl-list { display: flex; flex-direction: column; gap: 40px; }

/* – Card – */
.bl-card {
    background: #ffffff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.bl-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0,0,0,.14); }

/* – Ảnh – */
.bl-img-link { display: block; text-decoration: none; }
.bl-img-wrap { position: relative; height: 380px; overflow: hidden; }
.bl-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bl-card:hover .bl-img-wrap img { transform: scale(1.04); }
.bl-img-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 60px 22px 18px;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.bl-img-meta {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
}

/* – Body – */
.bl-body { padding: 24px 30px 28px; }
.bl-cat {
    display: inline-block; padding: 3px 12px;
    background: #fdf4ff; color: #e91e8c;
    font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    border-radius: 20px; margin-bottom: 12px;
}
.bl-title { font-size: 20px; font-weight: 800; color: #1a202c; margin: 0 0 12px; line-height: 1.45; }
.bl-title a { color: inherit; text-decoration: none; transition: color .2s; }
.bl-title a:hover { color: #e91e8c; }
.bl-summary { font-size: 14.5px; color: #4a5568; line-height: 1.8; margin: 0 0 20px; }
.bl-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bl-read-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #a0aec0; font-weight: 600; }
.bl-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px; background: #e91e8c; color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; text-decoration: none;
    border-radius: 8px; transition: background .2s, transform .2s;
}
.bl-btn:hover { background: #be185d; transform: translateY(-1px); }

/* – Responsive – */
@media (max-width: 768px) {
    .bl-img-wrap   { height: 240px; }
    .bl-body       { padding: 18px 18px 22px; }
    .bl-title      { font-size: 17px; }
    .bl-hero-title { font-size: 26px; }
    .bl-tab        { padding: 7px 14px; font-size: 12px; }
}

/* ================================================
BLOG section (blog-section.php)
================================================ */
.hs-blog {
    background: #fff;                      /* nền trắng */
    padding: 50px 0 58px;
    border-top: 1px solid #f0f4f8;
}

/* Header */
.hs-blog-header {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
}
.hs-blog-label {
    font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
    color: #e91e8c; text-transform: uppercase; margin: 0 0 5px;
}
.hs-blog-title {
    font-size: 24px; font-weight: 800;
    color: #1a202c; margin: 0 0 4px;
}
.hs-blog-sub { font-size: 14px; color: #718096; margin: 0; }
.hs-blog-viewall {
    display: inline-flex; align-items: center; gap: 6px;
    color: #e91e8c; font-size: 14px; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: gap .2s;
}
.hs-blog-viewall:hover { gap: 10px; }

/* Grid 3 cột – khớp với .fh-grid và .deal-grid */
.hs-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* Card */
.hs-blog-card {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    display: flex; flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hs-blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.13); }

/* ảnh */
.hs-blog-img-link { display: block; text-decoration: none; }
.hs-blog-img { position: relative; height: 200px; overflow: hidden; }
.hs-blog-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.hs-blog-card:hover .hs-blog-img img { transform: scale(1.06); }
.hs-blog-cat {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; background: #e91e8c; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; border-radius: 20px;
}

/* Body */
.hs-blog-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.hs-blog-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.hs-blog-meta span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: #a0aec0; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
}
.hs-blog-post-title { font-size: 14.5px; font-weight: 800; color: #1a202c; margin: 0 0 9px; line-height: 1.45; }
.hs-blog-post-title a { color: inherit; text-decoration: none; transition: color .2s; }
.hs-blog-post-title a:hover { color: #e91e8c; }
.hs-blog-summary { font-size: 13px; color: #718096; line-height: 1.7; margin: 0 0 14px; flex: 1; }
.hs-blog-btn {
    display: inline-block; align-self: flex-start;
    padding: 8px 18px; background: #e91e8c; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; text-decoration: none;
    border-radius: 7px; transition: background .2s, transform .2s;
}
.hs-blog-btn:hover { background: #be185d; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 900px) { .hs-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) {
    .hs-blog-grid { grid-template-columns: 1fr; }
    .hs-blog-header { flex-direction: column; align-items: flex-start; }
}

/* ================================================
CHANGE PASSWORD & EDIT PROFILE (change_password.php)
================================================ */
/* Dùng lại CSS từ edit_profile */
.ep-page { background:#f7f9fc; min-height:85vh; padding:36px 20px 60px; font-family:'Segoe UI',Arial,sans-serif; }
.ep-container { max-width:900px; margin:0 auto; display:flex; gap:24px; align-items:flex-start; }
.ep-sidebar { width:240px; flex-shrink:0; background:white; border-radius:16px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; }
.ep-avatar-wrap { background:linear-gradient(135deg,#9d174d,#f472b6); padding:24px 16px; text-align:center; }
.ep-avatar { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); border:3px solid rgba(255,255,255,.4); color:white; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.ep-user-name { color:white; font-weight:700; font-size:15px; }
.ep-user-role { display:inline-block; margin-top:5px; background:rgba(255,255,255,.2); color:rgba(255,255,255,.85); font-size:11px; padding:2px 10px; border-radius:20px; text-transform:capitalize; }
.ep-sidebar-info { padding:14px 16px; border-bottom:1px solid #f0f4f8; }
.ep-sinfo-row { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#718096; padding:5px 0; }
.ep-sidebar-links { padding:8px; }
.ep-slink { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px; font-size:13px; color:#4a5568; text-decoration:none; transition:all .15s; }
.ep-slink:hover { background:#f0f6ff; color:#e91e8c; }
.ep-main { flex:1; }
.ep-card { background:white; border-radius:16px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; }
.ep-card-head { padding:20px 24px; border-bottom:1px solid #f0f4f8; background:#fafcff; }
.ep-title { font-size:18px; font-weight:700; color:#1a202c; margin:0 0 3px; }
.ep-sub { font-size:13px; color:#a0aec0; margin:0; }
.ep-alert { display:flex; align-items:center; gap:8px; margin:16px 24px 0; padding:12px 14px; border-radius:10px; font-size:13.5px; font-weight:500; }
.ep-alert-success { background:#f0fff4; color:#276749; border:1px solid #9ae6b4; }
.ep-alert-error   { background:#fff5f5; color:#c53030; border:1px solid #fed7d7; }
.ep-form { padding:24px; }
.ep-field label { display:block; font-size:13px; font-weight:600; color:#4a5568; margin-bottom:7px; }
.required { color:#e53e3e; }
.ep-input-wrap { position:relative; }
.ep-input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); display:flex; pointer-events:none; }
.ep-field input { width:100%; padding:11px 40px 11px 36px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#2d3748; box-sizing:border-box; font-family:inherit; transition:border-color .2s; }
.ep-field input:focus { outline:none; border-color:#e91e8c; box-shadow:0 0 0 3px rgba(233,30,140,.1); }
.ep-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:2px; display:flex; }
.ep-form-footer { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; border-top:1px solid #f0f4f8; }
.ep-btn-cancel { padding:10px 20px; border-radius:9px; border:1.5px solid #e2e8f0; background:white; color:#4a5568; font-size:14px; font-weight:600; text-decoration:none; transition:all .2s; }
.ep-btn-cancel:hover { background:#f7fafc; }
.ep-btn-save { display:flex; align-items:center; gap:7px; padding:10px 22px; border-radius:9px; background:linear-gradient(135deg,#e91e8c,#f472b6); color:white; font-size:14px; font-weight:700; border:none; cursor:pointer; box-shadow:0 3px 10px rgba(233,30,140,.28); transition:all .2s; }
.ep-btn-save:hover { transform:translateY(-1px); }

/* Password specific */
.pw-divider {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:#a0aec0;
    border-top:1px solid #f0f4f8; padding-top:18px; margin-bottom:18px;
}
.pw-strength-bar {
    height:4px; background:#e2e8f0; border-radius:4px;
    margin-top:8px; overflow:hidden;
}
.pw-strength-fill { height:100%; width:0; border-radius:4px; transition:all .3s; }
.pw-strength-text { font-size:11.5px; margin-top:4px; font-weight:600; }
.pw-match-text    { font-size:11.5px; margin-top:4px; font-weight:600; }

@media(max-width:700px) {
    .ep-container { flex-direction:column; }
    .ep-sidebar { width:100%; }
}

/* ================================================
deals (deals.php)
================================================ */
/* – GUEST HINT BAR – */
.guest-hint-bar {
    background: linear-gradient(135deg, #fffbeb, #fff8e1);
    border-bottom: 2px solid #fbbf24;
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: wrap;
    font-size: 14px; color: #92400e; text-align: center;
}
.guest-hint-actions { display: flex; gap: 8px; flex-shrink: 0; }
.hint-btn-register {
    background: #f59e0b; color: #fff !important;
    padding: 7px 18px; border-radius: 8px;
    text-decoration: none !important; font-size: 13px; font-weight: 700;
    transition: background .2s;
}
.hint-btn-register:hover { background: #d97706; }
.hint-btn-login {
    background: #fff; color: #92400e !important;
    border: 1.5px solid #fbbf24; padding: 7px 18px; border-radius: 8px;
    text-decoration: none !important; font-size: 13px; font-weight: 600;
    transition: all .2s;
}
.hint-btn-login:hover { background: #fef3c7; }

/* – BASE – */
.deals-container { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; }

/* – HERO – */
.deals-hero { background: linear-gradient(135deg, #0a2e5c 0%, #e91e8c 65%, #f472b6 100%); padding: 0; }
.deals-hero-inner { max-width: 1100px; margin: 0 auto; padding: 40px 20px; display: flex; align-items: center; gap: 40px; }
.deals-hero-text { flex: 1; color: #fff; }
.deals-hero-tag { display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.deals-hero-text h1 { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.deals-hero-text p  { font-size: 15px; color: rgba(255,255,255,.8); margin-bottom: 24px; }
.deals-hero-stats { display: flex; align-items: center; gap: 20px; }
.dhs-item strong { font-size: 22px; font-weight: 800; display: block; }
.dhs-item span   { font-size: 12px; color: rgba(255,255,255,.7); }
.dhs-divider     { width: 1px; height: 36px; background: rgba(255,255,255,.25); }
.deals-hero-img  { flex-shrink: 0; width: 280px; }
.deals-hero-img img { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.3); }

/* – PROMO BAR – */
.deals-promo-bar { background: #fff; border-bottom: 1px solid #f0f4f8; padding: 12px 0; }
.promo-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.ptag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.ptag-red    { background: #fff5f0; color: #c53030; border: 1px solid #fed7c7; }
.ptag-green  { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.ptag-blue   { background: #ebf8ff; color: #2b6cb0; border: 1px solid #bee3f8; }
.ptag-orange { background: #fffbeb; color: #b7791f; border: 1px solid #fef3c7; }

/* – FILTER BAR – */
.deals-filter-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.deal-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.deal-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 16px; border-radius: 30px; border: 1.5px solid #e2e8f0; background: #fff; font-size: 13px; font-weight: 600; color: #4a5568; text-decoration: none; transition: all .2s; }
.deal-tab:hover { border-color: #90cdf4; color: #e91e8c; }
.deal-tab.active { background: #e91e8c; color: #fff; border-color: #e91e8c; }
.tab-num { background: rgba(0,0,0,.08); padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.deal-tab.active .tab-num { background: rgba(255,255,255,.25); }
.sort-select { padding: 8px 14px; border: 1.5px solid #e2e8f0; border-radius: 9px; font-size: 13px; color: #2d3748; background: #fff; cursor: pointer; font-family: inherit; }
.sort-select:focus { outline: none; border-color: #e91e8c; }

/* – GRID – */
.deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 36px; }

/* – CARD – */
.deal-card-v2 { background: #fff; border-radius: 16px; box-shadow: 0 3px 14px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; transition: all .25s; position: relative; }
.deal-card-v2:hover { transform: translateY(-5px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.deal-card-v2.hot   { box-shadow: 0 3px 14px rgba(224,92,26,.15); }
.dcv2-img { position: relative; height: 195px; overflow: hidden; }
.dcv2-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.deal-card-v2:hover .dcv2-img img { transform: scale(1.05); }
.dcv2-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.badge-discount { background: #16a34a; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 6px; }
.badge-hot      { background: #e05c1a; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.badge-weekend  { background: #5a4fcf; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; }
.dcv2-save-ribbon { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); color: #fff; font-size: 12px; font-weight: 600; padding: 18px 12px 8px; text-align: center; }
.dcv2-body     { padding: 14px 16px; flex: 1; }
.dcv2-location { font-size: 11.5px; color: #a0aec0; margin-bottom: 4px; }
.dcv2-name     { font-size: 15px; font-weight: 700; color: #1a202c; margin: 0 0 6px; line-height: 1.3; }
.dcv2-desc     { font-size: 12.5px; color: #718096; margin: 0 0 10px; line-height: 1.5; }
.dcv2-rating   { display: flex; align-items: center; gap: 7px; }
.dcv2-score    { background: #9d174d; color: #fff; padding: 3px 8px; border-radius: 5px; font-weight: 700; font-size: 12.5px; }
.dcv2-rlabel   { font-weight: 600; color: #2d3748; font-size: 13px; }
.dcv2-rcount   { color: #a0aec0; font-size: 12.5px; }
.dcv2-footer   { padding: 12px 16px; border-top: 1px solid #f0f4f8; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dcv2-price-wrap { display: flex; flex-direction: column; }
.dcv2-old { font-size: 12px; color: #a0aec0; text-decoration: line-through; }
.dcv2-new { font-size: 19px; font-weight: 800; color: #e60023; display: flex; align-items: baseline; gap: 3px; }
.dcv2-per { font-size: 12px; color: #a0aec0; font-weight: 400; }
.dcv2-btn { display: inline-block; background: #0071c2; color: #fff !important; padding: 9px 18px; border-radius: 9px; text-decoration: none !important; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s; flex-shrink: 0; cursor: pointer; }
.dcv2-btn:hover { background: #005999; }
.dcv2-btn-group  { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.dcv2-btn-detail { display: inline-block; background: #fff; color: #e91e8c !important; border: 2px solid #e91e8c; padding: 7px 14px; border-radius: 9px; text-decoration: none !important; font-size: 13px; font-weight: 700; white-space: nowrap; text-align: center; transition: all .2s; }
.dcv2-btn-detail:hover { background: #ebf8ff; transform: translateY(-1px); }
.deals-empty { text-align: center; padding: 60px 20px; color: #a0aec0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.deals-empty p { font-size: 15px; }
.deals-cta { background: linear-gradient(135deg, #ebf8ff, #f0fff4); border: 1.5px solid #bee3f8; border-radius: 16px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 10px; }
.deals-cta-text h3 { font-size: 17px; font-weight: 700; color: #1a202c; margin-bottom: 4px; }
.deals-cta-text p  { font-size: 13.5px; color: #718096; margin: 0; }
.deals-cta-btn { display: inline-block; background: #e91e8c; color: #fff !important; padding: 11px 24px; border-radius: 10px; text-decoration: none !important; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .2s; flex-shrink: 0; }
.deals-cta-btn:hover { background: #1558a0; }

@media(max-width: 768px) {
    .deals-grid { grid-template-columns: 1fr; }
    .deals-hero-inner { flex-direction: column; }
    .deals-hero-img { width: 100%; }
    .deals-filter-bar { flex-direction: column; align-items: flex-start; }
    .deals-cta { flex-direction: column; }
    .guest-hint-bar { flex-direction: column; }
}

/* ================================================
edit_profile (edit_profile.php)
================================================ */
.ep-page {
    background: #f7f9fc; min-height: 85vh;
    padding: 36px 20px 60px;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}
.ep-container {
    max-width: 900px; margin: 0 auto;
    display: flex; gap: 24px; align-items: flex-start;
}

/* Sidebar */
.ep-sidebar {
    width: 240px; flex-shrink: 0;
    background: white; border-radius: 16px;
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    overflow: hidden;
}
.ep-avatar-wrap {
    background: linear-gradient(135deg,#9d174d,#f472b6);
    padding: 24px 16px; text-align: center;
}
.ep-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.4);
    color: white; font-size: 26px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
}
.ep-user-name { color: white; font-weight: 700; font-size: 15px; }
.ep-user-role {
    display: inline-block; margin-top: 5px;
    background: rgba(255,255,255,.2); color: rgba(255,255,255,.85);
    font-size: 11px; padding: 2px 10px; border-radius: 20px;
    text-transform: capitalize;
}
.ep-sidebar-info { padding: 14px 16px; border-bottom: 1px solid #f0f4f8; }
.ep-sinfo-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: #718096; padding: 5px 0;
}
.ep-sidebar-links { padding: 8px; }
.ep-slink {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 8px;
    font-size: 13px; color: #4a5568; text-decoration: none;
    transition: all .15s;
}
.ep-slink:hover { background: #f0f6ff; color: #e91e8c; }

/* Main */
.ep-main { flex: 1; }
.ep-card {
    background: white; border-radius: 16px;
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    overflow: hidden;
}
.ep-card-head {
    padding: 20px 24px; border-bottom: 1px solid #f0f4f8;
    background: #fafcff;
}
.ep-title { font-size: 18px; font-weight: 700; color: #1a202c; margin: 0 0 3px; }
.ep-sub   { font-size: 13px; color: #a0aec0; margin: 0; }

/* Alerts */
.ep-alert {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 24px 0; padding: 12px 14px; border-radius: 10px;
    font-size: 13.5px; font-weight: 500;
}
.ep-alert-success { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; }
.ep-alert-error   { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }

/* Form */
.ep-form { padding: 24px; }
.ep-field-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin-bottom: 24px;
}
.ep-field-full { grid-column: span 2; }
.ep-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #4a5568; margin-bottom: 7px;
}
.required { color: #e53e3e; }

.ep-input-wrap { position: relative; }
.ep-input-icon {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%); display: flex; pointer-events: none;
}
.ep-field input {
    width: 100%; padding: 11px 12px 11px 36px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; color: #2d3748; box-sizing: border-box;
    font-family: inherit; transition: border-color .2s;
}
.ep-field input:focus { outline: none; border-color: #e91e8c; box-shadow: 0 0 0 3px rgba(233,30,140,.1); }

.ep-form-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 18px; border-top: 1px solid #f0f4f8;
}
.ep-btn-cancel {
    padding: 10px 20px; border-radius: 9px;
    border: 1.5px solid #e2e8f0; background: white;
    color: #4a5568; font-size: 14px; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.ep-btn-cancel:hover { background: #f7fafc; border-color: #cbd5e0; }

.ep-btn-save {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 22px; border-radius: 9px;
    background: linear-gradient(135deg,#e91e8c,#f472b6);
    color: white; font-size: 14px; font-weight: 700;
    border: none; cursor: pointer;
    box-shadow: 0 3px 10px rgba(233,30,140,.28);
    transition: all .2s;
}
.ep-btn-save:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(233,30,140,.38); }

@media(max-width:700px) {
    .ep-container { flex-direction: column; }
    .ep-sidebar { width: 100%; }
    .ep-field-grid { grid-template-columns: 1fr; }
    .ep-field-full { grid-column: span 1; }
}


/* ================================================
home.php
================================================ */
/* – WEEKEND DEALS – */
.weekend-deals { margin:50px 0; }
.weekend-deals h2 { font-size:24px; font-weight:800; color:#1a202c; margin-bottom:4px; }
.muted-text { color:#718096; font-size:14px; margin-bottom:22px; }
.deal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:20px; }
.deal-card { background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; transition:all .25s; }
.deal-card:hover { transform:translateY(-5px); box-shadow:0 8px 28px rgba(0,0,0,.13); }
.deal-card .img-wrap { position:relative; height:190px; overflow:hidden; border-radius:14px 14px 0 0; }
.deal-card .img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.deal-card:hover .img-wrap img { transform:scale(1.05); }
.deal-card .img-wrap .discount-badge { position:absolute; top:10px; left:10px; z-index:3; background:#16a34a; color:#fff; font-size:12px; font-weight:700; padding:4px 9px; border-radius:6px; }
.deal-card .img-wrap .deal-badge { position:absolute; top:40px; left:10px; z-index:3; background:#f97316; color:#fff; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; }
.deal-card .img-wrap:not(:has(.discount-badge)) .deal-badge { top:10px; }
.deal-body { padding:14px 16px; flex:1; }
.deal-location { font-size:12px; color:#a0aec0; margin-bottom:4px; }
.deal-body h3 { font-size:16px; font-weight:700; color:#1a202c; margin:0 0 8px; line-height:1.3; }
.deal-rating { display:flex; align-items:center; gap:7px; font-size:13px; }
.deal-rating .score { background:#9d174d; color:#fff; padding:3px 8px; border-radius:5px; font-weight:700; font-size:13px; }
.deal-rating strong { font-weight:600; color:#2d3748; }
.deal-rating .reviews { color:#a0aec0; }
.deal-price { display:flex; flex-direction:column; align-items:stretch; padding:12px 16px; border-top:1px solid #f0f4f8; gap:10px; }
.price-left { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; min-width:0; }
.deal-price .old { text-decoration:line-through; color:#a0aec0; font-size:12px; }
.deal-price .new { font-size:18px; font-weight:800; color:#e60023; }
.deal-price .per { font-size:12px; color:#a0aec0; }

/* – CARD ACTIONS – */
.card-actions { display:flex; gap:6px; flex-shrink:0; }
.btn-outline { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:8px; background:#f0f6ff; color:#e91e8c; font-size:12.5px; font-weight:700; text-decoration:none; border:1.5px solid #bee3f8; white-space:nowrap; transition:all .2s; }
.btn-outline:hover { background:#fae8ff; border-color:#e91e8c; transform:translateY(-1px); }
.btn-deal, .fh-book-btn { display:inline-flex; align-items:center; padding:8px 12px; border-radius:8px; background:#0071c2; color:#fff !important; font-size:12.5px; font-weight:700; text-decoration:none !important; white-space:nowrap; transition:background .2s; cursor:pointer; }
.btn-deal:hover, .fh-book-btn:hover { background:#005999; }

/* – KHÁCH SẠN NỔI BẬT – */
.featured-hotels { background:#fff; padding:50px 0; }
.fh-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.fh-title { font-size:24px; font-weight:800; color:#1a202c; margin:0 0 4px; }
.fh-sub   { font-size:14px; color:#718096; margin:0; }
.fh-view-all { display:inline-flex; align-items:center; gap:6px; color:#e91e8c; font-size:14px; font-weight:700; text-decoration:none; transition:gap .2s; }
.fh-view-all:hover { gap:10px; }
.fh-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fh-card { background:white; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; transition:all .25s; }
.fh-card:hover { transform:translateY(-5px); box-shadow:0 8px 28px rgba(0,0,0,.13); }
.fh-img-wrap { position:relative; height:190px; overflow:hidden; }
.fh-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.fh-card:hover .fh-img-wrap img { transform:scale(1.05); }
.fh-discount { position:absolute; top:10px; left:10px; background:#16a34a; color:white; font-size:12px; font-weight:700; padding:4px 9px; border-radius:6px; }
.fh-body { padding:14px 16px; flex:1; }
.fh-location { font-size:12px; color:#a0aec0; margin-bottom:4px; }
.fh-name { font-size:16px; font-weight:700; color:#1a202c; margin:0 0 6px; line-height:1.3; }
.fh-desc { font-size:13px; color:#718096; margin:0 0 10px; line-height:1.5; }
.fh-rating { display:flex; align-items:center; gap:7px; font-size:13px; }
.fh-score { background:#9d174d; color:white; padding:3px 8px; border-radius:5px; font-weight:700; font-size:13px; }
.fh-rlabel { font-weight:600; color:#2d3748; }
.fh-rcount { color:#a0aec0; }
.fh-footer { padding:12px 16px; border-top:1px solid #f0f4f8; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.fh-price-wrap { display:flex; align-items:baseline; gap:5px; min-width:0; }
.fh-old   { font-size:12px; color:#a0aec0; text-decoration:line-through; }
.fh-price { font-size:18px; font-weight:800; color:#e60023; }
.fh-per   { font-size:12px; color:#a0aec0; }

/* – RESPONSIVE – */
@media(max-width:768px) {
    .deal-grid, .fh-grid { grid-template-columns:1fr; }
    .deal-price, .fh-footer { flex-wrap:wrap; }
    .card-actions { width:100%; justify-content:flex-end; }
}

/* – DESTINATION CARD CLICKABLE – */
a.destination-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform .3s, box-shadow .3s;
}
a.destination-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
a.destination-card::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,53,128,0);
    transition: background .3s;
    border-radius: 12px;
}
a.destination-card:hover::after {
    background: rgba(0,53,128,.2);
}
.destination-overlay {
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
a.destination-card:hover .destination-overlay {
    transform: translateY(-4px);
}
.dest-hotel-count {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
    margin-bottom: 4px;
}
.dest-explore {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 16px;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    width: fit-content;
    backdrop-filter: blur(3px);
    transition: background .2s, border-color .2s;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s, transform .25s;
}
a.destination-card:hover .dest-explore {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateX(-50%) translateY(10px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* hotel_details */
.hd-nav-bar{position:sticky;top:0;z-index:100;background:#9d174d;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.hd-nav-container{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.hd-nav-tabs{display:flex}
.hd-nav-tab{color:rgba(255,255,255,.8);text-decoration:none;padding:14px 18px;font-size:13.5px;font-weight:600;border-bottom:3px solid transparent;transition:all .2s}
.hd-nav-tab:hover,.hd-nav-tab.active{color:#fff;border-bottom-color:#fbbf24}
.hd-nav-book{background:#fbbf24;color:#9d174d;padding:8px 20px;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;transition:all .2s;flex-shrink:0}
.hd-nav-book:hover{background:#f59e0b}
.hd-wrapper{background:#f0f4f8;padding:24px 0 60px}
.hd-cont{max-width:1120px;margin:0 auto;padding:0 20px}
.hd-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.hd-title-wrap{flex:1}
.hd-badges-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.hd-tag-deal{background:#f97316;color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px}
.hd-tag-discount{background:#16a34a;color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px}
.hd-name{font-size:28px;font-weight:800;color:#1a202c;margin:0 0 10px;line-height:1.3}
.hd-sub-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hd-loc{font-size:13.5px;color:#718096}
.hd-score-wrap{display:flex;align-items:center;gap:8px}
.hd-score-box{background:#9d174d;color:#fff;padding:5px 11px;border-radius:7px;font-weight:800;font-size:15px}
.hd-score-lbl{font-weight:700;font-size:14px}
.hd-review-n{color:#a0aec0;font-size:13px}
.hd-cta-btn{display:inline-block;background:linear-gradient(135deg,#e91e8c,#f472b6);color:#fff;padding:13px 28px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 4px 16px rgba(233,30,140,.35);transition:all .2s;white-space:nowrap;flex-shrink:0}
.hd-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(233,30,140,.45)}
.hd-gallery{display:grid;grid-template-columns:3fr 2fr;gap:10px;margin-bottom:28px;border-radius:16px;overflow:hidden;height:420px}
.hd-gallery-main{position:relative;overflow:hidden;cursor:zoom-in}
.hd-gallery-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.hd-gallery-main:hover img{transform:scale(1.03)}
.hd-gallery-disc{position:absolute;top:14px;left:14px;background:#16a34a;color:#fff;font-size:14px;font-weight:700;padding:5px 14px;border-radius:8px;box-shadow:0 2px 8px rgba(22,163,74,.4)}
.hd-gallery-count-badge{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.65);color:#fff;font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:20px;backdrop-filter:blur(4px);cursor:pointer}
.hd-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hd-thumb{overflow:hidden;position:relative;cursor:pointer}
.hd-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.hd-thumb:hover img{transform:scale(1.06)}
.hd-thumb-active{outline:3px solid #fbbf24;outline-offset:-3px}
.hd-thumb-more img{filter:brightness(.55)}
.hd-thumb-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
/* Lightbox – base (overridden by newer block below) */
.hd-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.hd-card{background:#fff;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}
.hd-card-title{font-size:19px;font-weight:800;color:#1a202c;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid #f0f4f8}
.hd-desc{font-size:14px;color:#4a5568;line-height:1.85;margin:0}
.hd-amenities-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hd-amenity-item{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;transition:all .15px}
.hd-amenity-item:hover{background:#ebf8ff;border-color:#bee3f8}
.hd-amen-icon{font-size:20px;flex-shrink:0}
.hd-amen-name{font-size:13px;font-weight:700;color:#2d3748}
.hd-amen-note{font-size:11.5px;color:#718096}
.hd-date-picker{display:flex;align-items:center;gap:14px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 20px;margin-bottom:20px}
.hd-dp-field{display:flex;flex-direction:column;gap:3px}
.hd-dp-field label{font-size:11px;font-weight:700;color:#a0aec0;text-transform:uppercase}
.hd-dp-field input{border:none;background:transparent;font-size:14px;color:#2d3748;cursor:pointer;font-family:inherit}
.hd-dp-field input:focus{outline:none}
.hd-dp-arrow{font-size:18px;color:#a0aec0}
.hd-dp-nights{margin-left:auto;background:#ebf8ff;color:#2b6cb0;border:1px solid #bee3f8;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700}
.hd-table{border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden}
.hd-table-head{display:grid;grid-template-columns:2.2fr .6fr 1.1fr 1.3fr 140px;background:#9d174d;color:#fff;padding:13px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;gap:12px}
.hd-room-row{display:grid;grid-template-columns:2.2fr .6fr 1.1fr 1.3fr 140px;padding:18px;border-bottom:1px solid #f0f4f8;gap:12px;align-items:center;transition:background .15s}
.hd-room-row:last-child{border-bottom:none}
.hd-room-row:hover{background:#f8fafc}
.hd-room-urgent{background:#fffbeb !important;border-left:3px solid #f59e0b}
.hd-no-rooms{padding:30px;text-align:center;color:#a0aec0}
.hd-room-name{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hd-room-icon{font-size:18px}
.hd-room-link{font-size:15px;font-weight:700;color:#0071c2}
.hd-room-tags{display:flex;flex-wrap:wrap;gap:5px}
.hd-rtag{background:#f0f4f8;color:#4a5568;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
.hd-room-guests{display:flex;flex-wrap:wrap;gap:2px;font-size:16px;align-self:flex-start;padding-top:4px}
.hd-room-price-wrap{text-align:right}
.hd-room-old{font-size:12px;color:#a0aec0;text-decoration:line-through}
.hd-room-price{font-size:19px;font-weight:800;color:#e91e8c}
.hd-room-per{font-size:11px;color:#a0aec0}
.hd-room-tax{font-size:11px;color:#16a34a}
.hd-room-opts{display:flex;flex-direction:column;gap:5px}
.hd-opt-item{font-size:12px;color:#4a5568}
.hd-opt-free{color:#16a34a;font-weight:600}
.hd-opt-urgent{color:#e53e3e;font-size:11.5px;font-weight:700}
.hd-opt-avail{color:#16a34a;font-size:11.5px;font-weight:600}
.hd-btn-reserve{display:block;text-align:center;background:#0071c2;color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;box-shadow:0 3px 10px rgba(0,113,194,.25)}
.hd-btn-reserve:hover{background:#005aa3;transform:translateY(-1px)}
.hd-rules{display:flex;flex-direction:column}
.hd-rule-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #f0f4f8}
.hd-rule-row:last-child{border-bottom:none}
.hd-rule-icon{width:28px;text-align:center;font-size:16px;flex-shrink:0}
.hd-rule-label{flex:1;color:#4a5568;font-weight:600;font-size:14px}
.hd-rule-val{color:#1a202c;font-size:14px}
.hd-price-card,.hd-score-card,.hd-loc-card,.hd-quick-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.07);margin-bottom:16px;border:1px solid rgba(0,0,0,.04)}
.hd-pc-label{font-size:11px;color:#718096;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
.hd-pc-old{font-size:13px;color:#a0aec0;text-decoration:line-through;margin-top:4px}
.hd-pc-price{font-size:28px;font-weight:800;color:#e91e8c;margin:4px 0}
.hd-pc-price span{font-size:14px;font-weight:400;color:#718096}
.hd-pc-save{display:inline-block;background:#f0fdf4;color:#16a34a;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;border:1px solid #bbf7d0;margin:4px 0}
.hd-pc-total{font-size:13px;color:#718096;background:#f0f6ff;border-radius:8px;padding:6px 10px;margin:6px 0}
.hd-pc-total strong{color:#e91e8c}
.hd-pc-btn{display:block;text-align:center;background:linear-gradient(135deg,#e91e8c,#f472b6);color:#fff;padding:13px;border-radius:11px;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 4px 14px rgba(233,30,140,.3);margin:12px 0 10px;transition:all .2s}
.hd-pc-btn:hover{transform:translateY(-2px)}
.hd-pc-notes{font-size:12px;color:#718096;display:flex;flex-direction:column;gap:4px}
.hd-pc-datepick{margin:10px 0 4px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.hd-pc-dp-row{display:grid;grid-template-columns:1fr 1fr}
.hd-pc-dp-col{display:flex;flex-direction:column;padding:8px 10px;border-right:1px solid #e2e8f0}
.hd-pc-dp-col:last-child{border-right:none}
.hd-pc-dp-lbl{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.hd-pc-dp-input{border:none;outline:none;font-size:13px;font-weight:600;color:#1a202c;width:100%;cursor:pointer;background:transparent;padding:0}
.hd-pc-dp-input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;width:14px}
.hd-sc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hd-sc-num{background:#e91e8c;color:#fff;padding:8px 14px;border-radius:10px;font-weight:800;font-size:22px;flex-shrink:0}
.hd-sc-lbl{font-weight:700;font-size:15px}
.hd-sc-reviews{font-size:12px;color:#718096}
.hd-sc-bars{display:flex;flex-direction:column;gap:9px}
.hd-sc-row{display:flex;align-items:center;gap:8px;font-size:12px}
.hd-sc-cat{width:64px;color:#4a5568;flex-shrink:0}
.hd-sc-bar{flex:1;background:#e2e8f0;border-radius:99px;height:7px;overflow:hidden}
.hd-sc-fill{height:100%;background:linear-gradient(90deg,#9d174d,#e91e8c);border-radius:99px;transition:width .6s ease}
.hd-sc-val{width:28px;text-align:right;font-weight:700;color:#2d3748}
.hd-lc-title,.hd-qc-title{font-size:14px;font-weight:800;color:#1a202c;margin-bottom:10px}
.hd-lc-addr{font-size:13px;color:#4a5568;line-height:1.6}
.hd-lc-region{font-size:12px;color:#718096;margin-top:6px}
.hd-qc-list{display:flex;flex-direction:column;gap:7px}
.hd-qc-item{font-size:13px;color:#4a5568}
.hd-rooms-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
@media(max-width:960px){.hd-grid{grid-template-columns:1fr}.hd-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}.hd-price-card{grid-column:1/-1}}
@media(max-width:700px){.hd-gallery{grid-template-columns:1fr;height:auto}.hd-gallery-grid{grid-template-columns:repeat(2,1fr);height:160px}.hd-gallery-main{height:280px}.hd-table-head,.hd-room-row{grid-template-columns:1fr 100px}.hd-th-guest,.hd-th-opt,.hd-room-guests,.hd-room-opts{display:none}.hd-amenities-grid{grid-template-columns:1fr}.hd-header{flex-direction:column}.hd-nav-tab{padding:12px 10px;font-size:12px}.hd-lb-prev{left:6px}.hd-lb-next{right:6px}}


/* hotels */
/* • BASE • */
.hotel-wrapper { background:#ffffff; padding:40px 0; min-height:80vh; }
.container     { max-width:1120px; margin:0 auto; padding:0 20px; }

.page-hero { margin-bottom:16px; }
.page-title { font-size:28px; font-weight:800; color:#1a202c; margin:0 0 6px; }
.page-subtitle { color:#718096; font-size:14px; margin:0; }

/* – MỤC: Breadcrumb */
.loc-breadcrumb {
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:#718096; margin-bottom:8px;
}
.loc-breadcrumb a { color:#e91e8c; text-decoration:none; }
.loc-breadcrumb a:hover { text-decoration:underline; }

/* – MỤC: Location tabs */
.loc-tabs-wrap { overflow-x:auto; margin-bottom:20px; scrollbar-width:none; }
.loc-tabs-wrap::-webkit-scrollbar { display:none; }
.loc-tabs { display:flex; gap:8px; flex-wrap:nowrap; padding-bottom:2px; }
.loc-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:30px;
    border:1.5px solid #e2e8f0; background:#fff;
    font-size:13px; font-weight:600; color:#4a5568;
    text-decoration:none; white-space:nowrap;
    transition:all .2s; flex-shrink:0;
}
.loc-tab:hover { border-color:#90cdf4; color:#e91e8c; background:#f0f8ff; }
.loc-tab.active { background:#e91e8c; color:#fff; border-color:#e91e8c; }
.loc-tab-count {
    background:rgba(0,0,0,.1); padding:1px 7px;
    border-radius:20px; font-size:11px; font-weight:700;
}
.loc-tab.active .loc-tab-count { background:rgba(255,255,255,.25); }

/* • BỘ LỌC • */
.sf-wrapper {
    background:#fff; border-radius:16px;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    padding:20px 22px; margin-bottom:24px;
}
.sf-main-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #f0f4f8;
}
.sf-field { position:relative; flex:1; min-width:150px; display:flex; flex-direction:column; gap:3px; }
.sf-field.sf-keyword { flex:2; }
.sf-icon { position:absolute; left:10px; top:11px; color:#a0aec0; pointer-events:none; font-style:normal; }
.sf-field input[type=text], .sf-field input[type=date] {
    width:100%; padding:10px 10px 10px 32px;
    border:1.5px solid #e2e8f0; border-radius:10px;
    font-size:13.5px; color:#2d3748; transition:border-color .2s;
    box-sizing:border-box; font-family:inherit;
}
.sf-field input:focus { outline:none; border-color:#e91e8c; box-shadow:0 0 0 3px rgba(233,30,140,.1); }
.sf-date-label { font-size:11px; color:#a0aec0; padding-left:10px; }
.sf-nights-badge {
    display:flex; align-items:center; gap:5px;
    background:#ebf8ff; color:#2b6cb0; border:1px solid #bee3f8;
    padding:8px 14px; border-radius:10px; font-size:13px; font-weight:700;
    white-space:nowrap; flex-shrink:0;
}
.sf-search-btn {
    display:flex; align-items:center; gap:7px;
    padding:11px 22px; border-radius:10px;
    background:linear-gradient(135deg,#e91e8c,#f472b6);
    color:#fff; font-size:14px; font-weight:700;
    border:none; cursor:pointer; white-space:nowrap;
    box-shadow:0 3px 12px rgba(233,30,140,.3); transition:all .2s; flex-shrink:0;
}
.sf-search-btn:hover { transform:translateY(-2px); box-shadow:0 5px 18px rgba(233,30,140,.4); }
.sf-filters-row { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.sf-filter-group { display:flex; flex-direction:column; gap:8px; flex:1; min-width:170px; }
.sf-filter-label { font-size:11.5px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.4px; }
.sf-price-inputs { display:flex; align-items:center; gap:6px; }
.sf-price-inputs input {
    flex:1; padding:8px 10px; min-width:0;
    border:1.5px solid #e2e8f0; border-radius:8px;
    font-size:13px; color:#2d3748; box-sizing:border-box;
}
.sf-price-inputs span { color:#a0aec0; flex-shrink:0; }
.sf-price-presets { display:flex; gap:5px; flex-wrap:wrap; }
.sf-preset {
    padding:4px 10px; border-radius:20px;
    border:1.5px solid #e2e8f0; background:#fff;
    font-size:11.5px; font-weight:600; color:#4a5568;
    cursor:pointer; transition:all .15s;
}
.sf-preset:hover, .sf-preset.active { background:#ebf8ff; border-color:#90cdf4; color:#e91e8c; }
.sf-rating-opts { display:flex; gap:5px; flex-wrap:wrap; }
.sf-rating-opt {
    padding:5px 11px; border-radius:20px;
    border:1.5px solid #e2e8f0; background:#fff;
    font-size:12px; font-weight:600; color:#4a5568;
    cursor:pointer; transition:all .15s;
}
.sf-rating-opt input { display:none; }
.sf-rating-opt:hover, .sf-rating-opt.active { background:#fffbeb; border-color:#f6ad55; color:#b7791f; }
.sf-select {
    padding:8px 12px; border:1.5px solid #e2e8f0; border-radius:8px;
    font-size:13px; color:#2d3748; background:#fff; cursor:pointer; font-family:inherit;
}
.sf-reset-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:8px 15px; border-radius:8px;
    background:#fff5f5; color:#c53030; border:1.5px solid #fed7d7;
    font-size:12.5px; font-weight:600; text-decoration:none;
    transition:all .15s; align-self:flex-end; white-space:nowrap; cursor:pointer;
}
.sf-reset-btn:hover { background:#fed7d7; }

.result-bar {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:16px; font-size:13.5px; color:#4a5568;
    background:#fff; padding:12px 16px; border-radius:10px;
    box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.result-bar strong { color:#e91e8c; }
.result-nights { color:#718096; }

/* • HOTEL CARD • */
.hotel-card {
    display:flex; background:#fff; border-radius:16px;
    box-shadow:0 2px 14px rgba(0,0,0,.07);
    margin-bottom:20px; overflow:hidden;
    transition:all .3s ease; border:1.5px solid transparent;
}
.hotel-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 30px rgba(0,0,0,.13);
    border-color:#e91e8c22;
}
.hotel-img { position:relative; flex-shrink:0; overflow:hidden; }
.hotel-img img { width:240px; height:200px; object-fit:cover; display:block; transition:transform .4s ease; }
.hotel-card:hover .hotel-img img { transform:scale(1.05); }
.discount-badge {
    position:absolute; top:10px; left:10px;
    background:#16a34a; color:#fff;
    font-size:12px; padding:4px 10px; border-radius:6px; font-weight:700;
    box-shadow:0 2px 6px rgba(22,163,74,.4);
}
.deal-badge {
    position:absolute; top:40px; left:10px;
    background:#f97316; color:#fff;
    font-size:11px; padding:4px 9px; border-radius:6px; font-weight:700;
}
.img-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%);
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:12px; opacity:0; transition:opacity .3s;
}
.img-overlay span { color:#fff; font-size:13px; font-weight:700; letter-spacing:.5px; }
.hotel-card:hover .img-overlay { opacity:1; }
.hotel-info { flex:1; padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.hotel-info h3 { color:#0071c2; margin:0; font-size:19px; font-weight:800; line-height:1.3; transition:color .2s; }
.hotel-card:hover .hotel-info h3 { color:#005aa3; }
.location { font-size:13px; color:#718096; margin:0; }
.desc { font-size:13.5px; color:#4a5568; margin:0; line-height:1.6; flex:1; }
.quick-amenities { display:flex; gap:6px; flex-wrap:wrap; }
.amenity-tag { background:#f0f4f8; color:#4a5568; font-size:11.5px; padding:3px 9px; border-radius:20px; font-weight:600; border:1px solid #e2e8f0; }
.review-row { display:flex; align-items:center; gap:8px; margin-top:auto; }
.rating-box { background:#9d174d; color:#fff; padding:4px 10px; border-radius:7px; font-weight:800; font-size:14px; flex-shrink:0; }
.rating-label { font-weight:700; font-size:13.5px; }
.review-count { color:#a0aec0; font-size:13px; }
.hotel-price {
    width:196px; flex-shrink:0; padding:18px 16px;
    display:flex; flex-direction:column; gap:5px; justify-content:flex-end;
    border-left:1px solid #f0f4f8;
    background:linear-gradient(180deg, #fafcff 0%, #f5f9ff 100%);
}
.old-price { text-decoration:line-through; color:#a0aec0; font-size:13px; margin:0; }
.save-badge { display:inline-block; background:#f0fdf4; color:#16a34a; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; border:1px solid #bbf7d0; width:fit-content; }
.price { font-size:22px; font-weight:800; color:#e60023; margin:0; line-height:1.2; }
.per-night { font-size:12px; font-weight:400; color:#718096; }
.total-price { font-size:12px; color:#718096; margin:0; background:#f0f6ff; border-radius:6px; padding:4px 8px; }
.total-price strong { color:#e91e8c; }
.price-note { font-size:11px; color:#a0aec0; margin:0; }
.btn-detail {
    display:block; text-align:center; text-decoration:none;
    background:#fff; color:#e91e8c; border:2px solid #e91e8c;
    padding:9px 12px; border-radius:10px; font-size:13px; font-weight:700;
    transition:all .2s; margin-top:6px;
}
.btn-detail:hover { background:#ebf8ff; transform:translateY(-1px); }
.btn-book {
    display:block; text-align:center; text-decoration:none;
    background:linear-gradient(135deg,#0071c2,#e91e8c);
    color:#fff; padding:10px 12px; border-radius:10px;
    font-size:13px; font-weight:700;
    box-shadow:0 3px 10px rgba(0,113,194,.3); transition:all .2s;
}
.btn-book:hover { background:linear-gradient(135deg,#005aa3,#0071c2); transform:translateY(-1px); box-shadow:0 5px 15px rgba(0,113,194,.4); }
.empty-state { text-align:center; padding:80px 0; color:#a0aec0; }
.empty-icon { font-size:60px; margin-bottom:16px; }
.empty-state p { font-size:16px; margin:0; }

@media(max-width:768px) {
    .hotel-card { flex-direction:column; }
    .hotel-img img { width:100%; height:220px; }
    .hotel-price { width:100%; border-left:none; border-top:1px solid #f0f4f8; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
    .sf-main-row { flex-direction:column; }
    .sf-field { min-width:100%; }
    .loc-tabs { gap:6px; }
}


/* • my_bookings • */
@keyframes popIn {
    from { transform:scale(.9); opacity:0; }
    to   { transform:scale(1);  opacity:1; }
}
.mybk-page {
    max-width: 1060px; margin: 36px auto;
    padding: 0 20px 60px; font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif; min-height: 80vh;
}
.mybk-header {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg,#9d174d,#f472b6);
    border-radius: 16px; padding: 18px 24px; margin-bottom: 20px;
    box-shadow: 0 6px 22px rgba(233,30,140,.28);
}
.mybk-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: white; }
.mybk-new-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: white; color: #e91e8c; padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none; transition: all .2s;
}
.mybk-new-btn:hover { background: #eef4fb; }
.mybk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.tab-item {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 30px;
    font-size: 13px; font-weight: 600; text-decoration: none; color: #4a5568;
    background: white; border: 1.5px solid #e2e8f0; transition: all .2s;
}
.tab-item:hover { border-color: #90cdf4; color: #e91e8c; }
.tab-item.active { background: #e91e8c; color: white; border-color: #e91e8c; }
.tab-count { background: rgba(0,0,0,.08); color: inherit; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.tab-item.active .tab-count { background: rgba(255,255,255,.25); }
.mybk-empty { text-align: center; padding: 60px 20px; color: #a0aec0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mybk-empty p { font-size: 15px; }
.mybk-list { display: flex; flex-direction: column; gap: 16px; }
.bk-card { background: white; border-radius: 16px; box-shadow: 0 3px 14px rgba(0,0,0,.08); overflow: hidden; transition: box-shadow .2s; }
.bk-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.bk-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #f0f4f8; background: #fafcff; }
.bk-head-left { display: flex; align-items: center; gap: 12px; }
.bk-hotel-icon { width: 40px; height: 40px; border-radius: 10px; background: #eef4fb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk-hotel-name { font-size: 15px; font-weight: 700; color: #1a202c; }
.bk-hotel-addr { font-size: 12px; color: #a0aec0; margin-top: 1px; }
.bk-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.bk-status-badge { font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.bk-order-code { font-size: 11px; color: #a0aec0; font-family: monospace; }
.bk-card-body { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.bk-col { padding: 16px 20px; border-right: 1px solid #f0f4f8; }
.bk-col:last-child { border-right: none; }
.bk-col-title { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #718096; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
.bk-info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 5px 0; border-bottom: 1px solid #f7f9fc; gap: 8px; }
.bk-info-row:last-child { border-bottom: none; }
.bk-info-label { font-size: 12px; color: #a0aec0; font-weight: 500; }
.bk-info-val   { font-size: 13px; color: #2d3748; font-weight: 500; text-align: right; }
.bk-total-box { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg,#fff5f0,#fff); border: 1.5px solid #fbd38d; border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; color: #4a5568; }
.bk-total-box strong { font-size: 16px; font-weight: 800; color: #e05c1a; }
.refund-notice { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-align: center; }
.refund-pending  { background:#ebf8ff; border:1.5px solid #bee3f8; color:#e91e8c; }
.refund-approved { background:#f0fff4; border:1.5px solid #9ae6b4; color:#276749; }
.refund-rejected { background:#fff5f5; border:1.5px solid #fed7d7; color:#c53030; }
.refund-toolate  { background:#fff5f5; border:1.5px solid #fed7d7; color:#c53030; }
.refund-info-box { margin-top: 10px; padding: 10px 12px; background: #fffbeb; border: 1.5px solid #fbd38d; border-radius: 10px; }
.refund-info-text { font-size: 12px; color: #718096; text-align: center; margin-bottom: 8px; line-height: 1.6; }
.btn-refund-action {
    display: block; text-align: center; padding: 8px;
    background: #e53e3e; color: white; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s;
}
.btn-refund-action:hover { background: #c53030; color: white; }
.btn-cancel-action {
    display: block; text-align: center; padding: 9px 12px; margin-top: 8px;
    background: #fff5f5; border: 1.5px solid #fed7d7; color: #c53030;
    border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none;
    cursor: pointer; transition: all .2s;
}
.btn-cancel-action:hover { background: #fed7d7; color: #c53030; }
@media(max-width:760px) {
    .bk-card-body { grid-template-columns: 1fr; }
    .bk-col { border-right: none; border-bottom: 1px solid #f0f4f8; }
    .bk-col:last-child { border-bottom: none; }
    .mybk-tabs { gap: 4px; }
    .tab-item { font-size: 12px; padding: 6px 12px; }
}

/* • profile • */
.profile-page-wrapper {
    min-height: 87vh;
    background: #f0f5fb;
}

.profile-wrap {
    display: flex;
    gap: 22px;
    max-width: 1020px;
    margin: 0 auto;
    padding: 36px 20px;
    align-items: flex-start;
    font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif;
}

/* – SIDEBAR – */
.profile-sidebar {
    width: 252px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sidebar-top {
    background: linear-gradient(140deg, #9d174d 0%, #f472b6 100%);
    border-radius: 16px;
    padding: 28px 18px 22px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(233,30,140,.28);
}

.big-avatar {
    width: 68px; height: 68px; border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 3px solid rgba(255,255,255,.38);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: white;
    margin: 0 auto 12px;
}

.sb-name {
    color: white; font-size: 16px; font-weight: 700;
    margin: 0 0 8px; text-transform: capitalize;
}

.role-pill {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: white; font-size: 11px; font-weight: 600;
    padding: 3px 12px; border-radius: 20px; text-transform: capitalize;
}

.sidebar-meta {
    background: white; border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    display: flex; flex-direction: column; gap: 10px;
}

.meta-item {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: #4a5568; line-height: 1.45;
    word-break: break-all;
}
.meta-item svg { flex-shrink: 0; margin-top: 2px; color: #90adc4; }

.sidebar-btns { display: flex; flex-direction: column; gap: 8px; }

.sb-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: all .2s; cursor: pointer;
}

.sb-btn.primary {
    background: linear-gradient(135deg,#e91e8c,#f472b6);
    color: white;
    box-shadow: 0 3px 10px rgba(233,30,140,.3);
}
.sb-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(233,30,140,.42); color: white; }

.sb-btn.outline {
    background: white; color: #e91e8c;
    border: 1.5px solid #c9def4;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.sb-btn.outline:hover { background: #eef4fb; color: #e91e8c; }

/* – MAIN – */
.profile-main { flex: 1; display: flex; flex-direction: column; gap: 18px; }

/* Stats */
.stats-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}

.stat-box {
    background: white; border-radius: 14px;
    padding: 16px 14px;
    display: flex; align-items: center; gap: 13px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    transition: transform .2s;
}
.stat-box:hover { transform: translateY(-2px); }

.stat-ico {
    width: 46px; height: 46px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.stat-val { font-size: 20px; font-weight: 800; color: #1a202c; line-height: 1; }
.stat-lbl { font-size: 11.5px; color: #718096; margin-top: 4px; font-weight: 500; }

/* Section box */
.section-box {
    background: white; border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    overflow: hidden;
}

.section-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f4f8;
}

.section-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 700; color: #1a202c;
}

.see-all-link {
    font-size: 13px; font-weight: 600; color: #e91e8c; text-decoration: none;
}
.see-all-link:hover { text-decoration: underline; }

/* Booking list */
.bk-list { padding: 6px 12px 10px; }

.bk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 8px; border-radius: 10px;
    transition: background .15s;
    border-bottom: 1px solid #f7f9fc;
}
.bk-item:last-child { border-bottom: none; }
.bk-item:hover { background: #f8fbff; }

.bk-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: #eef4fb;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.bk-hotel { font-size: 14px; font-weight: 600; color: #2d3748; }
.bk-sub   { font-size: 12px; color: #718096; margin-top: 2px; }
.bk-code  { font-size: 11px; color: #a0aec0; margin-top: 2px; font-family: monospace; }

.bk-status {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px;
    white-space: nowrap;
}

/* Empty */
.empty-box {
    padding: 38px 20px; text-align: center; color: #a0aec0;
    display: flex; flex-direction: column; align-items: center;
}
.empty-box p { margin-top: 10px; font-size: 14px; }

/* Responsive */
@media(max-width:720px) {
    .profile-wrap { flex-direction: column; }
    .profile-sidebar { width: 100%; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================
REVIEW SECTION (includes/review_section.php)
================================================ */
.rv-section { padding: 40px 0; border-top: 2px solid #e9ecef; margin-top: 40px; }
.rv-header  { margin-bottom: 28px; }
.rv-title   { font-size: 22px; font-weight: 800; color: #1a202c; margin: 0 0 20px; }
.rv-overview { display: flex; gap: 32px; background: #f8f9fa; border-radius: 16px; padding: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.rv-score-box { text-align: center; min-width: 120px; }
.rv-score-num { font-size: 52px; font-weight: 900; color: #e91e8c; line-height: 1; }
.rv-stars-display { display: flex; justify-content: center; gap: 2px; margin: 6px 0; }
.rv-score-label { font-size: 13px; font-weight: 700; color: #2d3748; }
.rv-score-count { font-size: 12px; color: #a0aec0; margin-top: 4px; }
.rv-bars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 200px; }
.rv-bar-row { display: flex; align-items: center; gap: 10px; }
.rv-bar-label { font-size: 12px; font-weight: 700; color: #4a5568; width: 28px; text-align: right; flex-shrink: 0; }
.rv-bar-track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.rv-bar-fill  { height: 100%; background: linear-gradient(90deg, #f6c90e, #f59e0b); border-radius: 10px; transition: width .6s ease; }
.rv-bar-pct   { font-size: 11px; color: #a0aec0; width: 30px; flex-shrink: 0; }
.rv-star-icon path { fill: #e2e8f0; stroke: none; }
.rv-star-icon.filled path { fill: #f6c90e; }
.rv-login-notice, .rv-already-notice { display: flex; align-items: center; gap: 8px; background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 10px; padding: 12px 16px; font-size: 13.5px; color: #92400e; margin-bottom: 24px; }
.rv-login-notice a { color: #e91e8c; font-weight: 700; }
.rv-already-notice { background: #f0fdf4; border-color: #86efac; color: #166534; }
.rv-write-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; background: #e91e8c; color: #fff; font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; transition: background .2s; margin-bottom: 20px; }
.rv-write-btn:hover { background: #be185d; }
.rv-form { background: #f8fafc; border: 1.5px solid #e9ecef; border-radius: 16px; padding: 24px; margin-bottom: 28px; }
.rv-form-title { font-size: 16px; font-weight: 800; color: #1a202c; margin: 0 0 18px; }
.rv-field { margin-bottom: 16px; }
.rv-field label { display: block; font-size: 13px; font-weight: 700; color: #4a5568; margin-bottom: 6px; }
.rv-select, .rv-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #2d3748; font-family: inherit; outline: none; transition: border-color .2s; box-sizing: border-box; background: #fff; }
.rv-select:focus, .rv-textarea:focus { border-color: #e91e8c; }
.rv-textarea { resize: vertical; min-height: 90px; }
.rv-star-picker { display: flex; align-items: center; gap: 4px; }
.rv-star-btn { background: none; border: none; cursor: pointer; padding: 2px; line-height: 0; transition: transform .15s; }
.rv-star-btn:hover { transform: scale(1.15); }
.rv-star-btn svg path { fill: #e2e8f0; stroke: none; transition: fill .15s; }
.rv-star-btn.selected svg path, .rv-star-btn.hovered svg path { fill: #f6c90e; }
.rv-star-label { font-size: 13px; color: #718096; margin-left: 8px; font-weight: 600; }
.rv-form-actions { display: flex; gap: 10px; margin-top: 16px; }
.rv-submit-btn { padding: 10px 24px; background: #e91e8c; color: #fff; font-size: 13px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: background .2s; }
.rv-submit-btn:hover { background: #be185d; }
.rv-cancel-btn { padding: 10px 20px; background: #f1f5f9; color: #4a5568; font-size: 13px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; transition: background .2s; }
.rv-cancel-btn:hover { background: #e2e8f0; }
.rv-msg { margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.rv-msg.success { color: #065f46; }
.rv-msg.error   { color: #dc2626; }
.rv-empty { text-align: center; padding: 40px 0; color: #a0aec0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rv-empty p { font-size: 14px; margin: 0; }
.rv-item { padding: 20px 0; border-bottom: 1px solid #f0f4f8; }
.rv-item:last-child { border-bottom: none; }
.rv-item-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #e91e8c, #f472b6); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rv-item-info { flex: 1; }
.rv-item-name { font-size: 14px; font-weight: 700; color: #1a202c; margin: 0 0 2px; }
.rv-item-date { font-size: 12px; color: #a0aec0; margin: 0; }
.rv-item-stars { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.rv-item-rating { font-size: 13px; font-weight: 700; color: #2d3748; margin-left: 4px; }
.rv-item-comment { font-size: 14px; color: #4a5568; line-height: 1.7; margin: 0; padding-left: 52px; }
@media (max-width: 600px) {
    .rv-overview { flex-direction: column; gap: 16px; }
    .rv-item-comment { padding-left: 0; }
}

/* Phần còn lại sẽ được lưu vào file thứ 3 do dung lượng */
/* ============================================================ */

contact_floating.php
/* ============================================================ */

/* Khi được chọn */
.contact-btn.active {
    transform: scale(1.25);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    border: 3px solid #2196f3;
    animation: none; /* tắt rung khi được chọn */
}

/* ===== FLOATING CONTACT ===== */

.contact-floating {
    position: fixed;
    right: 20px;
    bottom: 300px; /* toggle button gon, khong can cao */
    z-index: 999;
}

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: #e91e8c;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(233,30,140,0.4);
    z-index: 1000;
    transition: background 0.2s, transform 0.2s;
}
.scroll-top-btn:hover { background: #be185d; transform: translateY(-2px); }
.scroll-top-btn.visible { display: flex; }

/* ===== POPUP TƯ VẤN NHANH ===== */
.support-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
    align-items: center;
    justify-content: center;
}
.support-popup-overlay.open { display: flex; }
.support-popup {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 24px;
    width: 340px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    animation: popupIn 0.25s ease;
}
@keyframes popupIn {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.support-popup h3 {
    font-size: 16px; font-weight: 700; color: #1a202c;
    margin: 0 0 4px;
}
.support-popup p {
    font-size: 13px; color: #718096; margin: 0 0 18px;
}
.support-popup label {
    display: block; font-size: 12px; font-weight: 600;
    color: #4a5568; margin-bottom: 5px;
}
.support-popup input,
.support-popup textarea {
    width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px;
    padding: 9px 12px; font-size: 13px; color: #2d3748;
    box-sizing: border-box; margin-bottom: 12px;
    transition: border-color 0.2s;
}
.support-popup input:focus,
.support-popup textarea:focus {
    outline: none; border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
}
.support-popup textarea { height: 72px; resize: none; }
.support-popup .sp-submit {
    width: 100%; padding: 10px; background: #e91e8c;
    color: #fff; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.support-popup .sp-submit:hover { background: #be185d; }
.support-popup .sp-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 20px;
    color: #a0aec0; cursor: pointer; line-height: 1;
}
.support-popup .sp-close:hover { color: #4a5568; }
.support-popup .sp-msg {
    font-size: 13px; text-align: center; margin-top: 10px;
    padding: 8px; border-radius: 6px; display: none;
}
.support-popup .sp-msg.success { background: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
.support-popup .sp-msg.error   { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }

/* ===== LIVE CHAT POPUP ===== */
.livechat-popup {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 86px;
    width: 300px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 1050;
    overflow: hidden;
    animation: popupIn 0.22s ease;
}
.livechat-popup.open { display: block; }
.livechat-header {
    background: linear-gradient(135deg, #e91e8c, #00b4d8);
    color: #fff; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
}
.livechat-header .lc-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.livechat-header .lc-info strong { font-size: 14px; display: block; }
.livechat-header .lc-info span   { font-size: 11px; opacity: 0.85; }
.livechat-header .lc-close {
    margin-left: auto; background: none; border: none;
    color: #fff; font-size: 18px; cursor: pointer; opacity: 0.8;
}
.livechat-header .lc-close:hover { opacity: 1; }
.livechat-messages {
    height: 180px; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 8px;
    background: #f7fafc;
}
.lc-msg {
    max-width: 85%; padding: 8px 12px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.4;
}
.lc-msg.bot { background: #e8f0fe; color: #1a202c; align-self: flex-start; border-bottom-left-radius: 4px; }
.lc-msg.user { background: #e91e8c; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.livechat-input {
    display: flex; border-top: 1px solid #e2e8f0;
    padding: 10px 12px; gap: 8px; background: #fff;
}
.livechat-input input {
    flex: 1; border: 1.5px solid #e2e8f0; border-radius: 20px;
    padding: 7px 14px; font-size: 13px; outline: none;
}
.livechat-input input:focus { border-color: #e91e8c; }
.livechat-input button {
    background: #e91e8c; color: #fff; border: none;
    border-radius: 50%; width: 34px; height: 34px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.2s;
}
.livechat-input button:hover { background: #be185d; }

/* Wrapper: chi xu ly height animation (overflow:hidden o day) */
.contact-buttons-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.contact-buttons-wrap.open {
    max-height: 500px;
}

/* Cột icon: overflow:visible de shadow khong bi cat */
.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    padding: 6px 8px 8px 8px; /* cho shadow co cho hien */
    margin-bottom: 4px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.contact-buttons-wrap.open .contact-buttons {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Nút toggle mở/đóng */
.contact-toggle-btn {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #e91e8c, #f472b6);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background 0.3s ease;
    position: relative;
    animation: pulseToggle 2.5s infinite;
}

.contact-toggle-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #be185d, #e91e8c);
}

.contact-toggle-btn.active {
    background: linear-gradient(135deg, #e53e3e, #fc8181);
    animation: none;
    transform: rotate(0deg);
}

@keyframes pulseToggle {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    50%       { box-shadow: 0 6px 28px rgba(0,0,0,0.3); }
}

/* Ẩn/hiện icon phone vs close */
.toggle-icon-open  { transition: opacity 0.2s, transform 0.3s; }
.toggle-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg); transition: opacity 0.2s, transform 0.3s; }

.contact-toggle-btn.active .toggle-icon-open  { opacity: 0; transform: rotate(90deg); }
.contact-toggle-btn.active .toggle-icon-close { opacity: 1; transform: rotate(0deg); }

/* Label "Lien he" duoi nut toggle */
.toggle-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #4a5568;
    white-space: nowrap;
    background: rgba(255,255,255,0.92);
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    pointer-events: none;
}

/* === RESPONSIVE MOBILE cho contact floating === */
@media (max-width: 768px) {
    .contact-floating {
        bottom: 80px;
        right: 14px;
    }

    .contact-toggle-btn {
        width: 52px;
        height: 52px;
    }

    .contact-btn {
        width: 46px;
        height: 46px;
    }

    .contact-btn img {
        width: 24px;
        height: 24px;
    }

    .contact-buttons {
        gap: 10px;
        padding: 4px 6px 6px 6px;
    }

    /* Scroll top khong che toggle */
    .scroll-top-btn {
        bottom: 20px;
        right: 14px;
    }
}

@media (max-width: 480px) {
    .contact-floating {
        bottom: 75px;
        right: 12px;
    }

    .contact-toggle-btn {
        width: 48px;
        height: 48px;
    }

    .contact-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .contact-btn img {
        width: 22px;
        height: 22px;
    }

    .toggle-label {
        font-size: 10px;
    }
}

/* Button chung */
.contact-btn {
    width: 55px;
    height: 55px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease;

    /* Rung nhẹ */
    animation: shake 3s infinite;
}

/* Ảnh bên trong */
.contact-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Bo tròn riêng ảnh Zalo */
.contact-btn.zalo img {
    border-radius: 50%;
}

/* Hover */
.contact-btn:hover {
    transform: scale(1.15);
}

/* Rung nhẹ */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* ===== CHATBOT ===== */
.chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg,#007bff,#00c6ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    transition: 0.3s;
}
.chat-button:hover { transform: scale(1.1); }
.chat-button img { width: 38px; border-radius: 50%; }

.chat-box {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 400px;
    height: 550px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.chat-header {
    background: linear-gradient(45deg,#007bff,#00c6ff);
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-header-left { display: flex; align-items: center; }
.chat-header-left img {
    width: 45px; height: 45px;
    border-radius: 50%; object-fit: cover;
    margin-right: 10px; background: white; padding: 3px;
}
.chat-content {
    flex: 1; padding: 15px;
    overflow-y: auto; background: #f4f6f9;
}
.message { margin-bottom: 12px; display: flex; }
.message.user { justify-content: flex-end; }
.message.bot  { justify-content: flex-start; }
.bubble {
    max-width: 75%; padding: 10px 15px;
    border-radius: 18px; font-size: 14px; line-height: 1.4;
}
.user .bubble {
    background: #e91e8c; color: white;
    border-bottom-right-radius: 5px;
}
.bot .bubble {
    background: #e4e6eb; color: #333;
    border-bottom-left-radius: 5px;
}
.typing { font-size: 13px; color: gray; margin-bottom: 10px; }
.chat-input {
    display: flex; padding: 10px;
    border-top: 1px solid #ddd; background: #fff;
}
.chat-input input {
    flex: 1; border: 1px solid #ddd;
    border-radius: 20px; padding: 10px 15px; outline: none;
}
.chat-input button {
    margin-left: 8px; border: none;
    padding: 10px 18px; border-radius: 20px;
    background: #e91e8c; color: white; cursor: pointer;
}

/* ===== ĐỊA ĐIỂM THAM QUAN NỔI BẬT ===== */
.places-section {
    padding: 60px 0;
    background: #ffffff;
}
.places-header { margin-bottom: 36px; }
.places-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px 0;
}
.places-sub {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}
.places-group { margin-bottom: 48px; }
.places-group-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}
.places-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) { .places-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .places-grid { grid-template-columns: 1fr; } }

/* Card là thẻ <a> */
.place-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.place-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
}
.place-img-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.place-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}
.place-card:hover .place-img-wrap img { transform: scale(1.07); }
.place-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
.place-loc-tag { font-size: 0.75rem; color: #fff; font-weight: 500; }
.place-body { padding: 16px 18px 20px; }
.place-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.place-desc {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.place-readmore {
    font-size: 0.83rem;
    font-weight: 600;
    color: #e91e8c;
}
.place-card:hover .place-readmore { text-decoration: underline; }


/* ============================================================
   PLACE DETAIL PAGE
   ============================================================ */
.pd-hero { position:relative; height:480px; overflow:hidden; }
.pd-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;  /* Căn trên */
    justify-content: center;
    padding-top: 600px;  /* Điều chỉnh khoảng cách từ trên xuống */
}
.pd-hero-overlay .pd-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.pd-container { max-width:1200px; width:100%; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.pd-cat-badge {
    display:inline-block; padding:4px 14px; background:#e91e8c; color:#fff;
    font-size:11px; font-weight:800; letter-spacing:1.5px;
    text-transform:uppercase; border-radius:20px; margin-bottom:14px;
}
.pd-hero-title {
    font-size:30px; font-weight:900; color:#fff;
    margin:0 0 16px; line-height:1.3;
    text-shadow:0 2px 12px rgba(0,0,0,.4); max-width:800px;
}

/* --- LAYOUT --- */
.pd-layout { padding:48px 0; background:#fff; }
.pd-grid { display:grid; grid-template-columns:1fr 320px; gap:40px; }
@media(max-width:900px) { .pd-grid { grid-template-columns:1fr; } }

/* --- SUMMARY --- */
.pd-summary-box {
    border-left:4px solid #e91e8c;
    background:#fdf4ff;
    padding:18px 22px;
    border-radius:0 10px 10px 0;
    margin-bottom:32px;
}
.pd-summary-box p { margin:0; font-size:1rem; color:#334155; line-height:1.7; font-style:italic; }

/* --- KHÁCH SẠN GẦN ĐÓ --- */
.pd-nearby { margin-bottom:32px; }
.pd-nearby-title { font-size:1.1rem; font-weight:700; color:#1e293b; margin:0 0 16px; }
.pd-hotel-list { display:flex; flex-direction:column; gap:12px; }
.pd-hotel-card {
    display:flex; gap:14px; align-items:center;
    background:#f8fafc; border-radius:12px; overflow:hidden;
    padding:10px; text-decoration:none; color:inherit;
    transition:box-shadow 0.2s ease;
    position:relative;
}
.pd-hotel-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.pd-hotel-card img { width:90px; height:70px; object-fit:cover; border-radius:8px; flex-shrink:0; display:block; }
.pd-hotel-disc {
    position:absolute; top:10px; left:10px;
    background:#e53e3e; color:#fff;
    font-size:0.7rem; font-weight:700;
    padding:2px 7px; border-radius:10px;
}
.pd-hotel-info { display:flex; flex-direction:column; gap:3px; }
.pd-hotel-info strong { font-size:0.9rem; color:#1e293b; }
.pd-hotel-info span { font-size:0.78rem; color:#64748b; }
.pd-hotel-price { color:#007bff !important; font-size:0.82rem !important; }

/* --- ĐIỀU HƯỚNG --- */
.pd-nav { display:flex; gap:16px; justify-content:space-between; margin-top:32px; }
.pd-nav-btn {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px; border-radius:12px;
    background:#f8fafc; border:1px solid #e2e8f0;
    text-decoration:none; color:#334155;
    flex:1; transition:background 0.2s;
}
.pd-nav-btn:hover { background:#e2e8f0; }
.pd-nav-next { justify-content:flex-end; text-align:right; }
.pd-nav-btn div { display:flex; flex-direction:column; gap:2px; }
.pd-nav-btn span { font-size:0.75rem; color:#94a3b8; }
.pd-nav-btn strong { font-size:0.85rem; color:#1e293b; }

/* --- SIDEBAR --- */
.pd-sidebar { display:flex; flex-direction:column; gap:20px; }
.pd-widget { background:#f8fafc; border-radius:14px; padding:20px; }
.pd-widget-title { font-size:0.9rem; font-weight:700; color:#1e293b; margin:0 0 14px; text-transform:uppercase; letter-spacing:0.5px; }
.pd-related-item { display:flex; gap:12px; align-items:center; margin-bottom:14px; text-decoration:none; color:inherit; }
.pd-related-item img { width:60px; height:50px; object-fit:cover; border-radius:8px; flex-shrink:0; display:block; }
.pd-related-loc { font-size:0.72rem; color:#007bff; font-weight:600; }
.pd-related-name { font-size:0.83rem; font-weight:600; color:#1e293b; margin:2px 0 0; }
.pd-back-btn {
    display:inline-block; padding:10px 22px;
    background:#e91e8c; color:#fff; border-radius:8px;
    text-decoration:none; font-size:0.88rem; font-weight:600;
}
.pd-back-btn:hover { background:#0056b3; }

/* --- BOTTOM GRID --- */
.pd-more-section { padding:48px 0; background:#ffffff; }
.pd-more-title { font-size:1.4rem; font-weight:700; color:#1a202c; margin:0 0 24px; }
.pd-more-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:768px) { .pd-more-grid { grid-template-columns:1fr; } }
.pd-more-card { display:block; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.07); text-decoration:none; color:inherit; transition:transform 0.2s; }
.pd-more-card:hover { transform:translateY(-4px); }
.pd-more-img { position:relative; height:180px; overflow:hidden; }
.pd-more-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-more-loc { position:absolute; bottom:10px; left:12px; font-size:0.75rem; color:#fff; font-weight:600; background:rgba(0,0,0,0.4); padding:2px 8px; border-radius:10px; }
.pd-more-body { padding:14px 16px 18px; }
.pd-more-body h4 { font-size:0.95rem; font-weight:700; color:#1e293b; margin:0 0 8px; }
.pd-more-body p { font-size:0.82rem; color:#64748b; margin:0; line-height:1.5; }


/* ============================================================
   TRANG CHỦ - PLACES SECTION
   ============================================================ */
.places-section { padding: 60px 0; background: #fff; }
.places-header  { margin-bottom: 32px; }
.places-title   { font-size: 1.8rem; font-weight: 700; color: #1a202c; margin: 0 0 6px; }
.places-sub     { color: #64748b; font-size: 0.95rem; margin: 0; }

.places-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 900px) { .places-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .places-blog-grid { grid-template-columns: 1fr; } }

.places-blog-card {
    display: block;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s, box-shadow 0.25s;
}
.places-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.13);
}

.places-blog-img {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.places-blog-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.places-blog-card:hover .places-blog-img img { transform: scale(1.06); }

.places-blog-cat {
    position: absolute;
    top: 14px; left: 14px;
    background: #e91e8c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 1;
}

.places-blog-body { padding: 20px 22px 24px; }
.places-blog-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
    line-height: 1.35;
}
.places-blog-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.places-blog-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #e91e8c;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 6px;
    transition: background 0.2s;
}
.places-blog-card:hover .places-blog-btn { background: #0056b3; }


/* ===== HOTEL DETAIL WIDGETS ===== */
.hd-widget-card {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
}
.hd-wc-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.hd-wc-item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}
.hd-wc-item:hover { opacity: 0.8; }
.hd-wc-item img {
    width: 58px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.hd-wc-loc {
    font-size: 0.7rem;
    color: #e91e8c;
    font-weight: 600;
    display: block;
}
.hd-wc-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    margin: 2px 0 0;
    line-height: 1.3;
}

/* --- FOOTER --- */
.site-footer {
    background: #e8edf2;
    color: #1a202c;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
    margin-top: 0;
    width: 100%;        /* thêm dòng này */
    box-sizing: border-box; /* thêm dòng này */
    border-top: none !important;
}

.footer-main {
    padding: 48px 0 36px;
    border-bottom: 1px solid #e2e8f0;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 36px;
}

/* Cột 1 */
.footer-logo {
    font-size: 22px;
    font-weight: 800;
    color: #1a202c;
    letter-spacing: -.3px;
    margin-bottom: 12px;
}
.footer-desc {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0 0 18px;
}

/* Social icons */
.footer-socials { display: flex; gap: 8px; }
.fsocial {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 12px;
    transition: all .2s; flex-shrink: 0;
}
.fsocial-fb  { background: #1877f2; color: #fff; }
.fsocial-zalo{ background: #0068ff; color: #fff; }
.fsocial-ig  { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.fsocial-yt  { background: #ff0000; color: #fff; }
.fsocial:hover { transform: translateY(-2px); opacity: .9; }

/* Headings */
.footer-heading {
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e91e8c;
    display: inline-block;
}

/* Links */
.footer-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 9px;
}
.footer-links a {
    color: #4a5568; text-decoration: none;
    font-size: 13px; transition: color .15s;
}
.footer-links a:hover { color: #e91e8c; }

/* Contact */
.footer-contact {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.footer-contact li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: #4a5568;
}
.footer-contact li svg { flex-shrink: 0; margin-top: 1px; stroke: #63b3ed; }
.footer-contact a { color: #4a5568; text-decoration: none; }
.footer-contact a:hover { color: #e91e8c; }

/* Payment badges */
.footer-payment { margin-top: 18px; }
.fp-label { font-size: 11px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.fp-badge {
    background: #f0f4f8;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    padding: 4px 9px; border-radius: 5px;
}
.fp-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
@media (min-width: 900px) {
    .fp-icons { grid-template-columns: repeat(5, 1fr); }
}
.fp-badge-logo {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.fp-badge-logo {
    position: relative;
}
.fp-badge-logo:hover {
    border-color: #e91e8c;
    box-shadow: 0 2px 8px rgba(233,30,140,.12);
}
.fp-badge-logo::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a202c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 10;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.fp-badge-logo::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a202c;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 10;
}
.fp-badge-logo:hover::after,
.fp-badge-logo:hover::before {
    opacity: 1;
}
.fp-badge-logo img {
    display: block;
    width: auto;
    height: 26px;
    object-fit: contain;
    max-width: 72px;
}

/* Footer bottom */
.footer-bottom {
    background: #e8edf2 !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-top: 3px solid #1a202c !important;
}
body {
    margin: 0 !important;
    padding: 0 !important;
}
html, body {
    overflow-x: hidden;
}

.site-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.footer-bottom .footer-container {
    display: flex; align-items: center;
    justify-content: space-between;
    grid-template-columns: unset;
    gap: 0;
}
.fb-left {
    color: #2d3748 !important;
    font-size: 13px;
}
.fb-left strong {
    color: #9d174d !important;
}
.fb-right { display: flex; align-items: center; gap: 10px; }
.fb-right a { font-size: 12.5px; color: #4a5568 !important; text-decoration: none; transition: color .15s; }
.fb-right a:hover { color: #94a3b8; }
.fb-right span {
    color: #a0aec0 !important;
}

@media(max-width: 900px) {
    .footer-container { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 560px) {
    .footer-container { grid-template-columns: 1fr; }
    .footer-bottom .footer-container { flex-direction: column; gap: 8px; text-align: center; }
}



/* -- header -- */
.logo-link { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1; }
.logo-name { font-family:'Be Vietnam Pro','Segoe UI',sans-serif; font-size:20px; font-weight:700; color:#fff; letter-spacing:.3px; }
.user-trigger { 
    display:flex; align-items:center; gap:4px; background:none; border:none; 
    color: #1a202c !important; 
    padding:0; cursor:pointer; font-size:14px; font-weight:600; 
    transition:color 0.2s; user-select:none; text-decoration:none !important; font-family:inherit; 
}

.user-trigger:hover { 
    color: #e91e8c !important; 
    background:none; 
}
.header nav a.active { color: #e91e8c !important; background: rgba(233,30,140,.1); border-radius: 6px;}
.btn-login-nav { background:#fff !important; color:#e91e8c !important; font-weight:700 !important; padding:8px 18px !important; border-radius:8px !important; border:2px solid #fff !important; box-shadow:0 2px 8px rgba(0,0,0,.12) !important; }
.btn-login-nav:hover { background:#fdf2f8 !important; color:#be185d !important; border-color:#fdf2f8 !important; }

/* -- NAV CONTACT DROPDOWN -- */
.nav-contact-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-contact-btn {
    display: flex; align-items: center; gap: 7px;
    background: #fff; border: 2px solid #fff;
    color: #e91e8c; border-radius: 8px; padding: 8px 15px;
    font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .2s;
    font-family: 'Be Vietnam Pro', sans-serif; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.nav-contact-btn:hover,
.nav-contact-wrap.open .nav-contact-btn {
    background: #fdf2f8; border-color: #fdf2f8; color: #be185d;
}
.nav-contact-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 260px; background: #fff; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18); border: 1px solid #e4eef8;
    z-index: 9999; padding: 6px 0;
    opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.nav-contact-wrap.open .nav-contact-dropdown {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}
.ncd-title { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; padding: 8px 16px 6px; }
.ncd-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    text-decoration: none; color: #1a202c; transition: background .15s;
    cursor: pointer; background: none; border: none; width: 100%; text-align: left;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.ncd-item:hover { background: #f8fafc; }
.ncd-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; background: #f1f5f9;
}
.ncd-icon-zalo { background: #e8f0ff; }
.ncd-call .ncd-icon  { background: #dcfce7; }
.ncd-whatsapp .ncd-icon { background: #dcfce7; }
.ncd-fb .ncd-icon   { background: #eff6ff; }
.ncd-consult .ncd-icon { background: #f5f3ff; }
.ncd-label { font-size: 13px; font-weight: 600; color: #1a202c; }
.ncd-val   { font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.ncd-divider { border-top: 1px solid #f0f4f8; margin: 4px 0; }
.ncd-email { display: block; text-align: center; font-size: 12px; color: #94a3b8; padding: 6px 16px 10px; text-decoration: none; }
.ncd-email:hover { color: #e91e8c; }

/* -- USER DROPDOWN -- */
.user-dropdown { position:relative; display:inline-block; }
.user-trigger { display:flex; align-items:center; gap:4px; background:none; border:none; color:rgba(255,255,255,0.85); padding:0; cursor:pointer; font-size:14px; font-weight:400; transition:color 0.2s; user-select:none; text-decoration:none !important; font-family:inherit; }
.user-trigger:hover { color:white; background:none; }
.chevron { width:14px; height:14px; transition:transform 0.25s ease; opacity:0.85; flex-shrink:0; }
.user-dropdown.open .chevron { transform:rotate(180deg); }
.dropdown-menu { position:absolute; top:calc(100% + 10px); right:0; width:225px; background:white; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.16); overflow:hidden; opacity:0; transform:translateY(-8px) scale(0.97); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; border:1px solid #e4eef8; z-index:9999; }
.user-dropdown.open .dropdown-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.dropdown-header { background:linear-gradient(135deg,#fff7ad,#ffa9f9); padding:14px 16px; display:flex; align-items:center; gap:10px; }
.dh-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.2); border:2px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:white; flex-shrink:0; }
.dh-name { font-size:14px; font-weight:700; color:white; }
.dh-role { font-size:11px; color:rgba(255,255,255,0.7); margin-top:2px; text-transform:capitalize; }
.dropdown-items { padding:6px; }
.dropdown-item { display:flex !important; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; text-decoration:none !important; color:#2d3748 !important; font-size:13.5px !important; font-weight:500; transition:all 0.15s; white-space:nowrap; }
.dropdown-item:hover { background:#f0f6ff; color:#e91e8c !important; }
.item-icon { width:30px; height:30px; border-radius:7px; background:#eef4fb; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
.dropdown-item:hover .item-icon { background:#d8ebfa; }
.dropdown-divider { height:1px; background:#f0f4f8; margin:4px 6px; }
.dropdown-item.danger { color:#c53030 !important; }
.dropdown-item.danger:hover { background:#fff5f5; }
.danger-icon { background:#fff0f0 !important; }
.dropdown-item.danger:hover .danger-icon { background:#ffe0e0 !important; }
/* -- SEARCH BOX -- */
.hero-search-section { background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.3)), url('/assets/images/anhbien.jpg'); background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 28px 20px 32px;
    text-align: center;
}
.hero-search-title { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; text-shadow: 0 2px 8px rgba(0,0,0,.2); font-family: 'Be Vietnam Pro', sans-serif; }
.hero-search-sub { font-size: 14px; color: rgba(255,255,255,.78); margin: 0 0 20px; font-family: 'Be Vietnam Pro', sans-serif; }
.hero-search-box { display: flex; align-items: center; gap: 0; max-width: 960px; width: 100%; margin: 0 auto; background: #fff; border-radius: 14px; padding: 8px 8px 8px 0; box-shadow: 0 12px 48px rgba(0,0,0,.3); overflow: visible; }
.hsb-field { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 8px 16px; border-right: 1px solid #e2e8f0; min-width: 0; }
.hsb-field:last-of-type { border-right: none; }
.hsb-label { font-size: 10px; font-weight: 700; color: #a0aec0; text-transform: uppercase; letter-spacing: .8px; font-family: 'Be Vietnam Pro', sans-serif; white-space: nowrap; }
.hsb-input { border: none; outline: none; font-size: 14px; font-weight: 500; color: #1a202c; background: transparent; font-family: 'Be Vietnam Pro', sans-serif; width: 100%; }
.hsb-input::placeholder { color: #b0bec5; font-weight: 400; }
.hsb-btn { background: linear-gradient(135deg, #e91e8c, #ffa9f9); color: #fff; border: none; padding: 14px 28px; border-radius: 10px; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .2s; font-family: 'Be Vietnam Pro', sans-serif; flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-right: 2px; box-shadow: 0 4px 16px rgba(233,30,140,.4); }
.hsb-btn:hover { background: linear-gradient(135deg, #be185d, #e91e8c); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(233,30,140,.5); }
.hero-quick-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero-quick-tags a { padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,.15); color: white; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.3); transition: all .2s; font-family: 'Be Vietnam Pro', sans-serif; }
.hero-quick-tags a:hover { background: rgba(255,255,255,.28); }
.hsb-keyword { flex: 1.5; }
@media(max-width:768px) {
    .hero-search-box { flex-direction: column; border-radius: 12px; padding: 10px; gap: 4px; }
    .hsb-field { border-right: none; border-bottom: 1px solid #f0f4f8; width: 100%; padding: 10px 12px; }
    .hsb-field:last-of-type { border-bottom: none; }
    .hsb-btn { width: 100%; justify-content: center; margin-right: 0; }
    .hero-search-title { font-size: 19px; }
}

/* -- reset password -- */
.reset-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    background: #ffffff;
}
.reset-card {
    width: 440px;
    background: white;
    padding: 40px 35px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    text-align: center;
}
.card-icon {
    width: 72px;
    height: 72px;
    background: #eef4fb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.reset-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}
.reset-card p {
    font-size: 14px;
    color: #718096;
    margin-bottom: 26px;
    line-height: 1.5;
}
.reset-card label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}
.input-group {
    position: relative;
    margin-bottom: 16px;
}
.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.toggle-pw:hover { opacity: 1; }
.reset-card input {
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #2d3748;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.reset-card input:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
}
.reset-card button {
    width: 100%;
    padding: 12px;
    background: #e91e8c;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.2s, transform 0.1s;
}
.reset-card button:hover { background: #be185d; }
.reset-card button:active { transform: scale(0.98); }

/* Register form — compact override */
.register-card {
    width: 380px;
    padding: 28px 28px 24px;
}
/* Thêm vào cuối file, sau .register-card hiện tại */
.register-card input {
    margin: 0;          /* chặn global input margin */
}
.register-card label {
    margin-top: 10px;   /* thay vì dùng margin-bottom của input-group */
    display: block;
}
.register-card .card-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
}
.register-card h2 { font-size: 18px; margin-bottom: 4px; }
.register-card p  { font-size: 13px; margin-bottom: 14px; }
.register-card label { font-size: 12px; margin-bottom: 4px; }
.register-card .input-group { margin-bottom: 10px; }
.register-card input { padding: 8px 36px 8px 36px; font-size: 13px; }
.register-card button { padding: 10px; font-size: 14px; margin-top: 2px; }

/* Thu nhỏ card và giảm khoảng cách giữa các trường */
.reset-card.register-card {
    padding: 20px 24px 18px;
}

.reset-card.register-card h2 {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.reset-card.register-card p {
    margin-bottom: 14px;
    font-size: 0.88rem;
}

.reset-card.register-card label {
    display: block;
    margin-bottom: 4px;
    margin-top: 10px;
    font-size: 0.88rem;
}

.reset-card.register-card .input-group {
    margin-bottom: 0;
}

.reset-card.register-card .input-group input {
    padding: 8px 12px 8px 36px;
    font-size: 0.9rem;
}

.reset-card.register-card button[type="submit"] {
    margin-top: 16px;
    padding: 10px;
}

.card-icon {
    margin-bottom: 8px;
}
.message {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.message.error {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
}
.message.success {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}
.back-login { margin-top: 20px; }
.back-btn {
    display: block; width: 100%; padding: 10px;
    background: #2b6cb0; color: #ffffff !important; text-align: center;
    border-radius: 6px; text-decoration: none !important; margin-top: 10px;
    font-weight: 600; transition: background .2s;
}
.back-btn:hover {
    color: #be185d;
    text-decoration: underline;
}


/* -- register -- */
.new-user-banner {
    background: linear-gradient(135deg, #fff8e1, #fffbf0);
    border: 1.5px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: #92400e;
    text-align: center;
    line-height: 1.5;
}

.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.back-login { margin-top: 12px; text-align: center; }
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: #2b6cb0;
    color: #ffffff !important;
    text-align: center;
    border-radius: 6px;
    text-decoration: none !important;
    margin-top: 6px; /* giảm từ 10px xuống 6px cho sát hơn */
    font-weight: 600;
    transition: background .2s;
}
.back-btn:hover { background: #1e4e8c; }

.social-login { display:flex; justify-content:center; gap:16px; margin-top:16px; }
.social-btn {
    width:50px; height:50px; border-radius:50%;
    border:1.5px solid #e2e8f0; background:#fff;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:all .2s;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.social-btn:hover { border-color:#90cdf4; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.social-btn img { width:24px; height:24px; object-fit:contain; }

/* login */
/* Nút tạo tài khoản */
.btn-register{
    display:block;
    width:100%;
    padding:10px;
    background:#2b6cb0;
    color:white;
    text-decoration:none;
    border-radius:5px;
    font-weight:500;
    text-align:center;
    transition:0.3s;
}

.btn-register:hover{
    background:#1f4f85;
}

/* Link quên mật khẩu */
.forgot-link{
    display:block;
    width:100%;
    padding:10px;
    background:#2b6cb0;
    color:white;
    text-decoration:none;
    border-radius:5px;
    text-align:center;
    transition:0.3s;
}

.forgot-link:hover{
    background:#1f4f85;
}

.social-login{
    text-align:center;
    margin-top:15px;
}

.social-btn{
    display:inline-block;
    margin:5px;
}

.social-btn img{
    width:40px;
    height:40px;
    border-radius:50%;
    transition:0.3s;
}

.social-btn img:hover{
    transform:scale(1.1);
}

/* forgot password */
.forgot-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    background: #ffffff;
}

.forgot-card {
    width: 440px;
    background: white;
    padding: 40px 35px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    text-align: center;
}

.card-icon {
    width: 72px;
    height: 72px;
    background: #eef4fb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.forgot-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 10px;
}

.forgot-card p {
    font-size: 14px;
    color: #718096;
    margin-bottom: 28px;
    line-height: 1.6;
}

.forgot-card label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
}

.input-group {
    position: relative;
    margin-bottom: 18px;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.forgot-card input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #2d3748;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.forgot-card input:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233,30,140,0.1);
}

.forgot-card button {
    width: 100%;
    padding: 12px;
    background: #e91e8c;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.forgot-card button:hover {
    background: #be185d;
}

.forgot-card button:active {
    transform: scale(0.98);
}

.message {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    padding: 10px 14px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.back-login {
    margin-top: 20px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e91e8c;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.back-btn:hover {
    color: #be185d;
    text-decoration: underline;
}


/* ============================================================
RESPONSIVE - StayGo
Thêm vào CUỐI file style.css
Breakpoints: 768px (tablet), 480px (phone), 375px (small)
   ============================================================ */

/* ============================================================
   TABLET - 768px
   ============================================================ */
@media (max-width: 768px) {

    /* ===== HEADER 2 HÀNG TRÊN MOBILE =====
       Hàng 1: Logo (trái) + Đăng nhập + Liên hệ (phải)
       Hàng 2: Nav links trải đều full width
    ========================================= */
    /* ===== HEADER 2 HÀNG TRÊN MOBILE =====
       Hàng 1 (trên): Logo  +  Đăng nhập  +  Liên hệ
       Hàng 2 (dưới): Trang chủ | Khách sạn | Ưu đãi | Bài Viết
       → Không ẩn bất kỳ chức năng nào, responsive hoàn toàn
    ========================================= */
    .header { padding: 6px 0 0; overflow: visible; }
    .header-flex {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding: 0 12px 0;
    }

    /* === HÀNG 1 TRÁI: Logo === */
    .logo-link { flex: 1 1 auto; min-width: 0; }
    .logo-link img { height: 42px !important; }
    .logo-tagline { display: none; }

    /* === HÀNG 1 PHẢI: auth + contact === */
    .header-right { flex-shrink: 0; gap: 6px; align-items: center; padding: 6px 0; }
    .nav-hamburger { display: none !important; }

    /* Nút Liên hệ compact */
    .nav-contact-label { display: inline; font-size: 12px; }
    .nav-contact-btn   { padding: 6px 10px; font-size: 12px; gap: 4px; }
    .btn-login-nav     { padding: 6px 12px !important; font-size: 12px !important; }

    /* User dropdown compact */
    .user-greet  { display: none; }
    .user-name   { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
    .user-trigger { font-size: 12px; gap: 3px; }
    .user-dropdown { width: auto; flex-shrink: 0; }
    .dropdown-menu { width: 240px; right: 0; }

    /* Dropdown Liên hệ: fixed dưới header */
    .nav-contact-dropdown {
        position: fixed !important;
        top: 92px;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 9999 !important;
    }

    /* --- HERO SEARCH --- */
    .hero-search-section { padding: 20px 16px 24px; }
    .hero-search-title { font-size: 18px; }
    .hero-search-sub { font-size: 13px; margin-bottom: 14px; }
    .hero-search-box {
        flex-direction: column;
        border-radius: 12px;
        padding: 10px;
        gap: 4px;
    }
    .hsb-field {
        border-right: none;
        border-bottom: 1px solid #f0f4f8;
        width: 100%;
        padding: 10px 12px;
    }
    .hsb-field:last-of-type { border-bottom: none; }
    .hsb-btn { width: 100%; justify-content: center; margin-right: 0; }
    .hero-quick-tags { gap: 6px; }
    .hero-quick-tags a { font-size: 11px; padding: 5px 10px; }

    /* --- CONTAINER --- */
    .container { width: 95%; padding: 0 12px; }

    /* --- FEATURED HOTELS --- */
    .fh-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .fh-header { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* --- DEAL GRID --- */
    .deal-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

    /* --- DESTINATION --- */
    .destination-grid { grid-template-columns: 1fr 1fr; }

    /* --- PROMO --- */
    .promo-card { flex-direction: column; gap: 20px; }
    .promo-right { text-align: left; }
    .promo-right img { max-width: 100%; }
    .promo-title { font-size: 22px; }

    /* --- HOTELS PAGE --- */
    .hotel-card { flex-direction: column; }
    .hotel-img img { width: 100%; height: 200px; }
    .hotel-price {
        width: 100%;
        border-left: none;
        border-top: 1px solid #f0f4f8;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .sf-main-row { flex-direction: column; }
    .sf-field { min-width: 100%; }
    .loc-tabs { gap: 6px; }

    /* --- HOTEL DETAIL --- */
    .hd-gallery { grid-template-columns: 1fr; height: auto; }
    .hd-gallery-main { height: 260px; }
    .hd-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        height: 80px;
    }
    .hd-grid { grid-template-columns: 1fr; }
    .hd-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .hd-price-card { grid-column: 1 / -1; }
    .hd-name { font-size: 20px; }
    .hd-header { flex-direction: column; gap: 12px; }
    .hd-nav-tab { padding: 12px 12px; font-size: 12px; }
    .hd-table-head,
    .hd-room-row { grid-template-columns: 1fr 100px; }
    .hd-th-guest, .hd-th-opt,
    .hd-room-guests, .hd-room-opts { display: none; }
    .hd-amenities-grid { grid-template-columns: 1fr 1fr; }
    .hd-cont { padding: 0 14px; }

    /* --- BLOG LIST --- */
    .bl-img-wrap { height: 240px; }
    .bl-hero-title { font-size: 26px; }
    .bd-grid { grid-template-columns: 1fr; }
    .bd-sidebar { position: static; }
    .bd-more-grid { grid-template-columns: 1fr 1fr; }
    .hs-blog-grid { grid-template-columns: 1fr 1fr; }

    /* --- DEALS PAGE --- */
    .deals-grid { grid-template-columns: 1fr 1fr; }
    .deals-hero-inner { flex-direction: column; }
    .deals-hero-img { width: 100%; }
    .deals-filter-bar { flex-direction: column; align-items: flex-start; }
    .deals-cta { flex-direction: column; }

    /* --- PROFILE --- */
    .profile-wrap { flex-direction: column; }
    .profile-sidebar { width: 100%; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .ep-container { flex-direction: column; }
    .ep-sidebar { width: 100%; }

    /* --- MY BOOKINGS --- */
    .bk-card-body { grid-template-columns: 1fr; }
    .bk-col { border-right: none; border-bottom: 1px solid #f0f4f8; }

    /* --- FOOTER --- */
    .footer-container { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-bottom .footer-container {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* --- PLACES --- */
    .places-grid { grid-template-columns: 1fr 1fr; }
    .places-blog-grid { grid-template-columns: 1fr 1fr; }
    .pd-grid { grid-template-columns: 1fr; }
    .pd-more-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   PHONE - 480px
   ============================================================ */
@media (max-width: 480px) {

    /* --- HEADER --- */
    .header nav { gap: 0; }
    /* Hàng 2 nav links - được handle bởi 768px block, để kế thừa */

    /* --- HERO --- */
    .hero-search-title { font-size: 16px; }
    .hero-quick-tags { display: none; }

    /* --- GRIDS về 1 cột --- */
    .fh-grid { grid-template-columns: 1fr; }
    .deal-grid { grid-template-columns: 1fr; }
    .destination-grid { grid-template-columns: 1fr; }
    .deals-grid { grid-template-columns: 1fr; }
    .hs-blog-grid { grid-template-columns: 1fr; }
    .places-grid { grid-template-columns: 1fr; }
    .places-blog-grid { grid-template-columns: 1fr; }
    .pd-more-grid { grid-template-columns: 1fr; }

    /* --- HOTEL DETAIL --- */
    .hd-gallery-main { height: 220px; }
    .hd-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        height: 64px;
    }
    .hd-sidebar { grid-template-columns: 1fr; }
    .hd-name { font-size: 18px; }
    .hd-nav-tabs { overflow-x: auto; }
    .hd-nav-tab { padding: 10px 10px; font-size: 11.5px; white-space: nowrap; }
    .hd-amenities-grid { grid-template-columns: 1fr; }
    .hd-table-head,
    .hd-room-row { grid-template-columns: 1fr 90px; }

    /* --- BLOG --- */
    .bd-more-grid { grid-template-columns: 1fr; }
    .bd-nav { grid-template-columns: 1fr; }
    .bd-hero { height: 260px; }
    .bd-hero-title { font-size: 18px; }
    .bl-img-wrap { height: 200px; }
    .bl-body { padding: 14px 14px 18px; }
    .bl-title { font-size: 16px; }

    /* --- FOOTER --- */
    .footer-container { grid-template-columns: 1fr; }
    .footer-bottom .footer-container { gap: 6px; }
    .fb-right { flex-wrap: wrap; justify-content: center; gap: 6px; }

    /* --- PROFILE / EDIT --- */
    .ep-field-grid { grid-template-columns: 1fr; }
    .ep-field-full { grid-column: span 1; }
    .stats-grid { grid-template-columns: 1fr; }

    /* --- MY BOOKINGS --- */
    .mybk-header { flex-direction: column; gap: 10px; align-items: flex-start; }
    .mybk-tabs { gap: 4px; }
    .tab-item { font-size: 12px; padding: 6px 10px; }

    /* --- DEALS --- */
    .deals-hero-text h1 { font-size: 22px; }
    .deal-tabs { gap: 4px; }
    .deal-tab { font-size: 12px; padding: 6px 10px; }

    /* --- LOGIN / REGISTER --- */
    .login-box { width: 95%; padding: 24px 18px; }
    .otp-box { width: 95%; padding: 24px 18px; }

    /* --- CHATBOT --- */
    .chat-box { width: 95vw; right: 2.5vw; z-index: 999 }

    /* --- CONTACT FLOATING --- */
    .contact-floating { bottom: 90px; right: 12px; }
    .contact-btn { width: 46px; height: 46px; }
}


/* ============================================================
   SMALL PHONE - 375px (iPhone SE)
   ============================================================ */
@media (max-width: 375px) {

    /* --- HEADER (iPhone SE, Galaxy A) --- */
    .logo-link img { height: 40px !important; }
    /* Hàng 2 nav: text nhỏ hơn chút trên máy rất nhỏ */
    .header nav#mainNav a { font-size: 11px !important; padding: 6px 2px !important; }
    .btn-login-nav { font-size: 11px !important; padding: 5px 7px !important; }
    .nav-contact-btn { padding: 5px 8px; font-size: 11px; }
    .nav-contact-label { font-size: 11px; }
    .user-name { max-width: 44px; }
    .header-right { gap: 4px; }

    /* --- HERO --- */
    .hero-search-title { font-size: 14px; }
    .hero-search-sub { font-size: 12px; }
    .hsb-label { font-size: 9px; }
    .hsb-input { font-size: 13px; }
    .hsb-btn { font-size: 13px; padding: 12px 16px; }

    /* --- HOTEL DETAIL --- */
    .hd-gallery-main { height: 180px; }
    .hd-name { font-size: 16px; }
    .hd-nav-tab { font-size: 10.5px; padding: 10px 8px; }
    .hd-pc-price { font-size: 22px; }
    .hd-card { padding: 16px; }
    .hd-card-title { font-size: 16px; }

    /* --- CARDS --- */
    .fh-name { font-size: 14px; }
    .fh-price { font-size: 16px; }
    .deal-body h3 { font-size: 14px; }

    /* --- SECTION TITLES --- */
    .section-title { font-size: 20px; }
    .fh-title { font-size: 18px; }
    .places-title { font-size: 1.4rem; }

    /* --- FOOTER --- */
    .footer-logo { font-size: 18px; }
    .footer-desc { font-size: 12px; }
    .footer-links a { font-size: 12px; }
    .footer-contact li { font-size: 12px; }
    .fb-left { font-size: 11px; }
    .fb-right a { font-size: 11px; }

    /* --- PROFILE --- */
    .big-avatar { width: 56px; height: 56px; font-size: 22px; }
    .sb-name { font-size: 14px; }

    /* --- CHATBOT --- */
    .chat-box { height: 460px; }
    .chat-button { width: 56px; height: 56px; bottom: 14px; right: 14px; z-index: 998 }
    .chat-button img { width: 30px; }
    .chat-box.open { display: flex; }
}


/* ============================================================
   TABLET NGANG - 768px đến 1024px
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    .fh-grid { grid-template-columns: repeat(2, 1fr); }
    .deal-grid { grid-template-columns: repeat(2, 1fr); }
    .deals-grid { grid-template-columns: repeat(2, 1fr); }
    .hs-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .places-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-container { grid-template-columns: 1fr 1fr; }

    .hd-grid { grid-template-columns: 1fr 300px; }
    .hd-gallery { height: 360px; }

    .bd-grid { grid-template-columns: 1fr 280px; }
    .bd-more-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- CHATBOT RESPONSIVE --- */
@media (max-width: 480px) {
    .chat-box {
        width: calc(100vw - 24px) !important;
        right: 12px !important;
        left: 12px !important;
        bottom: 85px !important;
        height: 70vh !important;
        max-height: 500px !important;
        border-radius: 16px !important;
    }

    .chat-button {
        width: 54px !important;
        height: 54px !important;
        bottom: 16px !important;
        right: 16px !important;
    }

    .chat-button img {
        width: 30px !important;
    }

    /* Nút floating contact không che chatbot */
    .contact-floating {
        bottom: 90px !important;
        right: 12px !important;
    }

    .contact-btn {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (max-width: 375px) {
    .chat-box {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
        height: 65vh !important;
        max-height: 460px !important;
    }

    /* Bubble tin nhắn nhỏ lại */
    .bubble {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    /* Input nhỏ lại */
    .chat-input input {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    .chat-input button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Header chatbot */
    .chat-header { padding: 10px 12px !important; }
    .chat-header-left img {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Tablet 769px - 1024px */
@media (max-width: 1024px) {
    .pd-hero { height: 320px; }
    .pd-hero-title { font-size: 22px; }
}

/* Mobile 481px - 768px */
@media (max-width: 768px) {
    .pd-hero { height: 260px; }
    .pd-hero-title { font-size: 18px; }
}

/* Small phone <= 480px */
@media (max-width: 480px) {
    .pd-hero { height: 220px; }
    .pd-hero-title { font-size: 16px; }
}

/* ============================================================ */
   PAYMENT PAGE - payment.css
   Thêm vào: assets/css/style.css (hoặc link riêng)
/* ============================================================ */

/* --- BASE --- */
.pay-page { min-height:85vh; background:#f0f5fb; padding:36px 20px; font-family:'Segoe UI',sans-serif; }
.pay-wrap { max-width:720px; margin:0 auto; background:white; border-radius:18px; overflow:hidden; box-shadow:0 6px 30px rgba(0,0,0,.1); }
.pay-head { background:linear-gradient(135deg,#9d174d,#f472b6); color:white; font-size:17px; font-weight:700; padding:18px 28px; display:flex; align-items:center; gap:10px; }
.pay-hotel-name { background:#f8fbff; border-bottom:1px solid #e8f0f8; padding:11px 28px; font-size:14px; font-weight:600; color:#2b6cb0; display:flex; align-items:center; gap:7px; }
.pay-section { padding:22px 28px 14px; border-bottom:1px solid #f0f4f8; }
.section-label { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:#1a202c; margin-bottom:16px; }
.step-badge { width:24px; height:24px; border-radius:50%; background:#e91e8c; color:white; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.field-wrap { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field-wrap label { font-size:12.5px; font-weight:600; color:#4a5568; }
.req { color:#e53e3e; }
.pay-wrap input[type=text],.pay-wrap input[type=email],.pay-wrap input[type=tel],.pay-wrap input[type=date],.pay-wrap select,.pay-wrap textarea { width:100%; padding:10px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:14px; color:#2d3748; transition:border-color .2s; font-family:inherit; box-sizing:border-box; }
.pay-wrap input:focus,.pay-wrap select:focus,.pay-wrap textarea:focus { outline:none; border-color:#e91e8c; box-shadow:0 0 0 3px rgba(233,30,140,.1); }
.readonly-field { background:#f7fafc; color:#718096; }
.price-box { background:#f0f6ff; border:1px solid #c9def4; border-radius:10px; padding:12px 16px; margin-top:4px; margin-bottom:4px; }
.price-row { display:flex; justify-content:space-between; font-size:13px; color:#4a5568; padding:3px 0; }
.price-row.total { border-top:1px solid #c9def4; margin-top:6px; padding-top:8px; font-size:15px; color:#1a202c; }

/* --- DISCOUNT --- */
.discount-banner { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#f0fff4,#fffff0); border:1.5px solid #68d391; border-radius:10px; padding:12px 20px; margin:0 28px 4px; font-size:13.5px; color:#276749; gap:10px; }
.discount-badge-tag { background:#38a169; color:#fff; font-size:13px; font-weight:800; padding:4px 12px; border-radius:20px; flex-shrink:0; }
.login-hint-banner { background:#fffbeb; border:1.5px solid #fbbf24; border-radius:10px; padding:11px 20px; margin:0 28px 4px; font-size:13px; color:#92400e; }
.login-hint-banner a { color:#e91e8c; }
.line-through-price { text-decoration:line-through; color:#a0aec0 !important; }
.discount-row span { color:#38a169; }
.discount-text { color:#38a169 !important; }
.order-discount-info { background:#f0fff4; border:1px solid #9ae6b4; border-radius:8px; padding:9px 14px; font-size:13px; color:#276749; margin-bottom:14px; }

/* --- PAYMENT METHOD CARDS --- */
.method-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.method-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1.5px solid #e2e8f0; cursor:pointer; transition:all .2s; position:relative; background:white; }
.method-card input[type=radio] { display:none; }
.method-card:hover { border-color:#90cdf4; background:#f0f8ff; }
.method-card.selected { border-color:#e91e8c; background:#fdf4ff; box-shadow:0 0 0 3px rgba(233,30,140,.12); }
.method-logo { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f0f4f8; }
.bank-logo { background:#fdf4ff; }
.hotel-logo { background:#f0fff4; }
.card-logo { background:#faf5ff; }
.method-info { flex:1; min-width:0; }
.method-name { font-size:13px; font-weight:600; color:#2d3748; }
.method-desc { font-size:11px; color:#a0aec0; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.method-check { color:#e91e8c; font-weight:700; font-size:15px; opacity:0; transition:opacity .2s; flex-shrink:0; }
.method-card.selected .method-check { opacity:1; }

/* --- METHOD DETAIL PANELS --- */
.method-detail-panel { margin-top:4px; border-radius:14px; overflow:hidden; border:1.5px solid #e2e8f0; animation:panelIn .25s ease; }
@keyframes panelIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.panel-header { display:flex; align-items:center; gap:9px; padding:12px 18px; font-size:14px; font-weight:700; }
.bank-panel-header  { background:#fdf4ff; color:#9d174d; border-bottom:1px solid #bee3f8; }
.momo-panel-header  { background:#fce4f3; color:#a50064; border-bottom:1px solid #f9b8df; }
.vnpay-panel-header { background:#fff5f0; color:#c05621; border-bottom:1px solid #fbd38d; }
.hotel-panel-header { background:#f0fff4; color:#276749; border-bottom:1px solid #9ae6b4; }
.card-panel-header  { background:#faf5ff; color:#553c9a; border-bottom:1px solid #d6bcfa; }

/* --- BANK DETAIL --- */
.bank-detail-layout { display:grid; grid-template-columns:1fr 160px; gap:20px; padding:18px 20px; background:#f8fbff; }
.bank-info-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e8f0f8; font-size:13px; }
.bank-info-label { color:#718096; font-weight:500; }
.bank-info-val { color:#2d3748; font-weight:600; }
.bank-name-tag { background:#9d174d; color:white; padding:3px 10px; border-radius:6px; font-size:12px; }
.bank-stk-wrap { display:flex; align-items:center; gap:8px; }
.bank-stk { font-size:16px; font-weight:800; color:#1a202c; font-family:monospace; letter-spacing:1px; }
.btn-copy { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:6px; background:#fdf4ff; color:#e91e8c; border:1px solid #bee3f8; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-copy:hover { background:#e91e8c; color:white; }
.bank-transfer-note { background:#fffbeb; border:1px solid #fef3c7; border-radius:8px; padding:10px 12px; font-size:12.5px; color:#92400e; line-height:1.7; margin-top:10px; }
.bank-transfer-note code { background:#fef3c7; padding:1px 5px; border-radius:4px; font-family:monospace; }
.bank-qr-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding-top:4px; }
.qr-placeholder-box { width:140px; height:140px; border:2px dashed #cbd5e0; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f7fafc; color:#a0aec0; font-size:12px; text-align:center; gap:4px; }
.qr-scan-hint { font-size:11px; color:#a0aec0; text-align:center; }

/* --- MOMO DETAIL --- */
.momo-detail-layout { display:grid; grid-template-columns:180px 1fr; gap:20px; padding:18px 20px; background:#fff5fb; }
.momo-qr-box { background:#f9e4f3; border-color:#f9b8df; width:160px; height:160px; }
.momo-phone-wrap { background:#fff; border:1.5px solid #f9b8df; border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.momo-phone-label { font-size:11.5px; color:#a0aec0; font-weight:500; margin-bottom:4px; }
.momo-phone-val { display:flex; align-items:center; gap:8px; }
#momoPhone { font-size:18px; font-weight:800; color:#a50064; font-family:monospace; }
.btn-copy-momo { background:#fce4f3; color:#a50064; border-color:#f9b8df; }
.btn-copy-momo:hover { background:#a50064; color:white; }
.momo-steps { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.momo-step { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#4a5568; }
.step-num { background:#a50064; color:white; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.momo-step code { background:#fce4f3; color:#a50064; padding:1px 6px; border-radius:4px; font-family:monospace; font-size:12px; }
.momo-note-tag { background:#fff0f9; border:1px solid #f9b8df; border-radius:8px; padding:9px 12px; font-size:12.5px; color:#702459; }

/* --- VNPAY DETAIL --- */
.vnpay-layout { padding:18px 20px; background:#fff9f5; }
.vnpay-logo-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.vnpay-badge { background:#e05c1a; color:white; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; }
.vnpay-desc { font-size:13.5px; color:#4a5568; line-height:1.7; margin-bottom:14px; }
.vnpay-support-list { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.vnpay-support-item { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; background:white; border-radius:10px; border:1px solid #fbd38d; }
.vnpay-icon { font-size:20px; flex-shrink:0; }
.vnpay-support-item strong { font-size:13px; color:#2d3748; }
.vnpay-support-item p { font-size:12px; color:#a0aec0; margin:2px 0 0; }
.vnpay-secure-row { display:flex; gap:16px; font-size:12px; color:#276749; font-weight:600; }

/* --- HOTEL PAY DETAIL --- */
.hotel-pay-layout { padding:16px 20px 18px; background:#f5fff8; }
.hotel-pay-steps { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.hotel-step-item { display:flex; align-items:flex-start; gap:14px; }
.hotel-step-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.hotel-step-item strong { font-size:13.5px; color:#1a202c; display:block; margin-bottom:3px; }
.hotel-step-item p { font-size:12.5px; color:#4a5568; margin:0; line-height:1.6; }
.hotel-pay-note { display:flex; align-items:flex-start; gap:10px; background:#fffbeb; border:1px solid #fef3c7; border-radius:8px; padding:10px 14px; font-size:12.5px; color:#92400e; line-height:1.6; }

/* --- CARD DETAIL --- */
.card-step { padding:16px 20px 18px; background:#fdfaff; }
.card-step-title { font-size:13.5px; font-weight:600; color:#2d3748; margin-bottom:12px; }
.card-type-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.card-type-item { border:2px solid #e2e8f0; border-radius:10px; padding:14px 10px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .18s; background:white; min-height:60px; }
.card-type-item:hover { border-color:#9f7aea; background:#faf5ff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(159,122,234,.2); }
.card-type-item.active { border-color:#805ad5; background:#f5f0ff; box-shadow:0 0 0 3px rgba(128,90,213,.15); }

/* Card Preview */
.card-preview { width:100%; max-width:340px; margin:0 auto 18px; height:190px; border-radius:16px; background:linear-gradient(135deg,#667eea,#764ba2); padding:22px 24px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 30px rgba(102,126,234,.4); position:relative; overflow:hidden; }
.card-preview::before { content:''; position:absolute; top:-30px; right:-30px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08); }
.card-preview::after { content:''; position:absolute; bottom:-20px; left:20px; width:100px; height:100px; border-radius:50%; background:rgba(255,255,255,.06); }
.card-preview-top { display:flex; align-items:flex-start; justify-content:space-between; }
.card-chip { width:38px; height:28px; border-radius:5px; background:linear-gradient(135deg,#f6d365,#fda085); }
.card-type-logo-preview { font-size:13px; color:rgba(255,255,255,.8); font-weight:700; letter-spacing:1px; }
.card-number-preview { font-size:19px; letter-spacing:3px; color:white; font-family:monospace; text-shadow:0 1px 4px rgba(0,0,0,.2); position:relative; z-index:1; }
.card-preview-bottom { display:flex; justify-content:space-between; position:relative; z-index:1; }
.card-preview-label { font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.card-holder-preview { font-size:13px; color:white; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.card-expire-preview { font-size:13px; color:white; font-weight:600; }

/* Card Form */
.card-form-fields { display:flex; flex-direction:column; gap:0; }
.card-input-wrap { position:relative; display:flex; align-items:center; }
.card-input-wrap input { padding-right:44px; }
.card-input-icon { position:absolute; right:10px; font-size:20px; pointer-events:none; }
.card-field-input { width:100%; padding:10px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:14px; color:#2d3748; font-family:monospace; box-sizing:border-box; transition:border-color .2s; }
.card-field-input:focus { outline:none; border-color:#805ad5; box-shadow:0 0 0 3px rgba(128,90,213,.1); }
.cvv-wrap { position:relative; display:flex; align-items:center; }
.cvv-wrap input { width:100%; padding:10px 36px 10px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:14px; box-sizing:border-box; }
.cvv-wrap input:focus { outline:none; border-color:#805ad5; box-shadow:0 0 0 3px rgba(128,90,213,.1); }
.cvv-tooltip { position:absolute; right:10px; cursor:help; }
.card-secure-note { background:#f5f0ff; border:1px solid #d6bcfa; border-radius:8px; padding:9px 13px; font-size:12.5px; color:#553c9a; margin:4px 0 10px; }
.btn-card-back { flex:0 0 auto; padding:9px 16px; border-radius:8px; background:#f0f4f8; color:#4a5568; border:1.5px solid #e2e8f0; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.btn-card-back:hover { background:#e2e8f0; }
.btn-card-link { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 20px; border-radius:8px; background:linear-gradient(135deg,#805ad5,#9f7aea); color:white; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 3px 12px rgba(128,90,213,.3); }
.btn-card-link:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(128,90,213,.4); }

/* Card linked success */
.card-linked-success { text-align:center; padding:20px 0 8px; }
.linked-check { width:56px; height:56px; border-radius:50%; background:#276749; color:white; font-size:26px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:0 4px 16px rgba(39,103,73,.3); }
.linked-title { font-size:17px; font-weight:800; color:#276749; margin-bottom:6px; }
.linked-info { font-size:13.5px; color:#4a5568; font-family:monospace; background:#f0fff4; border:1px solid #9ae6b4; border-radius:8px; padding:8px 16px; display:inline-block; margin-bottom:10px; }
.linked-desc { font-size:13px; color:#718096; margin-bottom:14px; }
.btn-change-card { padding:8px 20px; border-radius:8px; background:#f0f4f8; color:#4a5568; border:1.5px solid #e2e8f0; font-size:13px; font-weight:600; cursor:pointer; }
.btn-change-card:hover { background:#e2e8f0; }

/* --- CONFIRM BUTTON --- */
.btn-confirm { display:flex; align-items:center; justify-content:center; gap:9px; width:calc(100% - 56px); margin:14px 28px 28px; padding:14px; border-radius:10px; background:linear-gradient(135deg,#e05c1a,#ff7043); color:white; font-size:15px; font-weight:700; border:none; cursor:pointer; transition:all .2s; box-shadow:0 4px 14px rgba(224,92,26,.35); }
.btn-confirm:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(224,92,26,.45); }
.btn-confirm:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* --- QR SCREEN --- */
.qr-wrap { max-width:860px; margin:0 auto; }
.qr-status-bar { display:flex; align-items:center; gap:10px; background:white; border-radius:12px; padding:12px 20px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.07); font-size:14px; font-weight:600; color:#4a5568; }
.status-indicator { width:11px; height:11px; border-radius:50%; background:#ecc94b; flex-shrink:0; animation:pulse-dot 1.4s ease-in-out infinite; }
.status-indicator.paid { background:#38a169; animation:none; }
.status-indicator.failed { background:#e53e3e; animation:none; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
.countdown-pill { margin-left:auto; background:#fff5f0; border:1.5px solid #fbd38d; color:#c05621; padding:5px 14px; border-radius:20px; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.countdown-pill.urgent { background:#fff5f5; border-color:#fc8181; color:#c53030; animation:shake .4s ease-in-out infinite; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
.qr-layout { display:grid; grid-template-columns:300px 1fr; gap:20px; }
.qr-left { background:white; border-radius:18px; padding:28px 22px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.09); display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-title { font-size:15px; font-weight:700; color:#1a202c; }
.qr-method-tag { background:#fdf4ff; color:#e91e8c; border:1px solid #bee3f8; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; }
.qr-img-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.qr-frame-wrap { position:relative; display:inline-block; }
.qr-frame-wrap img { width:200px; height:200px; border-radius:12px; border:3px solid #e2e8f0; box-shadow:0 4px 16px rgba(0,0,0,.12); display:block; }
.qr-expired-cover { position:absolute; inset:0; border-radius:12px; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:700; }
.qr-label { font-size:11.5px; color:#a0aec0; }
.time-progress-wrap { width:100%; height:5px; background:#e2e8f0; border-radius:10px; overflow:hidden; }
.time-progress-bar { height:100%; width:100%; background:linear-gradient(90deg,#e91e8c,#f472b6); border-radius:10px; transition:width 1s linear,background .5s; }
.qr-amount { font-size:24px; font-weight:800; color:#e05c1a; }
.qr-amount span { font-size:14px; font-weight:500; color:#718096; }
.btn-download-qr { display:flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px; background:#f0f4f8; color:#2d3748; font-size:13px; font-weight:600; text-decoration:none; transition:background .2s; }
.btn-download-qr:hover { background:#e2e8f0; }
.qr-right { background:white; border-radius:18px; padding:24px 26px; box-shadow:0 4px 20px rgba(0,0,0,.09); }
.order-head { font-size:14px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.order-code { font-size:20px; font-weight:800; color:#1a202c; font-family:monospace; margin-bottom:18px; }
.order-details { display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.od-item { display:flex; align-items:flex-start; gap:10px; }
.od-icon { font-size:16px; margin-top:1px; flex-shrink:0; }
.od-label { font-size:11.5px; color:#a0aec0; font-weight:500; }
.od-val { font-size:13.5px; font-weight:600; color:#2d3748; }
.order-total-box { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#fff5f0,#fff); border:1.5px solid #fbd38d; border-radius:10px; padding:12px 16px; margin-bottom:14px; font-size:14px; color:#4a5568; }
.order-total-box strong { font-size:18px; font-weight:800; color:#e05c1a; }
.live-status-box { display:flex; align-items:center; gap:12px; background:#fffff0; border:1.5px solid #f6e05e; border-radius:10px; padding:11px 14px; margin-bottom:12px; transition:all .4s; }
.live-status-box.paid { background:#f0fff4; border-color:#9ae6b4; }
.live-status-box.failed { background:#fff5f5; border-color:#fc8181; }
.live-dot { width:10px; height:10px; border-radius:50%; background:#ecc94b; flex-shrink:0; animation:pulse-dot 1.4s ease-in-out infinite; }
.live-dot.paid { background:#38a169; animation:none; }
.live-dot.failed { background:#e53e3e; animation:none; }
.live-label { font-size:11px; color:#a0aec0; font-weight:500; }
.live-val { font-size:13px; font-weight:600; color:#744210; transition:color .3s; }
.live-status-box.paid .live-val { color:#276749; }
.live-status-box.failed .live-val { color:#c53030; }
.qr-note { background:#fffbeb; border:1px solid #fef3c7; border-radius:8px; padding:10px 14px; font-size:12.5px; color:#92400e; line-height:1.6; margin-bottom:16px; }
.btn-back-hotels { display:inline-block; color:#e91e8c; font-size:13.5px; font-weight:600; text-decoration:none; }
.btn-back-hotels:hover { text-decoration:underline; }

/* --- OVERLAYS --- */
.pay-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px); animation:fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.overlay-modal { background:white; border-radius:22px; padding:40px 36px; text-align:center; max-width:400px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:slideUp .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
.checkmark-wrap { margin-bottom:18px; }
.checkmark-svg { width:72px; height:72px; }
.checkmark-circle { stroke:#38a169; stroke-width:2; stroke-dasharray:166; stroke-dashoffset:166; animation:stroke-anim .6s cubic-bezier(.65,0,.45,1) forwards; }
.checkmark-path { stroke:#38a169; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:stroke-anim .4s cubic-bezier(.65,0,.45,1) .55s forwards; }
@keyframes stroke-anim { 100%{stroke-dashoffset:0} }
.overlay-title { font-size:22px; font-weight:800; margin-bottom:8px; }
.overlay-sub { font-size:14px; color:#718096; margin-bottom:14px; }
.overlay-order-code { background:#f0fff4; border:1px solid #9ae6b4; border-radius:8px; padding:8px 16px; font-size:14px; color:#276749; font-family:monospace; margin-bottom:12px; }
.overlay-redirect { font-size:12.5px; color:#a0aec0; margin-bottom:18px; }
.btn-overlay-action { display:inline-block; color:white; padding:11px 28px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; transition:transform .2s; }
.btn-overlay-action:hover { transform:translateY(-1px); color:white; }

/* --- HOTEL CONFIRM PAGE --- */
.hotel-confirm-wrap { max-width:600px; margin:0 auto; }
.hotel-confirm-card { background:white; border-radius:20px; padding:40px 36px; box-shadow:0 8px 32px rgba(0,0,0,.1); text-align:center; }
.hotel-confirm-icon { margin-bottom:18px; }
.hotel-confirm-title { font-size:24px; font-weight:800; color:#276749; margin-bottom:8px; }
.hotel-confirm-sub { font-size:14px; color:#718096; margin-bottom:24px; }
.hotel-confirm-order { background:linear-gradient(135deg,#f0fff4,#fffff0); border:2px solid #68d391; border-radius:14px; padding:18px 20px; margin-bottom:24px; }
.hco-label { font-size:11.5px; color:#a0aec0; font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.hco-code { font-size:24px; font-weight:800; color:#276749; font-family:monospace; letter-spacing:1px; margin-bottom:10px; }
.hco-copy-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:8px; background:#f0fff4; color:#276749; border:1.5px solid #9ae6b4; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.hco-copy-btn:hover { background:#276749; color:white; }
.hotel-confirm-details { text-align:left; margin-bottom:20px; }
.hotel-confirm-discount { background:#f0fff4; border:1px solid #9ae6b4; border-radius:8px; padding:10px 14px; font-size:13px; color:#276749; margin-bottom:14px; text-align:center; }
.hcd-grid { display:flex; flex-direction:column; gap:10px; }
.hcd-item { display:flex; align-items:flex-start; gap:10px; padding:8px 12px; background:#f8fbff; border-radius:8px; }
.hcd-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.hcd-label { font-size:11px; color:#a0aec0; font-weight:500; margin-bottom:2px; }
.hcd-val { font-size:13.5px; font-weight:600; color:#2d3748; }
.hcd-total { font-size:16px; font-weight:800; color:#e05c1a; }
.hotel-status-badge { display:flex; align-items:center; justify-content:center; gap:8px; background:#fffbeb; border:1.5px solid #fef3c7; border-radius:10px; padding:11px 16px; font-size:13px; color:#92400e; font-weight:500; margin-bottom:20px; }
.hotel-status-dot { width:8px; height:8px; border-radius:50%; background:#ecc94b; flex-shrink:0; animation:pulse-dot 1.4s ease-in-out infinite; }
.hotel-next-steps { background:#f8fbff; border:1.5px solid #e2edf8; border-radius:12px; padding:16px 18px; margin-bottom:22px; text-align:left; }
.hns-title { font-size:13px; font-weight:700; color:#2d3748; margin-bottom:12px; }
.hns-item { display:flex; align-items:flex-start; gap:12px; font-size:13px; color:#4a5568; line-height:1.6; margin-bottom:10px; }
.hns-item:last-child { margin-bottom:0; }
.hns-num { width:22px; height:22px; border-radius:50%; background:#e91e8c; color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.hotel-confirm-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-hc-primary { display:inline-block; padding:11px 24px; border-radius:10px; background:linear-gradient(135deg,#276749,#38a169); color:white; font-size:14px; font-weight:600; text-decoration:none; transition:transform .2s; }
.btn-hc-primary:hover { transform:translateY(-1px); color:white; }
.btn-hc-secondary { display:inline-block; padding:11px 24px; border-radius:10px; background:#f0f4f8; color:#2d3748; font-size:14px; font-weight:600; text-decoration:none; border:1.5px solid #e2e8f0; transition:background .2s; }
.btn-hc-secondary:hover { background:#e2e8f0; }

/* --- RESPONSIVE --- */
@media(max-width:700px) {
    .qr-layout { grid-template-columns:1fr; }
    .field-grid { grid-template-columns:1fr; }
    .method-grid { grid-template-columns:1fr; }
    .qr-status-bar { flex-wrap:wrap; }
    .countdown-pill { margin-left:0; width:100%; text-align:center; }
    .discount-banner { flex-direction:column; text-align:center; }
    .bank-detail-layout { grid-template-columns:1fr; }
    .momo-detail-layout { grid-template-columns:1fr; }
    .card-type-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px) {
    .hotel-confirm-card { padding:28px 18px; }
    .hco-code { font-size:20px; }
}

/* --- XÓA KHOẢNG TRẮNG DƯỚI FOOTER --- */
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.site-footer {
    margin-top: auto;
}

/* Ẩn khoảng trắng sau footer do chatbot/floating tạo ra */
.chat-button,
.contact-floating {
    /* Các element này dùng position:fixed nên không tạo khoảng trắng */
}

/* ===== COMPACT LOGIN BOX ===== */
.login-box {
    width: 380px;
    padding: 24px 28px 20px;
}

.login-box h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.login-box .login-sub {
    font-size: 13px;
    margin-bottom: 16px;
}

/* Chặn global input margin gây giãn cách */
.login-box input {
    margin: 4px 0 10px;   /* thay vì global 8px 0 20px */
    padding: 9px 12px;
    font-size: 13px;
}

.login-box label {
    font-size: 12px;
    margin-bottom: 2px;
}

.login-box .btn-primary {
    padding: 10px;
    font-size: 14px;
    margin-top: 2px;
}

.login-box .divider {
    margin: 14px 0;
}

.login-box .social-login {
    margin-top: 12px;
}

.login-box .forgot-link,
.login-box .btn-register {
    padding: 8px;
    font-size: 13px;
    margin-top: 8px;
}

/* =====================================================
   BLOG
   ===================================================== */
.blog-cat-btn {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    background: #f0f0f0;
    color: #555;
    transition: background .15s, color .15s;
}
.blog-cat-btn:hover { background: #dde8f5; color: #e91e8c; }
.blog-cat-btn--active { background: #e91e8c; color: #fff; }

.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }

/* =====================================================
   PAGINATION
   ===================================================== */
.sg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.sg-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #e91e8c;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all .15s;
}
.sg-page:hover { background: #f0f6ff; border-color: #e91e8c; }
.sg-page--active {
    background: #e91e8c;
    color: #fff;
    border-color: #e91e8c;
    pointer-events: none;
}
.sg-page--disabled {
    color: #cbd5e0;
    border-color: #e2e8f0;
    pointer-events: none;
    background: #f8fafc;
}
.sg-page--dots { border: none; background: none; color: #94a3b8; pointer-events: none; }

/* =====================================================
   LOCATIONS GRID
   ===================================================== */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.location-card {
    display: block;
    text-decoration: none;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transition: transform .2s, box-shadow .2s;
    background: #f0f4f8;
    aspect-ratio: 4/3;
}
.location-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.16); }
.location-card img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s;
}
.location-card:hover img { transform: scale(1.05); }
.location-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    padding: 28px 16px 16px;
    color: #fff;
}
.location-name { font-size: 17px; font-weight: 700; }
.location-count { font-size: 12px; opacity: .85; margin-top: 2px; }

/* =====================================================
   HOTELS GRID & HOTEL CARD (trang chủ / danh sách)
   ===================================================== */
.hotels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 24px;
}
.hotel-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.09);
    transition: transform .2s, box-shadow .2s;
}
.hotel-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.15); }
.hotel-card-img {
    position: relative;
    overflow: hidden;
    height: 180px;
}
.hotel-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s;
}
.hotel-card:hover .hotel-card-img img { transform: scale(1.06); }
.hotel-card-badges {
    position: absolute; top: 10px; left: 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.badge-discount {
    background: #e53e3e; color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px;
    letter-spacing: .3px;
}
.badge-deal {
    background: #f97316; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 5px;
    letter-spacing: .2px;
}
.hotel-card-info { padding: 14px 16px 10px; }
.hotel-name { font-size: 15px; font-weight: 700; color: #1a202c; margin-bottom: 8px; line-height: 1.35; }
.hotel-location { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #64748b; margin-bottom: 6px; font-weight: 500; }
.hotel-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.hc-score { background: #00695c; color: #fff; font-size: 13px; font-weight: 800; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; }
.hc-label { font-size: 12.5px; font-weight: 700; color: #1a202c; }
.hc-reviews { font-size: 12px; color: #94a3b8; }
.hotel-amenity-pills { display: flex; gap: 4px; margin: 6px 0 2px; flex-wrap: wrap; }
.hap { font-size: 15px; background: #f1f5f9; border-radius: 6px; padding: 2px 5px; line-height: 1; }
.hotel-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.price-old { font-size: 12px; color: #a0aec0; text-decoration: line-through; }
.price-new { font-size: 17px; font-weight: 800; color: #e53e3e; }
.price-unit { font-size: 12px; font-weight: 500; color: #e53e3e; }

@media (max-width: 900px) {
    .locations-grid { grid-template-columns: repeat(2, 1fr); }
    .hotels-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .locations-grid { grid-template-columns: 1fr; }
    .hotels-grid    { grid-template-columns: 1fr; }
}

/* ============================================================
   HOTEL CARD ACTIONS (Xem chi tiết / Đặt ngay buttons)
   ============================================================ */
.hotel-card { display: flex; flex-direction: column; }
.hotel-card-link { display: block; text-decoration: none; color: inherit; flex: 1; }
.hotel-card-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}
.hca-detail, .hca-book {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, color .18s, transform .15s;
}
.hca-detail {
    background: #fff;
    color: #e91e8c;
    border: 1.5px solid #e91e8c;
}
.hca-detail:hover {
    background: #fff0f6;
    color: #1a202c;
    border-color: #e91e8c;
    transform: translateY(-1px);
}
.hca-book {
    background: linear-gradient(135deg, #e91e8c, #f472b6);
    color: #fff;
    border: none;
}
.hca-book:hover {
    background: linear-gradient(135deg, #be185d, #e91e8c);
    color: #1a202c;
    transform: translateY(-1px);
}

/* ============================================================
   CHATBOT WIDGET (redesign)
   ============================================================ */
.chatbot-container {
    position: fixed;
    bottom: 86px;
    right: 20px;
    width: 360px;
    z-index: 9999;
    display: none;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.18));
}
.chatbot-container--open { display: block; }
.chatbot-box {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    animation: chatbotSlideIn .22s ease;
}
@keyframes chatbotSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Header */
.chatbot-header {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chatbot-header-left { display: flex; align-items: center; gap: 10px; }
.chatbot-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.chatbot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chatbot-header-info {}
.chatbot-agent-name { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2; }
.chatbot-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.85); }
.chatbot-online-dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(74,222,128,.35);
    animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,.35); }
    50%       { box-shadow: 0 0 0 5px rgba(74,222,128,.1);  }
}
.chatbot-close-btn {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 16px;
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.chatbot-close-btn:hover { background: rgba(255,255,255,.3); }

/* Messages */
.chatbot-messages {
    height: 280px;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: #f8fafc;
}
.chatbot-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}
.chatbot-bubble--bot {
    align-self: flex-start;
    background: #fff;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    border-radius: 4px 14px 14px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.chatbot-bubble--user {
    align-self: flex-end;
    background: #0284c7;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chatbot-bubble--bot .cb-p { margin: 0 0 6px; line-height: 1.55; }
.chatbot-bubble--bot .cb-p:last-child { margin-bottom: 0; }
.chatbot-bubble--bot .cb-list {
    margin: 4px 0 6px;
    padding-left: 16px;
    line-height: 1.6;
}
.chatbot-bubble--bot .cb-list li { margin-bottom: 3px; }
.chatbot-bubble--bot strong { font-weight: 700; color: #1a202c; }

/* Typing indicator */
.chatbot-typing { display: flex; align-items: center; gap: 5px; padding: 10px 14px !important; }
.chatbot-typing span { width: 8px; height: 8px; background: #cbd5e0; border-radius: 50%; display: inline-block; animation: cb-dot 1.2s infinite ease-in-out; }
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cb-dot { 0%,80%,100% { transform: scale(0.7); opacity:.5; } 40% { transform: scale(1); opacity:1; background:#0284c7; } }

/* Quick questions */
.chatbot-quick-questions {
    padding: 10px 12px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    background: #f8fafc;
    border-top: 1px solid #eef2f7;
}
.chatbot-quick-btn {
    background: #fff;
    border: 1.5px solid #cbd5e0;
    color: #2d3748;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.chatbot-quick-btn:hover {
    border-color: #0284c7;
    color: #0284c7;
    background: #eff6ff;
}

/* Input */
.chatbot-input-wrap {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    background: #fff;
    border-top: 1px solid #eef2f7;
}
.chatbot-input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 22px;
    padding: 9px 14px;
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s;
}
.chatbot-input:focus { border-color: #0284c7; }
.chatbot-send-btn {
    width: 38px; height: 38px;
    background: #0284c7;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}
.chatbot-send-btn:hover { background: #0369a1; transform: scale(1.08); }

/* Toggle button */
.chatbot-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(2,132,199,0.35);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, box-shadow .2s;
}
.chatbot-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.28); }

/* ============================================================
   QR PROMO POPUP WIDGET
   ============================================================ */
.qrp-wrap {
    position: fixed;
    bottom: 20px;
    right: 88px; /* sits left of chatbot button (56px + 12px gap) */
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Popup box */
.qrp-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,.2);
    padding: 20px 18px 16px;
    width: 230px;
    position: relative;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    border: 1px solid #f0e6f6;
}
.qrp-wrap.qrp-open .qrp-box {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Close button */
.qrp-close {
    position: absolute;
    top: 10px; right: 12px;
    background: none; border: none;
    font-size: 15px; color: #94a3b8;
    cursor: pointer; line-height: 1;
    transition: color .15s;
}
.qrp-close:hover { color: #e91e8c; }

/* Title area */
.qrp-head { text-align: center; margin-bottom: 12px; }
.qrp-title {
    font-size: 13.5px; font-weight: 800;
    color: #1a202c; line-height: 1.35;
    margin-bottom: 4px;
}
.qrp-sub { font-size: 11.5px; color: #718096; }

/* Phone frame */
.qrp-phone-frame {
    background: #f1f5f9;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 10px;
    width: 160px;
    position: relative;
}
.qrp-notch {
    width: 40px; height: 6px;
    background: #cbd5e0;
    border-radius: 3px;
    margin-bottom: 8px;
}
.qrp-screen {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.qrp-brand { line-height: 1; }
#qrpCanvas canvas { display: block; border-radius: 6px; }

/* Footer */
.qrp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.qrp-tag {
    font-size: 10.5px;
    color: #7c3aed;
    background: #f5f3ff;
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 600;
}
.qrp-btn-link {
    font-size: 12px; font-weight: 700;
    color: #e91e8c;
    text-decoration: none;
    transition: opacity .15s;
}
.qrp-btn-link:hover { opacity: .75; }

/* Toggle button */
.qrp-toggle-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(124,58,237,.4);
    position: relative;
    transition: transform .2s, box-shadow .2s;
    flex-shrink: 0;
}
.qrp-toggle-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(124,58,237,.5); }
.qrp-pct {
    font-size: 20px; font-weight: 900;
    color: #fff; line-height: 1;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.qrp-badge-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 10px; height: 10px;
    background: #f59e0b;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: qrp-pulse 2s infinite;
}
@keyframes qrp-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.3); opacity: .7; }
}

/* Booking page — promo banner */
/* Stay type badge — booking page */
.bk-staytype-badge {
    display: flex; align-items: center; gap: 8px;
    border-radius: 10px; padding: 10px 16px;
    font-size: 13.5px; font-weight: 600;
    margin-bottom: 16px;
}
.bk-staytype-night {
    background: #eff6ff; border: 1.5px solid #bfdbfe; color: #1e40af;
}
.bk-staytype-day {
    background: #fffbeb; border: 1.5px solid #fde68a; color: #92400e;
}
.bk-staytype-badge strong { color: inherit; }

.bk-promo-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fdf4ff, #fce7f3);
    border: 1.5px solid #e879f9;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.bk-promo-icon { font-size: 28px; flex-shrink: 0; }
.bk-promo-banner strong { font-size: 14px; color: #7c3aed; }
.bk-promo-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.bk-promo-sub code { background: #f3e8ff; color: #7c3aed; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.bk-promo-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 15px; font-weight: 900;
    padding: 6px 12px;
    border-radius: 8px;
    flex-shrink: 0;
}
.bk-sum-discount { color: #7c3aed; font-size: 13px; }
.bk-sum-discount-val { font-weight: 700; color: #7c3aed; }

@media (max-width: 480px) {
    .qrp-wrap { right: 76px; bottom: 16px; }
    .qrp-box  { width: 210px; }
}

/* ============================================================
   FLOATING CONTACT WIDGET
   ============================================================ */
.fc-widget {
    position: fixed;
    right: 86px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fc-items {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(20px);
    transition: opacity .25s, transform .25s;
}
.fc-widget--open .fc-items {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.fc-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
    transition: transform .18s, box-shadow .18s;
}
.fc-btn:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.fc-btn--whatsapp  { background: #25d366; }
.fc-btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.fc-btn--phone     { background: #34a853; }
.fc-btn--messenger { background: linear-gradient(135deg, #0099ff, #a033ff); }
.fc-btn--facebook  { background: #1877f2; }

.fc-toggle {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #ff5722;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(255,87,34,.45);
    transition: transform .2s, background .2s;
    flex-shrink: 0;
}
.fc-toggle:hover { transform: scale(1.1); background: #e64a19; }
.fc-widget--open .fc-toggle { background: #64748b; box-shadow: 0 4px 16px rgba(0,0,0,.2); }

@media (max-width: 480px) {
    .fc-widget { right: 76px; bottom: 16px; }
    .fc-btn { width: 38px; height: 38px; }
    .fc-toggle { width: 44px; height: 44px; }
    .chatbot-container { width: calc(100vw - 24px); right: 12px; bottom: 76px; }
    .chatbot-toggle-btn { bottom: 16px; right: 12px; width: 48px; height: 48px; }
    .chatbot-messages { height: 200px; }
    .chatbot-bubble { font-size: 13px; padding: 8px 11px; }
    .chatbot-input { font-size: 13px; padding: 8px 12px; }
    .chatbot-header { padding: 11px 14px; }
    .chatbot-agent-name { font-size: 14px; }
    .chatbot-avatar { width: 36px; height: 36px; }
}

/* ============================================================
   HOTEL DETAIL PAGE (hd-*)
   ============================================================ */
.hd-nav-bar {
    position: sticky; top: 0; z-index: 100;
    background: #fff; border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.hd-nav-container {
    max-width: 1180px; margin: 0 auto;
    padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.hd-nav-tabs { display: flex; }
.hd-nav-tab {
    display: block; padding: 14px 18px;
    font-size: 13.5px; font-weight: 500; color: #64748b;
    text-decoration: none; border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.hd-nav-tab:hover, .hd-nav-tab.active { color: #e91e8c; border-bottom-color: #e91e8c; }
.hd-nav-book {
    background: #e91e8c; color: #fff !important;
    padding: 8px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .15s;
}
.hd-nav-book:hover { background: #be185d; }

.hd-wrapper { background: #f0f4f8; padding-bottom: 40px; }
.hd-cont { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Header */
.hd-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 28px 0 20px; gap: 20px; flex-wrap: wrap;
}
.hd-breadcrumb { font-size: 12px; color: #94a3b8; margin-bottom: 10px; }
.hd-breadcrumb a { color: #e91e8c; text-decoration: none; }
.hd-badges-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.hd-tag-deal    { background: #fff3cd; color: #856404; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid #ffc107; }
.hd-tag-discount{ background: #ffe0e0; color: #c53030; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid #fc8181; }
.hd-name { font-size: 26px; font-weight: 800; color: #1a202c; margin: 0 0 10px; font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif; }
.hd-sub-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hd-loc { font-size: 13.5px; color: #64748b; }
.hd-score-wrap { display: flex; align-items: center; gap: 8px; }
.hd-score-box { background: #e91e8c; color: #fff; font-size: 15px; font-weight: 800; padding: 5px 10px; border-radius: 8px; }
.hd-score-lbl { font-size: 14px; font-weight: 700; }
.hd-review-n { font-size: 12px; color: #94a3b8; }
.hd-cta-btn {
    display: inline-block; background: linear-gradient(135deg,#e91e8c,#be185d);
    color: #fff; padding: 12px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    white-space: nowrap; box-shadow: 0 4px 14px rgba(233,30,140,.35);
    transition: transform .15s, box-shadow .15s;
}
.hd-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(233,30,140,.45); }

/* Gallery */
.hd-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; border-radius: 16px; overflow: hidden; margin-bottom: 28px; height: 400px; }
.hd-gallery-main { position: relative; overflow: hidden; cursor: zoom-in; }
.hd-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hd-gallery-main:hover img { transform: scale(1.03); }
.hd-gallery-disc { position: absolute; top: 14px; left: 14px; background: #e53e3e; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.hd-gallery-count-badge { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(4px); }
.hd-gallery-grid { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hd-thumb { position: relative; overflow: hidden; cursor: pointer; border-radius: 4px; }
.hd-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hd-thumb:hover img { transform: scale(1.06); }
.hd-thumb-active img { outline: 3px solid #e91e8c; }
.hd-thumb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Lightbox */
.hd-lightbox { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.96); }
.hd-lightbox.open { display: flex; flex-direction: column; }
.hd-lb-backdrop { position: absolute; inset: 0; }
.hd-lb-inner { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; }
/* Header bar */
.hd-lb-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.hd-lb-title { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-lb-counter { color: rgba(255,255,255,.55); font-size: 14px; font-weight: 600; margin: 0 16px; white-space: nowrap; }
.hd-lb-close { background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.hd-lb-close:hover { background: rgba(255,255,255,.28); }
/* Stage (image + arrows) */
.hd-lb-stage { flex: 1; display: flex; align-items: center; position: relative; min-height: 0; }
.hd-lb-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px 70px; }
.hd-lb-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; transition: opacity .15s; }
.hd-lb-prev, .hd-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 38px; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; line-height: 1; }
.hd-lb-prev { left: 14px; } .hd-lb-next { right: 14px; }
.hd-lb-prev:hover, .hd-lb-next:hover { background: rgba(255,255,255,.28); }
/* Caption */
.hd-lb-caption { color: rgba(255,255,255,.6); font-size: 13px; text-align: center; padding: 6px 20px; flex-shrink: 0; min-height: 22px; }
/* Thumbnail strip */
.hd-lb-strip { display: flex; gap: 7px; overflow-x: auto; padding: 10px 20px; flex-shrink: 0; background: rgba(0,0,0,.35); scroll-behavior: smooth; }
.hd-lb-strip::-webkit-scrollbar { height: 4px; }
.hd-lb-strip::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.hd-lb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }
.hd-lb-tn { width: 70px; height: 52px; object-fit: cover; border-radius: 5px; opacity: .45; cursor: pointer; flex-shrink: 0; transition: all .18s; border: 2px solid transparent; }
.hd-lb-tn:hover { opacity: .85; }
.hd-lb-tn.active { opacity: 1; border-color: #e91e8c; }

/* Stars & Ranking */
.hd-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hd-name { margin: 0; font-size: 26px; font-weight: 800; color: #1a202c; }
.hd-stars { font-size: 15px; letter-spacing: 1px; }
.hd-ranking-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(90deg,#fffbeb,#fef3c7);
    border: 1px solid #fcd34d; border-radius: 20px;
    padding: 4px 14px; font-size: 12.5px; font-weight: 700; color: #92400e;
    margin-bottom: 8px;
}

/* Intro preview + modal */
.hd-intro-preview { line-height: 1.85; color: #555; font-size: 14.5px; }
.hd-intro-toggle { background: none; border: none; color: #1e73be; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 8px 0 0; display: inline-flex; align-items: center; gap: 4px; }
.hd-intro-toggle:hover { text-decoration: underline; }
.hd-intro-modal { display: none; position: fixed; inset: 0; z-index: 9500; align-items: center; justify-content: center; padding: 20px; }
.hd-intro-modal.open { display: flex; }
.hd-im-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hd-im-box { position: relative; z-index: 1; background: #fff; border-radius: 16px; width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hd-im-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.hd-im-title { font-size: 16px; font-weight: 800; color: #1a202c; }
.hd-im-close { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hd-im-close:hover { background: #e2e8f0; }
.hd-im-body { overflow-y: auto; padding: 20px 22px 24px; line-height: 1.9; color: #444; font-size: 14.5px; }

/* Map & Nearby */
.hd-loc-address { color: #64748b; font-size: 13.5px; margin-bottom: 14px; }
.hd-map-wrap { margin-bottom: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hd-nearby-title { font-size: 14px; font-weight: 700; color: #1a202c; margin-bottom: 12px; }
.hd-nearby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hd-nearby-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
.hd-nearby-icon { font-size: 16px; flex-shrink: 0; }
.hd-nearby-name { flex: 1; font-size: 13px; color: #374151; font-weight: 500; }
.hd-nearby-dist { font-size: 12px; color: #94a3b8; white-space: nowrap; }

/* Main grid */
.hd-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.hd-left { display: flex; flex-direction: column; gap: 20px; }

/* Cards */
.hd-card { background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.hd-card-title { font-size: 17px; font-weight: 700; color: #1a202c; margin: 0 0 18px; }
.hd-desc { line-height: 1.8; color: #555; margin: 0; font-size: 14.5px; }

/* Amenities */
.hd-amenities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hd-amenity-item { display: flex; align-items: flex-start; gap: 10px; }
.hd-amen-icon { font-size: 20px; flex-shrink: 0; }
.hd-amen-name { font-size: 13px; font-weight: 600; color: #2d3748; }
.hd-amen-note { font-size: 11px; color: #94a3b8; margin-top: 1px; }

/* Room rows — flex 2-zone layout */
.hd-room-row {
    display: flex; flex-direction: column;
    border: 1px solid #e2e8f0; border-radius: 14px;
    overflow: hidden; margin-bottom: 12px;
    background: #fff; transition: box-shadow .2s;
}
.hd-room-row:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); }
.hd-room-urgent { border-color: #fed7aa; background: #fffaf5 !important; }

/* Content row: ảnh trái + bảng phải */
.hd-room-content {
    display: flex; align-items: stretch; flex: 1;
}
/* Body (cột phải chứa bảng) */
.hd-room-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    padding: 4px 0 0;
}
.hd-room-name {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 13px; font-weight: 700; color: #1a202c;
    padding: 10px 10px 8px; line-height: 1.4; flex-wrap: wrap;
}
.hd-room-icon { font-size: 18px; flex-shrink: 0; }
.hd-sale-badge { background: #f97316; color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px; flex-shrink: 0; }
.hd-room-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hd-rtag { background: #f0f4f8; color: #64748b; font-size: 11px; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.hd-room-refund { font-size: 11.5px; font-weight: 600; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.hd-refund-yes    { color: #16a34a; }
.hd-refund-no     { color: #dc2626; }
.hd-refund-policy { color: #7c3aed; }
/* Info icon + tooltip */
.hd-refund-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: #94a3b8; color: #fff; font-size: 9px; font-weight: 700;
    cursor: default; flex-shrink: 0; position: relative;
}
.hd-refund-tip::before {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #1e293b; color: #f1f5f9;
    font-size: 12px; font-weight: 400; line-height: 1.55;
    padding: 10px 14px; border-radius: 8px;
    width: 260px; text-align: left; white-space: pre-wrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease; z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.hd-refund-tip::after {
    content: '';
    position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1e293b;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease; z-index: 200;
}
.hd-refund-tip:hover::before,
.hd-refund-tip:hover::after { opacity: 1; }

/* Room benefits accordion */
.hd-room-benefits { margin-top: 10px; border: 1px solid #bbf7d0; border-radius: 10px; overflow: hidden; background: #f0fdf4; }
.hd-rb-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; user-select: none; }
.hd-rb-title { font-size: 12px; font-weight: 700; color: #15803d; }
.hd-rb-arrow { font-size: 16px; color: #15803d; transition: transform .25s; line-height: 1; }
.hd-room-benefits.hd-rb-open .hd-rb-arrow { transform: rotate(90deg); }
.hd-rb-list { display: none; margin: 0; padding: 6px 12px 10px 12px; list-style: none; border-top: 1px solid #bbf7d0; }
.hd-room-benefits.hd-rb-open .hd-rb-list { display: block; }
.hd-rb-item { font-size: 12px; color: #166534; padding: 4px 0; line-height: 1.4; }

/* Footer (giá + options + nút) */
.hd-room-footer {
    display: flex; align-items: center; gap: 14px;
    padding-top: 12px; border-top: 1px solid #f1f5f9;
    flex-wrap: nowrap;
}
.hd-room-price-wrap { flex: 1; min-width: 0; white-space: nowrap; }
.hd-room-old { font-size: 12px; color: #a0aec0; text-decoration: line-through; }
.hd-room-price { font-size: 17px; font-weight: 800; color: #e91e8c; }
.hd-room-price span { font-size: 12px; font-weight: 400; color: #64748b; }
.hd-room-tax { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.hd-room-opts { display: flex; flex-direction: column; gap: 4px; font-size: 12px; flex-shrink: 0; }
.hd-opt-item { color: #555; }
.hd-opt-free { color: #38a169; font-weight: 600; }
.hd-opt-urgent { color: #c53030; font-weight: 700; }
.hd-opt-avail  { color: #38a169; }
.hd-room-action { flex-shrink: 0; }
.hd-btn-reserve {
    display: inline-block; background: #1e73be; color: #fff;
    padding: 10px 22px; border-radius: 8px; font-size: 13.5px;
    font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background .15s, transform .12s;
    box-shadow: 0 2px 8px rgba(30,115,190,.25);
}
.hd-btn-reserve:hover { background: #1558a0; transform: translateY(-1px); }
.hd-btn-login { background: #64748b; }
.hd-btn-login:hover { background: #475569; }
.hd-no-rooms { color: #94a3b8; font-size: 14px; text-align: center; padding: 20px 0; }

/* Room image carousel */
.hd-room-carousel {
    position: relative; width: 200px; min-width: 200px;
    height: 190px; max-height: 190px;
    border-radius: 10px; overflow: hidden; flex-shrink: 0;
    background: #e2e8f0; align-self: flex-start;
    margin: 10px 0 10px 10px;
}
.hd-rca-slides { position: relative; width: 100%; height: 100%; }
.hd-rca-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .35s ease;
}
.hd-rca-slide.active { opacity: 1; }
.hd-rca-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-rca-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.88); border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 18px; line-height: 1;
    cursor: pointer; color: #1a202c; z-index: 2;
    display: none; align-items: center; justify-content: center;
    padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.18);
    transition: background .15s;
}
.hd-rca-btn:hover { background: #fff; }
.hd-rca-prev { left: 6px; }
.hd-rca-next { right: 6px; }
.hd-room-carousel:hover .hd-rca-btn { display: flex; }
.hd-rca-dots {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 5px; z-index: 2;
}
.hd-rca-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.55); cursor: pointer;
    transition: background .2s, transform .2s;
}
.hd-rca-dot.active { background: #fff; transform: scale(1.35); }
/* Room badge overlay (bottom of carousel) */
.hd-rca-badge {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    background: linear-gradient(90deg, #1565c0 0%, #1e88e5 100%);
    color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 6px 10px; text-align: center;
    letter-spacing: .2px; line-height: 1.3;
    pointer-events: none;
}

/* Room left column (carousel + quickinfo) */
.hd-room-left {
    display: flex; flex-direction: column; align-items: stretch;
    width: 210px; min-width: 210px; flex-shrink: 0;
    padding: 0 0 12px 12px;
}
.hd-room-left .hd-room-carousel { border-radius: 0; margin: 0; }

/* Extra rows (rows 4+) hidden until "Xem thêm" is clicked */
.hd-pkg-extra { display: none; }
.hd-pkg-more-wrap {
    text-align: center; padding: 8px 0 6px;
    border-top: 1px solid #f0f4f8;
}
.hd-pkg-showmore {
    background: none; border: 1.5px solid #bfdbfe; border-radius: 20px;
    color: #1e73be; font-size: 12.5px; font-weight: 700;
    padding: 5px 20px; cursor: pointer;
    transition: background .15s, color .15s;
}
.hd-pkg-showmore:hover { background: #eff6ff; color: #1558a0; }
.hd-room-quickinfo {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-top: none; border-radius: 0 0 10px 10px;
    padding: 8px 10px 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.hd-rqi-area { font-size: 12px; color: #475569; font-weight: 600; }
.hd-rqi-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hd-rqi-tag {
    font-size: 11px; color: #374151; background: #e2e8f0;
    border-radius: 20px; padding: 2px 7px; white-space: nowrap; line-height: 1.5;
}
.hd-detail-link {
    display: block; text-align: center;
    font-size: 12px; font-weight: 700; color: #1e73be;
    text-decoration: none; padding: 5px 0;
    border: 1.5px solid #bfdbfe; border-radius: 8px;
    background: #eff6ff; transition: background .15s, color .15s;
    margin-top: 2px;
}
.hd-detail-link:hover { background: #dbeafe; color: #1558a0; }

/* Room detail modal */
.hd-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6); z-index: 9100;
    align-items: center; justify-content: center;
    padding: 16px;
}
.hd-modal-overlay.open { display: flex; }
.hd-modal-box {
    background: #fff; border-radius: 16px;
    width: 100%; max-width: 900px; max-height: 90vh;
    overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.hd-modal-close {
    position: absolute; top: 10px; right: 10px; z-index: 10;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; border: none;
    font-size: 15px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.hd-modal-close:hover { background: rgba(0,0,0,.7); }
.hd-modal-inner {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
}
/* Gallery column */
.hd-modal-gallery {
    width: 380px; min-width: 380px; flex-shrink: 0;
    display: flex; flex-direction: column; background: #111;
}
.hd-mg-main {
    position: relative; flex: 1; min-height: 0; background: #000;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hd-mg-main img {
    width: 100%; height: 280px; object-fit: cover; display: block;
    transition: opacity .25s;
}
.hd-mg-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.85); border: none; border-radius: 50%;
    width: 34px; height: 34px; font-size: 22px; line-height: 1;
    cursor: pointer; color: #1a202c; z-index: 2;
    display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: background .15s;
}
.hd-mg-nav:hover { background: #fff; }
.hd-mg-prev { left: 8px; }
.hd-mg-next { right: 8px; }
.hd-mg-counter {
    position: absolute; bottom: 8px; right: 10px;
    background: rgba(0,0,0,.5); color: #fff;
    font-size: 11px; padding: 3px 9px; border-radius: 20px;
}
.hd-mg-thumbs {
    display: flex; gap: 5px; padding: 8px;
    overflow-x: auto; background: #1a202c; flex-shrink: 0;
}
.hd-mg-thumbs::-webkit-scrollbar { height: 4px; }
.hd-mg-thumbs::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
.hd-mg-thumb {
    width: 54px; height: 42px; flex-shrink: 0;
    object-fit: cover; border-radius: 5px; cursor: pointer;
    opacity: .55; border: 2px solid transparent;
    transition: opacity .15s, border-color .15s;
}
.hd-mg-thumb.active { opacity: 1; border-color: #e91e8c; }
.hd-mg-thumb:hover { opacity: .85; }
/* Info column */
.hd-modal-info {
    flex: 1; min-width: 0; padding: 20px 22px;
    overflow-y: auto; display: flex; flex-direction: column; gap: 0;
}
.hd-mi-name {
    font-size: 19px; font-weight: 800; color: #1a202c;
    margin: 0 0 10px; line-height: 1.3;
}
#hd-mi-amenities { flex: 1; overflow-y: auto; }

/* Section wrapper */
.hd-mia-section {
    padding: 14px 0;
    border-bottom: 1px solid #f0f4f8;
}
.hd-mia-section:last-child { border-bottom: none; }
.hd-mia-title {
    font-size: 13.5px; font-weight: 700; color: #1a202c;
    margin-bottom: 10px;
}

/* 1. Thông tin phòng */
.hd-mia-info-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #374151; padding: 4px 0;
}
.hd-mia-svg {
    width: 18px; height: 18px; color: #64748b; flex-shrink: 0;
}
.hd-mia-svg-child { width: 15px; height: 15px; color: #94a3b8; }

/* 2. Tính năng phòng bạn thích */
.hd-mia-highlight-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: #1e293b; padding: 5px 0;
}
.hd-mia-hi-icon { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex-shrink: 0; }

/* 3-5. Danh sách tiện nghi theo danh mục */
.hd-mia-list {
    list-style: disc; padding-left: 18px;
    margin: 0; display: block;
    font-size: 13px; color: #374151;
}
.hd-mia-list li { padding: 3px 0; }
.hd-mia-list-2col {
    columns: 2; column-gap: 16px;
}
/* Về phòng này */
.hd-mi-notes {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f0f4f8;
}
.hd-mn-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #94a3b8; margin-bottom: 8px;
}
.hd-mn-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(2,1fr); gap: 5px;
}
.hd-mn-item {
    font-size: 12.5px; color: #374151;
    display: flex; align-items: baseline; gap: 5px;
}
.hd-mn-item::before { content: '•'; color: #94a3b8; flex-shrink: 0; }
.hd-mn-extra { display: none; }
.hd-mn-toggle {
    display: inline-block; margin-top: 8px;
    background: none; border: none; padding: 0;
    font-size: 12.5px; font-weight: 700; color: #1e73be;
    cursor: pointer; text-decoration: none;
    transition: color .15s;
}
.hd-mn-toggle:hover { color: #1558a0; }

.hd-mi-footer {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid #f0f4f8; flex-shrink: 0;
}
.hd-mi-price-lbl { font-size: 11px; color: #94a3b8; margin-bottom: 2px; }
.hd-mi-price {
    font-size: 22px; font-weight: 800; color: #e91e8c;
    margin-bottom: 10px;
}
.hd-mi-price span { font-size: 12px; font-weight: 400; color: #94a3b8; }
.hd-mi-btn {
    display: block; text-align: center;
    background: #e91e8c; color: #fff;
    padding: 11px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    transition: background .15s;
}
.hd-mi-btn:hover { background: #be185d; }
/* No images placeholder */
.hd-modal-gallery.hd-mg-empty {
    align-items: center; justify-content: center;
    color: #94a3b8; font-size: 14px;
}
@media (max-width: 700px) {
    .hd-modal-inner { flex-direction: column; }
    .hd-modal-gallery { width: 100%; min-width: 0; }
    .hd-mg-main img { height: 200px; }
    .hd-modal-box { max-height: 95vh; }
    /* Room left responsive */
    .hd-room-content { flex-direction: column; }
    .hd-room-left { width: 100% !important; min-width: 0 !important; padding: 10px 10px 0; }
    .hd-room-left .hd-room-carousel { width: 100%; min-width: 0; min-height: 190px; }
    .hd-room-quickinfo { margin: 0; }
    .hd-room-body { padding: 0 12px 12px; }
    .hd-pkg-guests { display: none; }
}

/* Availability search form */
.hd-avail-form { background: #f0f7ff; border: 1.5px solid #bfdbfe; border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; }
.hd-avail-fields { display: flex; gap: 10px; align-items: flex-end; flex-wrap: nowrap; }
.hd-avail-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 100px; }
.hd-avail-field > label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; line-height: 1; margin: 0 !important; padding: 0 !important; }
.hd-avail-field-btn { flex: 0 0 auto; align-self: flex-end; }
.hd-avail-field-btn label { display: none !important; }
/* Override global input { margin: 8px 0 20px } */
.hd-avail-field input[type="date"],
.hd-avail-field select {
    height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1.5px solid #cbd5e0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #1a202c !important;
    outline: none !important;
    background: #fff !important;
    width: 100% !important;
    transition: border-color .15s, box-shadow .15s;
}
.hd-avail-field input[type="date"]:focus,
.hd-avail-field select:focus {
    border-color: #1e73be !important;
    box-shadow: 0 0 0 3px rgba(30,115,190,.1) !important;
}
.hd-avail-btn {
    height: 40px; box-sizing: border-box;
    background: #1e73be; color: #fff; border: none; border-radius: 10px;
    padding: 0 18px; font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap; display: block; margin: 0;
    transition: background .15s;
}
.hd-avail-btn:hover { background: #1558a0; }
.hd-avail-active { margin-top: 10px; font-size: 12.5px; color: #1e40af; background: #dbeafe; border-radius: 10px; padding: 7px 12px; display: flex; align-items: center; gap: 8px; }
.hd-avail-active a { margin-left: auto; color: #dc2626; font-weight: 700; text-decoration: none; }

/* Sold out room */
.hd-room-soldout { opacity: .75; background: #fafafa !important; }

/* ══ Package table ══════════════════════════════════════════ */
.hd-pkg-wrap { overflow-x: auto; }
.hd-pkg-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }

/* Head */
.hd-pkg-table thead tr { background: #f8fafc; border-bottom: 2px solid #e8edf2; }
.hd-pkg-table th {
    padding: 10px 12px; font-size: 11px; font-weight: 700;
    color: #64748b; text-transform: uppercase; letter-spacing: .5px;
    text-align: left; white-space: nowrap;
}
.hd-th-center { text-align: center !important; }

/* Rows */
.hd-pkg-table td { padding: 12px; vertical-align: top; border-bottom: 1px solid #f0f4f8; }
.hd-pkg-row:last-child td { border-bottom: none; }
.hd-pkg-row:hover td { background: #f8fbff; }
.hd-pkg-soldout { opacity: .6; }

/* Option column */
.hd-pkg-option { min-width: 200px; }
.hd-pkg-name {
    font-size: 13.5px; font-weight: 700; color: #0f172a;
    margin-bottom: 5px; line-height: 1.35;
}
.hd-pkg-row-info {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #475569; margin-top: 4px; line-height: 1.4;
}
.hd-pkg-benefit { color: #1e73be !important; }
.hd-pkg-ico {
    width: 13px; height: 13px; flex-shrink: 0;
    color: inherit; vertical-align: middle;
}

/* Guests column */
.hd-pkg-guests { text-align: center; vertical-align: middle; min-width: 70px; }
.hd-person-wrap { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; position: relative; cursor: default; }
.hd-person-icon { width: 18px; height: 18px; color: #64748b; flex-shrink: 0; }
.hd-child-icon { width: 13px; height: 13px; color: #94a3b8; }
.hd-person-more { font-size: 10px; color: #94a3b8; font-weight: 700; }

/* Individual icon tooltip */
.hd-itip { position: relative; display: inline-flex; }
.hd-itip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,23,42,0.88);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 20;
}
.hd-itip:hover::after { opacity: 1; }

/* Group tooltip (Traveloka-style: shows full count on wrap hover) */
.hd-person-wrap[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,23,42,0.88);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 19;
}
.hd-person-wrap[data-tooltip]:hover::after { opacity: 1; }
.hd-person-wrap[data-tooltip]:has(.hd-itip:hover)::after { opacity: 0; }

/* Price column */
.hd-pkg-price { white-space: nowrap; min-width: 130px; vertical-align: middle; }
.hd-sale-badge {
    display: inline-block; background: #f97316; color: #fff;
    font-size: 10.5px; font-weight: 700; padding: 2px 9px;
    border-radius: 20px; letter-spacing: .3px; margin-bottom: 4px;
}
.hd-pkg-old { font-size: 11.5px; color: #a0aec0; text-decoration: line-through; }
.hd-pkg-cur { font-size: 17px; font-weight: 800; color: #dc2626; line-height: 1.2; margin-top: 1px; }
.hd-pkg-per { font-size: 11px; color: #94a3b8; margin-bottom: 3px; }
.hd-pkg-tax { font-size: 11px; color: #64748b; margin-top: 2px; white-space: normal; max-width: 130px; }
.hd-pkg-tax-excl { color: #ea580c !important; }

/* Avail column */
.hd-pkg-avail { text-align: center; vertical-align: middle; min-width: 72px; }
.hd-avail-badge { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hd-avail-num { font-size: 14px; font-weight: 700; color: #374151; }
.hd-avail-sold { color: #dc2626; font-size: 12px; }
.hd-avail-urgent { font-size: 11px; font-weight: 700; color: #dc2626; line-height: 1.3; text-align: center; }

/* Action column */
.hd-pkg-action { text-align: center; vertical-align: middle; min-width: 100px; padding: 12px 14px; }
.hd-btn-soldout {
    display: inline-block; text-align: center;
    background: #e2e8f0; color: #94a3b8;
    padding: 9px 16px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; cursor: not-allowed;
    white-space: nowrap;
}

/* Rules */
.hd-rules { display: flex; flex-direction: column; gap: 0; }
.hd-rule-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f4f8; }
.hd-rule-row:last-child { border-bottom: none; }
.hd-rule-icon  { font-size: 18px; width: 28px; text-align: center; }
.hd-rule-label { font-size: 13.5px; color: #64748b; width: 120px; flex-shrink: 0; }
.hd-rule-val   { font-size: 13.5px; color: #2d3748; font-weight: 600; }

/* Reviews */
.hd-review-item { padding: 16px 0; border-bottom: 1px solid #f0f4f8; }
.hd-review-item:last-child { border-bottom: none; }
.hd-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hd-review-avatar { width: 38px; height: 38px; background: linear-gradient(135deg,#e91e8c,#00b4d8); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.hd-review-name { font-size: 14px; font-weight: 700; color: #1a202c; }
.hd-review-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.hd-review-stars { margin-left: auto; font-size: 13px; }
.hd-review-text { margin: 0; font-size: 13.5px; color: #555; line-height: 1.6; }
.hd-no-reviews { color: #94a3b8; font-size: 14px; }

/* Sidebar */
.hd-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 60px; }
.hd-price-card { background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 4px 20px rgba(0,0,0,.1); border: 1.5px solid #e2f0ff; }
.hd-pc-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.hd-pc-old   { font-size: 13px; color: #a0aec0; text-decoration: line-through; }
.hd-pc-price { font-size: 28px; font-weight: 800; color: #e91e8c; line-height: 1.1; }
.hd-pc-price span { font-size: 14px; font-weight: 400; color: #64748b; }
.hd-pc-save  { font-size: 12px; color: #38a169; font-weight: 700; margin: 6px 0 14px; }
.hd-pc-btn   { display: block; background: linear-gradient(135deg,#e91e8c,#be185d); color: #fff; text-align: center; border-radius: 10px; padding: 13px; font-size: 14px; font-weight: 700; text-decoration: none; margin-bottom: 14px; transition: transform .15s; }
.hd-pc-btn:hover { transform: translateY(-1px); }
.hd-pc-notes { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #555; }

.hd-score-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.hd-sc-top  { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hd-sc-num  { background: #e91e8c; color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 28px; font-weight: 900; line-height: 1; flex-shrink: 0; }
.hd-sc-lbl  { font-size: 15px; font-weight: 700; }
.hd-sc-reviews { font-size: 12px; color: #94a3b8; margin-top: 3px; }
.rc-green { color: #16a34a; }
.rc-blue  { color: #0071c2; }
.rc-sky   { color: #f472b6; }
.rc-gray  { color: #718096; }
.hd-sc-row  { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hd-sc-cat  { font-size: 12px; color: #64748b; width: 70px; flex-shrink: 0; }
.hd-sc-bar  { flex: 1; height: 6px; background: #f0f4f8; border-radius: 3px; overflow: hidden; }
.hd-sc-fill { height: 100%; background: linear-gradient(90deg,#e91e8c,#00b4d8); border-radius: 3px; }
.hd-sc-val  { font-size: 12px; font-weight: 700; color: #2d3748; width: 28px; text-align: right; }

.hd-loc-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.hd-lc-title  { font-size: 13px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
.hd-lc-addr   { font-size: 13px; color: #555; margin-bottom: 5px; line-height: 1.5; }
.hd-lc-region { font-size: 13px; color: #e91e8c; font-weight: 600; margin-bottom: 10px; }
.hd-lc-times  { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #64748b; margin-bottom: 10px; }
.hd-lc-maplink { display: inline-block; margin-top: 2px; font-size: 12.5px; color: #1e73be; font-weight: 600; text-decoration: none; }
.hd-lc-maplink:hover { text-decoration: underline; }

.hd-quick-card { background: linear-gradient(135deg,#fdf4ff,#fce7ff); border-radius: 14px; padding: 18px; border: 1px solid #f5d0fe; }
.hd-qc-title   { font-size: 13px; font-weight: 700; color: #1a202c; margin-bottom: 10px; }
.hd-qc-item    { font-size: 13px; color: #2d3748; padding: 4px 0; }

/* Sidebar related hotels */
.hd-related-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04); }
.hd-rc-title { font-size: 13px; font-weight: 700; color: #1a202c; margin-bottom: 12px; }
.hd-rc-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f4f8; text-decoration: none; color: inherit; transition: background .15s; }
.hd-rc-item:last-child { border-bottom: none; padding-bottom: 0; }
.hd-rc-item:hover .hd-rc-name { color: #e91e8c; }
.hd-rc-img { width: 60px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.hd-rc-info { flex: 1; min-width: 0; }
.hd-rc-name { font-size: 13px; font-weight: 600; color: #1a202c; line-height: 1.3; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.hd-rc-price { font-size: 13px; font-weight: 700; color: #e91e8c; }
.hd-rc-price span { font-size: 11px; font-weight: 400; color: #718096; }
.hd-rc-rating { font-size: 11px; color: #718096; margin-top: 2px; }

/* Sidebar map widget */
.hd-sidebar-map { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04); margin-top: 16px; }
.hd-sm-title { font-size: 13px; font-weight: 700; color: #1a202c; margin-bottom: 10px; }
.hd-sidebar-map .hd-map-wrap { position: relative; border-radius: 10px; overflow: hidden; height: 200px; }
.hd-sidebar-map .hd-map-wrap iframe { display: block; width: 100%; height: 200px; border-radius: 10px; }
.hd-map-openlink {
    position: absolute; top: 8px; left: 8px; z-index: 10;
    background: #fff; color: #1a73e8; font-size: 12px; font-weight: 600;
    padding: 5px 10px; border-radius: 6px; text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.hd-map-openlink:hover { background: #1a73e8; color: #fff; }
.hd-sm-addr { font-size: 12px; color: #718096; margin-top: 8px; line-height: 1.4; }
.hd-sm-nearby { margin-top: 14px; border-top: 1px solid #f0f4f8; padding-top: 12px; }
.hd-sm-nearby-title { font-size: 12px; font-weight: 700; color: #4a5568; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.hd-sm-nearby-item { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f7fafc; }
.hd-sm-nearby-item:last-child { border-bottom: none; }
.hd-sm-nearby-icon { font-size: 14px; flex-shrink: 0; }
.hd-sm-nearby-name { font-size: 12px; color: #2d3748; flex: 1; }
.hd-sm-nearby-dist { font-size: 11px; color: #a0aec0; white-space: nowrap; }

/* Responsive */
@media (max-width: 900px) {
    .hd-grid    { grid-template-columns: 1fr; }
    .hd-sidebar { position: static; }
    .hd-gallery { height: 300px; }
    .hd-amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .hd-room-left { width: 180px; min-width: 180px; }
    .hd-room-opts { display: none; }
}
@media (max-width: 600px) {
    .hd-gallery { grid-template-columns: 1fr; height: auto; }
    .hd-gallery-grid { display: none; }
    .hd-gallery-main { height: 240px; }
    .hd-nav-tabs { gap: 0; }
    .hd-nav-tab { padding: 12px 10px; font-size: 12px; }
    .hd-amenities-grid { grid-template-columns: 1fr; }
    .hd-rca-btn { display: flex; }
    .hd-room-opts { display: flex; }
    .hd-room-footer { flex-wrap: wrap; }
    .hd-name { font-size: 20px; }
}

/* ===== HOME REDESIGN ===== */
.home-section { padding: 52px 0; }
.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; }
.home-section-title { font-size: 24px; font-weight: 800; color: #1a202c; margin: 0 0 6px; font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif; }
.home-section-sub { font-size: 14px; color: #64748b; margin: 0; }
.home-see-all { font-size: 14px; font-weight: 600; color: #1a202c; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.home-see-all:hover { color: #e91e8c; text-decoration: underline; }

/* Promo banner */
.home-promo-banner { display: flex; align-items: center; gap: 32px; background: linear-gradient(135deg, #fffde7, #fce4fd); border-radius: 20px; padding: 36px; border: 1px solid #f9d5fc; box-shadow: 0 4px 24px rgba(233,30,140,.08); }
.hpb-content { flex: 1; }
.hpb-tag { display: inline-block; background: #e91e8c; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 12px; letter-spacing: .3px; }
.hpb-title { font-size: 30px; font-weight: 800; color: #1a202c; margin: 0 0 10px; font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif; line-height: 1.25; }
.hpb-desc { font-size: 15px; color: #4a5568; margin: 0 0 20px; line-height: 1.7; font-weight: 400; }
.hpb-btn { display: inline-block; background: #e91e8c; color: #fff; padding: 12px 30px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all .2s; letter-spacing: .2px; }
.hpb-btn:hover { background: #be185d; transform: translateY(-1px); }
.hpb-image { width: 300px; flex-shrink: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.15); }
.hpb-image img { width: 100%; height: 320px; object-fit: cover; object-position: top; display: block; }

/* Location cards */
.location-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; display: block; }
.location-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.location-card:hover img { transform: scale(1.06); }
.location-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px 18px; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%); color: #fff; }
.location-count-badge { display: inline-block; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.3); }
.location-name { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.location-desc { font-size: 12px; opacity: .85; line-height: 1.4; }

/* Search type tabs */
.hsb-tabs-wrap { display: flex; justify-content: center; gap: 4px; margin-bottom: 14px; }
.hsb-tab-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.25); border-radius: 24px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; font-family: 'Be Vietnam Pro', sans-serif; }
.hsb-tab-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.hsb-tab-btn.active { background: #fff; color: #e91e8c; border-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.15); }

/* Date & guests field sizing */
.hsb-date { flex: 1; min-width: 0; }
.hsb-guests { flex: 1; min-width: 0; }
input[type="date"].hsb-input { min-width: 0; }

/* Hero filter pills */
.hero-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.hfp { background: rgba(255,255,255,.18); backdrop-filter: blur(4px); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; }
.hfp:hover { background: rgba(255,255,255,.35); }

/* ===== Featured Hotels Recommended (Agoda style) ===== */
.fhr-section { background: #f8fafc; }
.fhr-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; }

/* Location tabs */
.fhr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 2px solid #e2e8f0; padding-bottom: 0; }
.fhr-tab { background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; transition: all .2s; border-radius: 0; font-family: 'Be Vietnam Pro', sans-serif; }
.fhr-tab:hover { color: #e91e8c; }
.fhr-tab.active { color: #e91e8c; border-bottom-color: #e91e8c; }

/* Tab pane */
.fhr-pane { display: none; }
.fhr-pane.active { display: block; }

/* Hotel cards grid */
.fhr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Individual card */
.fhr-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.fhr-card:hover { transform: translateY(-5px); box-shadow: 0 10px 32px rgba(0,0,0,.13); }

.fhr-img { position: relative; height: 180px; overflow: hidden; background: #e2e8f0; }
.fhr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fhr-card:hover .fhr-img img { transform: scale(1.06); }
.fhr-badge-deal { position: absolute; top: 10px; left: 10px; background: #e91e8c; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.fhr-badge-hot  { position: absolute; top: 10px; right: 10px; background: #ff6b35; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

.fhr-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fhr-loc { font-size: 11px; color: #94a3b8; font-weight: 600; letter-spacing: .3px; }
.fhr-name { font-size: 15px; font-weight: 700; color: #1a202c; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fhr-rating { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.fhr-score { background: #16a34a; color: #fff; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 6px; flex-shrink: 0; }
.fhr-rlabel { font-size: 12px; font-weight: 700; color: #2d3748; }
.fhr-rcount { font-size: 11px; color: #94a3b8; }
.fhr-price { display: flex; align-items: baseline; gap: 3px; margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f4f8; }
.fhr-price-from { font-size: 11px; color: #94a3b8; }
.fhr-price-val { font-size: 18px; font-weight: 800; color: #e91e8c; }
.fhr-price-unit { font-size: 11px; color: #94a3b8; }

@media (max-width: 900px) { .fhr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .fhr-grid { grid-template-columns: 1fr; } .fhr-tabs { gap: 2px; } .fhr-tab { padding: 8px 12px; font-size: 13px; } }

/* Blog grid */
.home-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); transition: transform .2s, box-shadow .2s; }
.home-blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.home-blog-img-wrap { position: relative; height: 200px; overflow: hidden; background: #e2e8f0; }
.home-blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.home-blog-card:hover .home-blog-img-wrap img { transform: scale(1.05); }
.home-blog-no-img { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 48px; }
.home-blog-loc-tag { position: absolute; top: 14px; left: 14px; background: #e91e8c; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 20px; letter-spacing: .5px; }
.home-blog-body { padding: 20px; }
.home-blog-meta { display: flex; gap: 12px; font-size: 12px; color: #94a3b8; margin-bottom: 10px; font-weight: 600; }
.home-blog-title { font-size: 16px; font-weight: 700; color: #1a202c; margin: 0 0 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-blog-excerpt { font-size: 13px; color: #64748b; line-height: 1.6; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-blog-btn { display: inline-block; background: #e91e8c; color: #fff; font-size: 12px; font-weight: 800; padding: 8px 20px; border-radius: 8px; text-decoration: none; letter-spacing: .5px; transition: background .2s; }
.home-blog-btn:hover { background: #be185d; }

@media (max-width: 900px) {
    .home-blog-grid { grid-template-columns: 1fr 1fr; }
    .hpb-image { display: none; }
    .hpb-title { font-size: 22px; }
}
@media (max-width: 600px) {
    .home-blog-grid { grid-template-columns: 1fr; }
    .home-section-head { flex-direction: column; align-items: flex-start; }
}

/* ===== USER PANEL ===== */
.up-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 16px; }
.up-layout { display: flex; gap: 24px; align-items: flex-start; }

/* Sidebar */
.up-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 20px; }
.up-avatar-wrap { background: linear-gradient(135deg, #e91e8c, #f472b6); border-radius: 16px; padding: 24px; text-align: center; color: #fff; margin-bottom: 12px; }
.up-avatar { width: 64px; height: 64px; background: rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin: 0 auto 10px; border: 3px solid rgba(255,255,255,.5); }
.up-avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; border: 3px solid rgba(255,255,255,.5); display: block; }
.up-user-name { font-weight: 700; font-size: 15px; }
.up-user-email { font-size: 12px; opacity: .8; margin-top: 3px; word-break: break-all; }
.up-joined { font-size: 11px; opacity: .7; margin-top: 6px; }
.up-badge-wrap { margin-top: 10px; }
.up-pending-badge { background: rgba(255,255,255,.25); font-size: 11px; padding: 3px 10px; border-radius: 20px; }

/* Nav */
.up-nav { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 12px; }
.up-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: #4a5568; text-decoration: none; transition: all .18s; width: 100%; background: none; border: none; cursor: pointer; }
.up-nav-item:hover { background: #fdf4ff; color: #e91e8c; }
.up-nav-item.active { background: #eff6ff; color: #e91e8c; font-weight: 700; }
.up-nav-count { margin-left: auto; background: #e91e8c; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.up-nav-logout { color: #ef4444; }
.up-nav-logout:hover { background: #fef2f2; color: #dc2626; }

/* Stats */
.up-stats { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); display: grid; grid-template-columns: repeat(3,1fr); text-align: center; }
.up-stat-item { padding: 10px 4px; }
.up-stat-item + .up-stat-item { border-left: 1px solid #f0f4f8; }
.up-stat-num { font-size: 20px; font-weight: 800; color: #e91e8c; }
.up-stat-lbl { font-size: 11px; color: #718096; margin-top: 2px; }

/* Main content */
.up-main { flex: 1; min-width: 0; }
.up-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.up-alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.up-alert-error { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.up-alert-error ul { margin: 0; padding-left: 16px; }

/* Cards */
.up-card { background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 16px; border: 1px solid rgba(0,0,0,.04); }
.up-card-header { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #1a202c; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #f0f4f8; }

/* Forms */
.up-form { display: flex; flex-direction: column; gap: 14px; }
.up-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.up-field { display: flex; flex-direction: column; gap: 5px; }
.up-field-full { grid-column: 1 / -1; }
.up-field label { font-size: 13px; font-weight: 600; color: #374151; }
.up-field input { border: 1.5px solid #e2e8f0; border-radius: 9px; padding: 10px 13px; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.up-field input:focus { border-color: #e91e8c; box-shadow: 0 0 0 3px rgba(233,30,140,.1); }
.up-error { color: #ef4444; font-size: 12px; margin-top: 3px; }
.up-btn { padding: 11px 28px; border: none; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.up-btn-primary { background: #e91e8c; color: #fff; }
.up-btn-primary:hover { background: #be185d; }
.up-btn-green { background: #10b981; color: #fff; }
.up-btn-green:hover { background: #059669; }

/* Booking rows */
.up-booking-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid #f0f4f8; }
.up-booking-row:last-child { border-bottom: none; padding-bottom: 0; }
.up-bk-left { display: flex; gap: 14px; flex: 1; min-width: 0; }
.up-bk-hotel-img { width: 80px; height: 68px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #f0f4f8; display: flex; align-items: center; justify-content: center; }
.up-bk-hotel-img img { width: 100%; height: 100%; object-fit: cover; }
.up-bk-no-img { font-size: 28px; }
.up-bk-info { flex: 1; min-width: 0; }
.up-bk-code { font-size: 11px; color: #94a3b8; font-family: monospace; margin-bottom: 3px; }
.up-bk-hotel { font-size: 15px; font-weight: 700; color: #1a202c; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bk-room { font-size: 13px; color: #4a5568; margin-bottom: 3px; }
.up-bk-dates { font-size: 12px; color: #64748b; margin-bottom: 3px; }
.up-bk-pm { font-size: 12px; color: #64748b; }
.up-bk-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.up-bk-price { font-size: 17px; font-weight: 800; color: #e91e8c; }
.up-bk-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Status badges */
.up-status-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.up-st-pending   { background: #fef3c7; color: #92400e; }
.up-st-confirmed { background: #d1fae5; color: #065f46; }
.up-st-completed { background: #ede9fe; color: #5b21b6; }
.up-st-cancelled { background: #fee2e2; color: #991b1b; }

/* Small buttons */
.up-btn-sm { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; transition: all .2s; }
.up-btn-blue    { background: #e91e8c; color: #fff; }
.up-btn-blue:hover { background: #be185d; }
.up-btn-red     { background: #fee2e2; color: #ef4444; border: 1px solid #fca5a5; }
.up-btn-red:hover { background: #fecaca; }
.up-btn-outline { background: #fff; color: #e91e8c; border: 1.5px solid #e91e8c; }

/* Empty state */
.up-empty { text-align: center; padding: 48px 20px; color: #94a3b8; }
.up-empty-icon { font-size: 48px; margin-bottom: 12px; }
.up-empty p { margin-bottom: 16px; font-size: 15px; }

@media (max-width: 768px) {
    .up-layout { flex-direction: column; }
    .up-sidebar { width: 100%; position: static; }
    .up-grid-2 { grid-template-columns: 1fr; }
    .up-field-full { grid-column: auto; }
    .up-booking-row { flex-direction: column; }
    .up-bk-right { text-align: left; align-items: flex-start; }
}

/* ============================================================
   MOBILE RESPONSIVE - COMPREHENSIVE
   ============================================================ */

/* --- Hamburger button --- */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #1a202c;
    border-radius: 2px;
    transition: all .3s;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
    /* ===== HÀNG 2: Nav links tĩnh, trải đều full width =====
       Không dùng drawer nữa — nav luôn hiện, nằm hàng thứ 2 của header
    ========================================================== */
    .nav-hamburger { display: none !important; }   /* Không cần hamburger */

    /* ===== HÀNG 2: Nav là direct child của header-flex =====
       flex-wrap:wrap + order:10 + flex:0 0 100% → xuống hàng 2 full width
    ========================================================== */
    .nav-hamburger { display: none !important; }

    #mainNav {
        /* Hủy drawer behavior */
        position: static !important;
        top: auto !important; right: auto !important; left: auto !important;
        height: auto !important; min-height: 0 !important;
        /* Chiếm toàn bộ hàng 2 */
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 10 !important;
        /* Layout ngang */
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        /* Style nav bar - nền trắng rõ ràng */
        background: #fff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        overflow: hidden !important;
        z-index: 1 !important;
        transition: none !important;
    }

    /* Overlay: ẩn hoàn toàn */
    #mainNav::before { display: none !important; content: none !important; }

    /* Mỗi link: chiếm phần đều nhau, active dùng border-bottom */
    #mainNav a {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 2px 7px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        white-space: nowrap !important;
        border-bottom: 2.5px solid transparent !important;
        border-right: 1px solid #f0f4f8 !important;
        width: auto !important;
        margin: 0 !important;
        text-decoration: none !important;
        transition: color .15s, border-color .15s, background .15s !important;
        background: none !important;
        border-radius: 0 !important;
    }
    #mainNav a:last-child { border-right: none !important; }
    #mainNav a.active {
        color: #e91e8c !important;
        border-bottom-color: #e91e8c !important;
        font-weight: 700 !important;
        background: rgba(233,30,140,.05) !important;
    }
    #mainNav a:hover:not(.active) { color: #e91e8c !important; background: rgba(233,30,140,.03) !important; }

    /* ---- User-dropdown: đã định nghĩa trong block trên ---- */

    /* Dropdown menu vẫn dùng position absolute (bình thường) — không cần ghi đè */

    /* ---- Container ---- */
    .container { padding: 0 16px; }

    /* ---- Hero search ---- */
    .hero-search-box {
        flex-direction: column !important;
        gap: 0 !important;
        border-radius: 14px !important;
        padding: 12px !important;
    }
    .hsb-field {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 4px !important;
    }
    .hsb-field:last-of-type { border-bottom: none; }
    .hsb-btn {
        width: 100%;
        margin: 10px 0 0 !important;
        justify-content: center;
        border-radius: 10px !important;
    }
    .hero-filter-pills { flex-wrap: wrap; gap: 6px; justify-content: center; }

    /* ---- Home sections ---- */
    .home-hotels-grid,
    .home-weekend-grid { grid-template-columns: 1fr !important; }
    .home-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* ---- Promo banner ---- */
    .promo-banner-inner { flex-direction: column !important; gap: 16px; }
    .promo-banner-img { width: 100% !important; max-width: 100% !important; }

    /* ---- Hotel cards ---- */
    .hotel-card { flex-direction: column; }
    .hotel-img { width: 100% !important; height: 200px !important; }

    /* ---- Locations grid ---- */
    .locations-grid { grid-template-columns: 1fr !important; }

    /* ---- Blog grid ---- */
    .hs-blog-grid { grid-template-columns: 1fr !important; }
    .home-blog-grid { grid-template-columns: 1fr !important; }

    /* ---- Footer ---- */
    .footer-container { grid-template-columns: 1fr !important; gap: 24px; }
    .footer-socials { margin-top: 12px; }
    .fp-icons { flex-wrap: wrap; }

    /* ---- Booking page ---- */
    .bk-layout { flex-direction: column !important; }
    .bk-sidebar { position: static !important; width: 100% !important; }
    .bk-pm-grid { grid-template-columns: 1fr !important; }
    .bk-grid-2 { grid-template-columns: 1fr !important; }

    /* ---- Payment page ---- */
    .payment-grid { flex-direction: column; }

    /* ---- Chatbot ---- */
    .chatbot-box { width: calc(100vw - 32px) !important; max-width: 360px; }
    .chatbot-container { right: 16px !important; bottom: 80px !important; }
    .chatbot-messages { height: 240px; }
    .chatbot-quick-questions { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .chatbot-quick-questions::-webkit-scrollbar { display: none; }
    .chatbot-quick-btn { flex-shrink: 0; }

    /* ---- Contact floating ---- */
    .contact-toggle-btn { width: 52px; height: 52px; }
    .contact-buttons { gap: 8px; }

    /* ---- Hotel detail ---- */
    .hd-grid { grid-template-columns: 1fr !important; }
    .hd-sidebar { display: flex; flex-direction: column; }
}

/* ---- Tablet (769px - 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .home-hotels-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .locations-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .footer-container { grid-template-columns: repeat(2, 1fr) !important; }
    .hero-search-box { flex-wrap: wrap; }
    .hsb-field { flex: 1 1 40%; }

    /* Rút margin giữa nav links trên tablet để vừa màn hình */
    .header nav a { margin-left: 12px; font-size: 13.5px; }
    .btn-login-nav { padding: 7px 14px !important; font-size: 13px !important; }
    .nav-contact-btn { padding: 7px 12px; font-size: 13px; }
}

/* ---- Very small screens (≤400px) ---- */
@media (max-width: 400px) {
    .header { padding: 8px 0 0; }
    /* !important để override inline style height:60px trên thẻ img */
    .logo-link img { height: 42px !important; }
    .hsb-btn { font-size: 14px; padding: 12px; }
    .hero-search-section { padding: 20px 12px 16px; }
    .chatbot-box { width: calc(100vw - 24px) !important; }
    .bk-pm-option { padding: 10px 12px; }
    /* Header 2 hàng: row1(~56px) + row2(~30px) = ~86px */
    .nav-contact-dropdown { top: 88px !important; }
}

/* ---- 360px (Samsung Galaxy S8+, Pixel) ---- */
@media (max-width: 360px) {
    .nav-contact-label { display: none; }
    .nav-contact-btn { padding: 6px 9px; gap: 0; }
    .btn-login-nav { font-size: 11px !important; padding: 5px 8px !important; }
    .header nav#mainNav a { font-size: 11px !important; padding: 7px 1px !important; }
    .nav-contact-dropdown { top: 88px; }
}

/* ---- Samsung Z Fold / cực nhỏ (≤340px) ---- */
@media (max-width: 340px) {
    .nav-contact-btn { padding: 6px 7px; gap: 0; }
    .header nav#mainNav a { font-size: 10px !important; padding: 6px 1px !important; }
    .nav-contact-dropdown { top: 86px; }
}

/* ---- Contact page ---- */
@media (max-width: 700px) {
    .contact-layout { flex-direction: column !important; }
    .contact-aside { width: 100% !important; flex-shrink: unset !important; }
}

/* ---- Blog grid ---- */
.blog-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .blog-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Hotels page filter ---- */
.hotels-filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
    cursor: pointer;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.hotels-filter-toggle:hover { background: #f8fafc; }

@media (max-width: 768px) {
    .hotels-filter-toggle { display: flex; }

    .hotels-layout { flex-direction: column !important; gap: 0 !important; }

    .hotels-filter-sidebar {
        width: 100% !important;
        flex-shrink: unset !important;
        display: none;
        margin-bottom: 16px;
    }
    .hotels-filter-sidebar.open { display: block; }

    .hotels-main { width: 100% !important; }

    /* Hotels grid 1 col on small screens */
    .hotels-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) {
    /* Always show sidebar on desktop */
    .hotels-filter-sidebar { display: block !important; width: 240px; }
}

/* ============================================================
   Favorite heart button on hotel cards
   ============================================================ */
.hc-fav-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .2s, background .2s;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.hc-fav-btn svg {
    width: 16px;
    height: 16px;
    color: #ccc;
    transition: color .2s;
}
.hc-fav-btn:hover { transform: scale(1.15); background: #fff; }
.hc-fav-btn:hover svg { color: #e91e8c; }
.hc-fav-btn.is-fav svg { color: #e91e8c; fill: #e91e8c; }
.hotel-card-img { position: relative; }

/* ============================================================
   Notification badge & dropdown items
   ============================================================ */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e91e8c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 6px;
    line-height: 1;
}
.dropdown-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.notif-read-all {
    background: none;
    border: none;
    color: #e91e8c;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    font-weight: 600;
}
.notif-item { align-items: flex-start !important; gap: 8px; }
.notif-text { font-size: 12px; line-height: 1.4; white-space: normal !important; }
.notif-unread { background: #fff8fc !important; }
.notif-unread::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e91e8c;
    margin-top: 5px;
    flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE GAPS — Comprehensive Mobile Fixes
   (Audit 2026-04-12)
   ============================================================ */

/* ---- 1. iOS: prevent input zoom (font-size < 16px triggers auto-zoom on Safari) ---- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---- 2. Hotel detail — room rows at 480px: full single column ---- */
@media (max-width: 480px) {
    .hd-table-head { display: none; }
    .hd-room-body { padding: 0 10px 10px; }
    .hd-room-footer { flex-wrap: wrap; gap: 10px; }
    .hd-room-name  { font-size: 14px; }
    .hd-gallery-grid { grid-template-columns: repeat(2,1fr) !important; height: 120px !important; }
    .hd-gallery-main { height: 220px !important; }
    .hd-nav-tabs { gap: 0; }
    .hd-nav-tab { padding: 10px 8px; font-size: 11px; }
    .hd-nav-book { display: none; }
    .hd-card { padding: 18px 14px; }
    .hd-card-title { font-size: 15px; }
    .hd-amenities-grid { grid-template-columns: 1fr !important; }
    .hd-lb-img-wrap { padding: 12px 54px; }
    .hd-lb-prev { left: 4px; } .hd-lb-next { right: 4px; }
    .hd-lb-prev, .hd-lb-next { width: 42px; height: 42px; font-size: 28px; }
    .hd-lb-tn { width: 54px; height: 40px; }
    .hd-lb-title { display: none; }
    .hd-sidebar { grid-template-columns: 1fr !important; }
}

/* ---- 3. Payment page — stack info rows and actions at 480px ---- */
@media (max-width: 480px) {
    .pmt-wrap  { padding: 16px 12px; }
    .pmt-body  { padding: 16px; }
    .pmt-info-row { flex-wrap: wrap; gap: 6px; }
    .pmt-info-content { min-width: 0; }
    .pmt-actions { flex-direction: column; gap: 8px; }
    .pmt-btn { flex: unset; width: 100%; }
    .pmt-order-code { font-size: 18px; letter-spacing: 1px; }
    .pmt-success-header { padding: 24px 16px; }
    .pmt-success-title { font-size: 18px; }
    .pmt-bank-info { font-size: 12.5px; line-height: 2; }
    .pmt-confirm-btn { font-size: 15px; padding: 13px; }
    .pmt-method-box { padding: 14px; }
    .pmt-method-step { gap: 8px; }
}

/* ---- 4. Booking form — further fixes at 480px ---- */
@media (max-width: 480px) {
    .bk-card { padding: 18px 14px; }
    .bk-card-title { font-size: 15px; }
    .bk-pm-option { padding: 10px 10px; }
    .bk-pm-name { font-size: 12px; }
    .bk-pm-desc { font-size: 10.5px; }
    .bk-sidebar { padding: 16px; }
    .bk-staytype-badge { font-size: 12px; padding: 6px 10px; }
    .bk-promo-banner { padding: 10px 12px; }
    .bk-sum-row { font-size: 13px; }
    .bk-sum-total { font-size: 14px; }
}

/* ---- 5. Hero section — font size at 480px ---- */
@media (max-width: 480px) {
    .hero-search-title { font-size: 22px !important; line-height: 1.3; }
    .hero-search-sub   { font-size: 14px !important; }
    .hero-search-section { padding: 24px 14px 20px !important; }
    .hsb-tabs-wrap { gap: 4px; flex-wrap: wrap; }
    .hsb-tab-btn { font-size: 12px; padding: 8px 12px; flex: 1; min-width: 90px; justify-content: center; }
    .hero-filter-pills { gap: 5px; }
}

/* ---- 6. QR Promo popup — prevent overflow on very small screens ---- */
@media (max-width: 380px) {
    .qrp-wrap { right: 12px !important; bottom: 140px; }
    .qrp-box  { width: calc(100vw - 24px) !important; max-width: 260px; }
}

/* ---- 7. My Bookings — additional 480px fixes ---- */
@media (max-width: 480px) {
    .up-wrap { padding: 20px 12px; }
    .up-card { padding: 16px; }
    .up-bk-hotel-img { width: 64px !important; height: 56px !important; }
    .up-bk-code { font-size: 11px; }
    .up-bk-hotel { font-size: 14px; }
    .up-bk-dates { font-size: 12px; }
    .up-bk-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .up-btn-sm { font-size: 12px; padding: 6px 10px; }
    .up-bk-price { font-size: 17px; }
}

/* ---- 8. Profile / User pages ---- */
@media (max-width: 480px) {
    .up-profile-form { padding: 0; }
    .up-sidebar { padding: 0; }
    .up-sidebar-card { padding: 16px; }
    .up-avatar-wrap { width: 68px; height: 68px; }
    .up-uname { font-size: 16px; }
}

/* ---- 9. Deals page — font + filter tabs at 480px ---- */
@media (max-width: 480px) {
    .deals-hero { padding: 40px 16px 28px !important; }
    .deals-hero-title { font-size: 22px !important; }
    .deals-hero-sub   { font-size: 14px !important; }
    .deals-filter-tab { font-size: 12px; padding: 7px 12px; white-space: nowrap; }
    .deals-how-title  { font-size: 20px; }
    .deals-card       { border-radius: 12px; }
    .deals-card-title { font-size: 17px; }
}

/* ---- 10. Chatbot — ensure panel fits on 375px ---- */
@media (max-width: 375px) {
    .chatbot-box { width: calc(100vw - 20px) !important; }
    .chatbot-container { right: 10px !important; bottom: 72px !important; }
    .chatbot-toggle-btn { right: 10px !important; width: 46px !important; height: 46px !important; }
    .chatbot-messages { height: 180px !important; }
    .chatbot-quick-btn { font-size: 11px; padding: 4px 10px; }
    .qrp-toggle-btn { display: none; }
}

/* ---- 11. Hotel card — action buttons at 480px ---- */
@media (max-width: 480px) {
    .hotel-card-actions { padding: 0 12px 12px; gap: 6px; }
    .hca-detail, .hca-book { font-size: 12px; padding: 8px 0; }
    .hotel-card-info { padding: 12px 12px 8px; }
    .hotel-name { font-size: 14px; }
    .hc-fav-btn { width: 30px; height: 30px; top: 8px; right: 8px; }
}

/* ---- 12. Nav contact btn — smaller on narrow phones ---- */
@media (max-width: 480px) {
    .nav-contact-btn { padding: 7px 10px; font-size: 12px; gap: 5px; }
}

/* ---- 13. Notification dropdown — mobile ---- */
@media (max-width: 480px) {
    .notif-text { font-size: 11px; }
    .notif-badge { font-size: 9px; min-width: 16px; height: 16px; }
}

/* ---- 14. My Favorites grid — prevent overflow at 320px ---- */
@media (max-width: 560px) {
    .hotels-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MOBILE TOUCH — loại bỏ 300ms tap delay trên tất cả thiết bị
   ============================================================ */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
label,
select,
.hsb-tab-btn,
.hsb-loc-item,
.hotel-card,
.hotel-card-link,
.hotel-card-actions a,
.location-card,
.fhr-tab,
.hca-detail,
.hca-book,
.hc-fav-btn,
.up-btn-sm,
.up-btn,
.bk-pm-option,
.dropdown-item,
.nav-hamburger,
.chatbot-toggle-btn,
.qrp-toggle-btn {
    touch-action: manipulation;
}

/* Tránh highlight xanh khi tap trên mobile */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Đảm bảo tất cả div có onclick đều có cursor pointer */
[onclick] {
    cursor: pointer;
}

/* ══ CẨM NANG DU LỊCH SECTION ═══════════════════════════════════════════════ */
.cnd-section { background:#fff; padding:64px 0 56px; }
.cnd-container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* Header */
.cnd-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.cnd-header-left { display:flex; align-items:center; gap:10px; }
.cnd-icon { font-size:22px; line-height:1; }
.cnd-title { font-size:22px; font-weight:800; color:#1a202c; margin:0; font-family:'Be Vietnam Pro',sans-serif; }

/* Carousel wrap + arrows hai bên (giống testimonials) */
.cnd-carousel-wrap { position:relative; padding:0 52px; }
.cnd-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#1a202c; font-size:18px; transition:box-shadow .2s, transform .2s; z-index:10; }
.cnd-arrow:hover { box-shadow:0 6px 22px rgba(0,0,0,.22); transform:translateY(-50%) scale(1.08); }
.cnd-arrow--prev { left:0; }
.cnd-arrow--next { right:0; }
@media(max-width:580px) { .cnd-arrow { display:none; } .cnd-carousel-wrap { padding:0; } }

/* Swiper wrapper */
.cndSwiper { width:100%; overflow:hidden; }
.cndSwiper .swiper-wrapper { display:flex; }

/* Card */
.cnd-card { display:block; position:relative; height:320px; border-radius:18px; overflow:hidden; text-decoration:none; box-shadow:0 4px 20px rgba(0,0,0,.1); transition:box-shadow .3s ease; }
.cnd-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.2); }

/* Card image */
.cnd-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.cnd-card:hover .cnd-card-img { transform:scale(1.06); }
.cnd-card-img-fallback { background:linear-gradient(135deg,#1e73be,#2563eb); display:flex; align-items:center; justify-content:center; }

/* Overlay */
.cnd-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 55%, transparent 100%); transition:background .3s ease; }
.cnd-card:hover .cnd-card-overlay { background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.28) 60%, transparent 100%); }

/* Card info */
.cnd-card-info { position:absolute; bottom:0; left:0; right:0; padding:22px 20px; }
.cnd-card-name { font-size:20px; font-weight:800; color:#fff; line-height:1.2; text-shadow:0 2px 8px rgba(0,0,0,.3); font-family:'Be Vietnam Pro',sans-serif; }
.cnd-card-sub { font-size:13px; color:rgba(255,255,255,.75); margin-top:4px; font-weight:500; }

/* Xem thêm */
.cnd-more-wrap { text-align:center; margin-top:32px; }
.cnd-more-btn { font-size:14.5px; font-weight:700; color:#1e73be; text-decoration:none; transition:all .2s; display:inline-block; padding:4px 0; border-bottom:2px solid transparent; }
.cnd-more-btn:hover { color:#1557a0; border-bottom-color:#1557a0; }

/* Responsive */
@media(max-width:1024px) { .cnd-section { padding:48px 0 40px; } }
@media(max-width:768px)  { .cnd-title { font-size:18px; } .cnd-card { height:260px; } }
@media(max-width:480px)  { .cnd-card { height:220px; } .cnd-card-name { font-size:17px; } }

/* ══ RESPONSIVE PATCH TOÀN DIỆN — MOBILE / TABLET ═══════════════════════════
   Mục tiêu: fix tất cả vấn đề trên mobile (≤768px) và tablet (769–1024px)
   Ngày: 2026-04-30
══════════════════════════════════════════════════════════════════════════════ */

/* 0. Prevent horizontal scroll globally */
html, body { overflow-x: hidden; max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   1. TABLET WIDE (769px – 900px): khoảng giữa mobile và desktop
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 900px) {

    /* Booking: stack thành 1 cột trên tablet nhỏ */
    .bk-layout   { flex-direction: column !important; align-items: center; }
    .bk-main     { width: 100% !important; max-width: 680px; }
    .bk-sidebar  { position: static !important; width: 100% !important; max-width: 680px; margin-top: 20px; }

    /* Hero search: keyword full-width hàng 1, date+guest hàng 2 */
    .hero-search-box  { flex-wrap: wrap !important; }
    .hsb-keyword      { flex: 1 1 100% !important; border-right: none !important; border-bottom: 1px solid #e2e8f0 !important; }
    .hsb-date         { flex: 1 1 auto !important; min-width: 140px !important; }
    .hsb-guests       { flex: 1 1 auto !important; min-width: 120px !important; }

    /* Hotels grid: 2 cột */
    .hotels-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Hotel detail: sidebar xuống dưới */
    .hd-grid     { grid-template-columns: 1fr !important; }
    .hd-sidebar  { order: 10; }

    /* Cẩm nang carousel: thu bớt padding */
    .cnd-carousel-wrap { padding: 0 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. MOBILE (481px – 768px): phones ngang + small tablets
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {

    /* Hotels grid: 2 cột (dễ dùng hơn 1 cột) */
    .hotels-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

    /* Weekend deals: 2 card trên hàng */
    .wd-slide { flex: 0 0 calc(50% - 10px) !important; }

    /* Hotel detail gallery: 2 ảnh/hàng */
    .hd-gallery-grid { grid-template-columns: repeat(2,1fr) !important; }

    /* Profile page */
    .profile-wrap { flex-direction: column !important; }
    .profile-sidebar { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. MOBILE (≤768px): common fixes
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Nav: tăng touch target lên ≥40px */
    #mainNav a { min-height: 40px !important; padding: 10px 4px !important; }

    /* Booking steps bar: compact */
    .bk-steps-inner   { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .bk-back-hotel    { font-size: 12px; }
    .bk-sn-label      { font-size: 11px; }

    /* Countdown bar: 1 dòng centered */
    .bk-countdown-bar { font-size: 12.5px; padding: 8px 12px; justify-content: center; flex-wrap: wrap; text-align: center; }

    /* Payment method rows: đảm bảo không bị cắt */
    .bk-pm-option     { padding: 12px 14px; }
    .bk-pm-meta       { flex-wrap: wrap; gap: 4px; }

    /* Blog detail: related posts 1 cột */
    .bld-related-grid  { grid-template-columns: 1fr !important; }

    /* Blog detail: hotel suggestions 2 cột */
    .bld-hotels-grid   { grid-template-columns: repeat(2,1fr) !important; }

    /* User dropdown: full-width trên mobile */
    .dropdown-menu { width: calc(100vw - 32px) !important; right: -10px !important; left: auto !important; max-height: 80vh; overflow-y: auto; }

    /* Hotel detail sticky nav: không bị khuất dưới header */
    .hd-nav-bar { top: 0 !important; }

    /* Promo/deals page */
    .deal-grid { grid-template-columns: 1fr !important; }

    /* User profile: stack */
    .up-layout   { flex-direction: column !important; }
    .up-sidebar  { width: 100% !important; position: static !important; }
    .profile-wrap { flex-direction: column !important; }
    .profile-sidebar { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. SMALL PHONES (≤480px): iphone SE, Galaxy A series
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Booking: padding nhỏ hơn */
    .bk-container  { padding: 0 12px; }
    .bk-section    { padding: 16px; }
    .bk-pm-option  { padding: 10px 12px; gap: 10px; }

    /* Blog detail: hotel grid 1 cột */
    .bld-hotels-grid { grid-template-columns: 1fr !important; }
    .bld-content { padding: 16px !important; }

    /* Homepage sections */
    .sg-story-grid  { flex-direction: column; }
    .sg-story-cursive { font-size: 32px !important; }

    /* Trust strip: 2 cột */
    .sg-trust-inner { grid-template-columns: repeat(2,1fr) !important; flex-wrap: wrap; }
    .sg-trust-item  { flex: 1 1 45%; }

    /* Testimonials: ẩn arrow */
    .sg-testi-arrow { display: none !important; }
    .sg-testi-carousel-wrap { padding: 0 !important; }

    /* Cẩm nang carousel */
    .cnd-carousel-wrap { padding: 0 !important; }

    /* Hotel detail tabs: scroll ngang */
    .hd-tabs   { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .hd-tab    { flex-shrink: 0; white-space: nowrap; }

    /* Booking: sidebar full width */
    .bk-sidebar-price { font-size: 20px; }

    /* Footer: center social icons */
    .footer-socials { justify-content: center; }

    /* Guests popup: full width */
    .hsb-guests-popup { width: calc(100vw - 32px) !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. VERY SMALL (≤360px): Samsung Galaxy S8, SE 1st gen
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    /* Nav: readable minimum */
    #mainNav a     { font-size: 11px !important; padding: 9px 2px !important; min-height: 38px !important; }
    .btn-login-nav { font-size: 11px !important; padding: 5px 8px !important; }

    /* Booking grid-2: 1 cột */
    .bk-grid-2 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. iOS SPECIFIC: prevent zoom on input focus
══════════════════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
    input:not([type="range"]),
    select,
    textarea { font-size: max(16px, 1em); }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. HOTEL DETAIL — responsive sticky + gallery
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hd-gallery { grid-template-columns: 1fr !important; gap: 8px; }
    .hd-gallery-main { height: 240px !important; }
    .hd-gallery-thumb { display: none !important; }
    .hd-room-grid { grid-template-columns: 1fr !important; }
    .hd-amenity-grid { grid-template-columns: repeat(2,1fr) !important; }
    .hd-book-bar { padding: 10px 16px; gap: 10px; }
    .hd-book-bar-price { font-size: 18px; }
    .hd-book-bar-btn { padding: 10px 20px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. HOTEL LIST PAGE — filter sidebar on tablet
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hotels-filter-sidebar { width: 200px !important; }
    .hotels-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. HERO SECTION — tablet optimization
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-search-box { max-width: 100%; }
    .hero-search-title { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. SAFE AREA (iPhone notch / Dynamic Island)
══════════════════════════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
    .header      { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    .bk-countdown-bar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    body         { padding-bottom: env(safe-area-inset-bottom); }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. TARGETED SMALL-SCREEN FIXES (≤480px)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Hotel detail: nav tabs scroll ngang khi không đủ chỗ */
    .hd-nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-shrink: 0;
    }
    .hd-nav-tabs::-webkit-scrollbar { display: none !important; }
    .hd-nav-tab { flex-shrink: 0 !important; white-space: nowrap !important; }

    /* Hotel detail: nearby grid 1 cột trên phone rất nhỏ */
    .hd-nearby-grid { grid-template-columns: 1fr !important; }

    /* Hero: giảm title size để không bị cắt */
    .hero-search-title { font-size: 22px !important; letter-spacing: 0 !important; }

    /* Blog list: padding bớt đi */
    .blog-cat-btn { font-size: 12px !important; padding: 5px 12px !important; }

    /* Booking confirm card compact */
    .hotel-confirm-card { padding: 20px 14px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. NOTE: landscape phone hero fix is in staygo-design.css (loads after)
   using @media (max-width:767px) and (orientation:landscape)
══════════════════════════════════════════════════════════════════════════ */