/* --- Variables & Bảng Màu Flatsome Mặc Định --- */
:root {
    --agoda-primary: var(--primary-color, #446084);
    --agoda-secondary: var(--secondary-color, #d26e4b);
    --agoda-success: var(--success-color, #7a9c59);
    --agoda-alert: var(--alert-color, #d26e4b);
    --agoda-base: #777777;
    --agoda-headline: #222222;
    
    --agoda-border-radius: 4px;
    --agoda-shadow: 0 3px 10px rgba(0,0,0,0.08);
    --agoda-border: #ececec;
}

.agoda-country-hotels { color: var(--agoda-base); }
.no-results { text-align:center; padding: 40px; color: var(--agoda-base); font-weight: 500;}

.agoda-btn {
    background: var(--agoda-primary);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--agoda-border-radius);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.3s;
    border: none;
    cursor: pointer;
    text-align: center;
}
.agoda-btn:hover { background: #334863; color: #fff;}
.btn-full { display: block; width: 100%; margin-top: 15px; }

/* --- 1. SEARCH BAR --- */
.agoda-search-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    background: #fff !important;
    border: 2px solid var(--agoda-primary) !important;
    border-radius: var(--agoda-border-radius) !important;
    margin-bottom: 20px !important;
    box-shadow: var(--agoda-shadow) !important;
    overflow: hidden !important;
}
.asb-group { 
    display: flex !important; 
    align-items: center !important; 
    padding: 10px 15px !important; 
    background: #fff !important; 
    margin: 0 !important; 
}
.asb-city { flex: 1; min-width: 150px; }
.asb-search { flex: 1.5; min-width: 200px; }
.asb-dates { flex: 1.5; min-width: 250px; white-space: nowrap; }

.asb-icon { font-size: 16px; margin-right: 8px; color: var(--agoda-primary); }
.date-sep { margin: 0 8px; color: var(--agoda-base); font-weight:bold;}

/* TRỊ DỨT ĐIỂM CSS FLATSOME CHO Ô CITY, TÌM KIẾM VÀ NGÀY THÁNG */
.agoda-search-bar input, 
.agoda-search-bar select {
    border: none !important; 
    outline: none !important; 
    width: 100% !important;
    font-size: 14px !important; 
    color: var(--agoda-headline) !important; 
    background: transparent !important; 
    cursor: pointer !important;
    font-family: inherit !important;
    margin: 0 !important;         /* Chống rớt dòng do margin mặc định */
    padding: 0 !important;        /* Căn lề chuẩn xác */
    box-shadow: none !important; 
    height: auto !important;
    min-height: unset !important;
    line-height: normal !important;
}
.asb-divider { width: 1px; background: var(--agoda-border); }

.agoda-btn.agoda-filter-btn {
    background: var(--agoda-secondary) !important;
    margin: 0 !important; 
    border-radius: 0 !important; 
    padding: 0 30px !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-shrink: 0 !important;
}
.agoda-btn.agoda-filter-btn:hover { background: #ba5f3f !important; }


/* --- 2. THANH CÔNG CỤ: SORT & LAYOUT NẰM CÙNG 1 HÀNG --- */
.agoda-toolbar-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* CSS cho cụm Sort by (Trị dứt điểm thuộc tính CSS của Flatsome) */
.agoda-sort-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    background: #fff;
    border: 1px solid var(--agoda-border);
    border-radius: var(--agoda-border-radius);
    padding: 0 15px;
    height: 38px; 
    white-space: nowrap; 
}
.sort-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--agoda-headline);
    margin-right: 5px;
    margin-bottom: 0 !important;
}
select.agoda-sort-filter {
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: var(--agoda-base) !important;
    background: transparent !important;
    cursor: pointer;
    padding: 0 20px 0 0 !important;
    margin: 0 !important;        
    width: auto !important;      
    box-shadow: none !important; 
    height: auto !important;
    min-height: unset !important;
    line-height: 1 !important;
}

/* CSS cho cụm Grid/List */
.agoda-layout-switcher {
    display: flex;
    gap: 6px;
}
.agoda-switch-btn {
    background: #fff; border: 1px solid var(--agoda-border); color: var(--agoda-base);
    width: 38px; height: 38px; 
    border-radius: var(--agoda-border-radius); cursor: pointer; 
    display: flex; align-items: center; justify-content: center; transition: 0.2s ease;
    padding: 0;
}
.agoda-switch-btn:hover { background: #f8fafc; }
.agoda-switch-btn.active { background: #f4f6f8; color: var(--agoda-primary); border-color: var(--agoda-primary); }


/* --- 3. LIST LAYOUT --- */
.agoda-results-container { position: relative; min-height: 200px; }
.agoda-loader { position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.8); z-index:10; display:flex; justify-content:center; padding-top:40px; font-weight:bold; color:var(--agoda-primary);}
.layout-list .agoda-items-wrapper { display: flex; flex-direction: column; gap: 20px; }

.agoda-card-list {
    display: flex; flex-direction: row; background: #fff;
    border-radius: var(--agoda-border-radius); border: 1px solid var(--agoda-border);
    overflow: hidden; transition: box-shadow 0.2s;
}
.agoda-card-list:hover { box-shadow: var(--agoda-shadow); }

.agoda-card-list .ac-img-wrap { width: 260px; flex-shrink: 0; }
.agoda-card-list .ac-img-wrap img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }

.agoda-card-list .ac-info-wrap { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.ac-title { font-size: 20px; font-weight: 700; color: var(--agoda-headline); margin: 0 0 8px 0; line-height: 1.3; }
.ac-stars-location { display: flex; align-items: center; margin-bottom: 12px; font-size: 13px; color: var(--agoda-base); font-weight:500;}
.ac-star-rating { color: #fbbc04; font-size: 14px; letter-spacing: 2px; margin-right: 12px; }

.ac-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;}
.tag-promo { background: #fff1f0; color: var(--agoda-alert); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; border: 1px solid #ffd8d6;}
.tag-guarantee { color: var(--agoda-success); font-size: 12px; font-weight: 600; display: flex; align-items:center;}
.tag-guarantee::before { content: "•"; margin-right: 4px; font-size:16px;}

.ac-amenities { margin-bottom: 15px; display:flex; gap: 8px;}
.ac-amenities span { font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 500;}
.tag-wifi { background: #f0fdf4; color: var(--agoda-success); border: 1px solid #dcfce7;}
.tag-breakfast { background: #f8fafc; color: var(--agoda-base); border: 1px solid var(--agoda-border);}

.ac-reviews-count { font-size: 12px; color: var(--agoda-base); margin-top: auto;}

.agoda-card-list .ac-action-wrap {
    width: 220px; flex-shrink: 0; padding: 20px; border-left: 1px solid var(--agoda-border);
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; background: #fdfdfd;
}

.ac-score-top { display: flex; align-items: flex-start; gap: 10px; }
.ac-score-text-wrap { text-align: right; }
.ac-score-text { font-weight: 700; color: var(--agoda-headline); font-size: 14px;}
.ac-score-box {
    background: var(--agoda-success); color: #fff; font-size: 18px; font-weight: 700;
    padding: 8px 10px; border-radius: var(--agoda-border-radius); line-height: 1;
}

.ac-price-bottom { display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: 100%;}
.price-label { font-size: 12px; color: var(--agoda-base); margin-bottom: 2px; }
.price-regular { font-size: 14px; color: var(--agoda-base); text-decoration: line-through; margin-bottom: 2px; }
.price-sale { font-size: 24px; color: var(--agoda-alert); font-weight: 700; line-height: 1; margin-bottom: 12px; }

/* --- 4. GRID LAYOUT --- */
.layout-grid .agoda-items-wrapper { display: grid; gap: 20px; }
.layout-grid .agoda-items-wrapper.cols-3 { grid-template-columns: repeat(3, 1fr); }
.agoda-card-grid { border: 1px solid var(--agoda-border); border-radius: var(--agoda-border-radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; position: relative;}
.agoda-card-grid .ac-img-wrap { height: 200px; position: relative;}
.agoda-card-grid .ac-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.agoda-badge-sale { position:absolute; top:10px; left:10px; background:var(--agoda-alert); color:#fff; padding:4px 8px; border-radius:4px; font-size:12px; font-weight:bold; }

.agoda-card-grid .ac-content { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.agoda-card-grid .ac-title { font-size: 18px; margin-bottom: 10px; color: var(--agoda-headline);}
.ac-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px;}
.ac-score-inline { background: var(--agoda-success); color:#fff; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight:bold;}

.agoda-card-grid .ac-price-block { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; border-top: 1px dashed var(--agoda-border); padding-top: 15px;}

/* --- 5. PAGINATION --- */
.agoda-pagination-wrapper { display: flex; justify-content: center; margin-top: 30px; gap: 6px; }
.agoda-page-btn { padding: 8px 14px; border: 1px solid var(--agoda-border); background: #fff; color: var(--agoda-base); cursor: pointer; border-radius: 4px; transition: 0.2s; font-weight: 600;}
.agoda-page-btn:hover { background: #f8fafc; }
.agoda-page-btn.active { background: var(--agoda-primary); color: #fff; border-color: var(--agoda-primary); }

/* --- 6. SINGLE HOTEL DETAIL PAGE (TRANG BÀI VIẾT) --- */
.agoda-single-wrapper {
    position: relative; background: #fff; border-radius: var(--agoda-border-radius);
    padding: 25px; margin-bottom: 30px; border: 1px solid var(--agoda-border);
    box-shadow: var(--agoda-shadow); color: var(--agoda-base);
    max-width: 900px; margin-left: auto; margin-right: auto;
}
.single-loader {
    position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.8); z-index:10; 
    display:flex; justify-content:center; align-items:center; font-weight:bold; color:var(--agoda-primary);
}

.sh-header { margin-bottom: 20px; border-bottom: 1px solid var(--agoda-border); padding-bottom: 15px;}
.sh-title { font-size: 28px; font-weight: 700; color: var(--agoda-headline); margin: 0 0 10px 0; line-height: 1.2; }
.sh-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sh-score-badge { background: var(--agoda-success); color: #fff; font-weight: bold; padding: 4px 8px; border-radius: 4px; font-size: 14px;}
.sh-score-text { font-weight: 700; color: var(--agoda-headline); font-size: 14px;}
.sh-reviews { font-size: 13px; color: var(--agoda-base); }

/* Bố cục Dọc: Ảnh to phía trên, Thông tin phía dưới */
.sh-layout-vertical { display: flex; flex-direction: column; gap: 20px; }
.sh-gallery-full { width: 100%; }
.sh-main-img { position: relative; border-radius: var(--agoda-border-radius); overflow: hidden; margin-bottom: 10px;}
.sh-main-img img { width: 100%; display: block; object-fit: cover; max-height: 480px; } /* Ảnh to và đẹp hơn */

.sh-details-full { width: 100%; }
.sh-amenities { margin-bottom: 20px; }

/* Bảng Booking (Phần khoanh đỏ chuyển xuống dưới dạng nằm ngang) */
.sh-booking-card {
    display: flex;
    flex-wrap: wrap;
    background: #fdfdfd;
    border: 1px solid var(--agoda-border);
    border-radius: var(--agoda-border-radius);
    padding: 20px;
    align-items: stretch; 
    gap: 20px;
}
/* ĐÃ CHỈNH SỬA Ở DƯỚI: Nới rộng form và ô nhập ngày để không bị che khuất số năm */
.sh-search-box { flex: 2; min-width: 360px; display: flex; flex-direction: column; justify-content: center; }
.sh-search-title { font-size: 16px; font-weight: bold; margin: 0 0 12px 0; color: var(--agoda-headline); }
.sh-search-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sh-date-group { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.sh-date-group label { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--agoda-base); }
.sh-date-group input { border: 1px solid #ccc !important; padding: 10px 8px !important; border-radius: 4px !important; width: 100% !important; font-family: inherit !important; box-shadow: none !important; height: 42px !important; box-sizing: border-box; }
.sh-update-btn { margin-top: 0; background: var(--agoda-secondary); white-space: nowrap; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 20px !important; flex-shrink: 0; }
.sh-price-action { flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; border-left: 1px dashed var(--agoda-border); padding-left: 20px; }
.sh-price-box { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin-bottom: 15px; width: 100%;}
.sh-price-labels { display: flex; flex-direction: column; align-items: flex-end;}
.sh-price-box .price-label { font-size: 13px; font-weight: 500; color: var(--agoda-base); margin-bottom: 2px;}
.sh-price-box .price-regular { font-size: 15px; color: var(--agoda-base); text-decoration: line-through; margin-bottom: 2px;}
.sh-price-box .price-sale { font-size: 32px; color: var(--agoda-alert); line-height: 1; font-weight: 700;}
.sh-book-btn { width: 100%; padding: 14px; font-size: 16px; margin: 0;}

/* --- Responsive --- */
@media (max-width: 992px) {
    .agoda-search-bar { flex-direction: column !important; align-items: stretch !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;}
    .asb-group { background: #fff !important; border: 2px solid var(--agoda-border) !important; margin-bottom: 8px !important; border-radius: var(--agoda-border-radius) !important; }
    .asb-divider { display: none !important; }
    .agoda-btn.agoda-filter-btn { margin-left: 0 !important; width: 100% !important; border-radius: var(--agoda-border-radius) !important; padding: 15px !important; }
    
    .agoda-toolbar-right { justify-content: space-between; }
    
    .agoda-card-list { flex-direction: column; }
    .agoda-card-list .ac-img-wrap { width: 100%; height: 220px; }
    .agoda-card-list .ac-action-wrap { width: 100%; border-left: none; border-top: 1px solid var(--agoda-border); flex-direction: row; align-items: center;}
    .ac-price-bottom { align-items: flex-end; }
}

@media (max-width: 768px) {
    .layout-grid .agoda-items-wrapper.cols-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Search bar */
    .agoda-search-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .asb-group {
        width: 100% !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 2px solid var(--agoda-border) !important;
        margin-bottom: 8px !important;
        border-radius: var(--agoda-border-radius) !important;
    }

    .asb-city,
    .asb-search,
    .asb-dates {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .asb-divider {
        display: none !important;
    }

    .agoda-search-bar input,
    .agoda-search-bar select {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .agoda-btn.agoda-filter-btn {
        margin-left: 0 !important;
        width: 100% !important;
        border-radius: var(--agoda-border-radius) !important;
        padding: 15px !important;
    }

    /* Toolbar */
    .agoda-toolbar-right {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .agoda-sort-wrap {
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .agoda-layout-switcher {
        justify-content: flex-start;
    }

    /* List layout */
    .agoda-card-list {
        flex-direction: column;
    }

    .agoda-card-list .ac-img-wrap {
        width: 100%;
        height: 220px;
    }

    .agoda-card-list .ac-img-wrap img {
        min-height: 220px;
    }

    .agoda-card-list .ac-info-wrap {
        padding: 16px;
    }

    .agoda-card-list .ac-action-wrap {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--agoda-border);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .ac-score-top {
        justify-content: space-between;
        width: 100%;
    }

    .ac-score-text-wrap {
        text-align: left;
    }

    .ac-price-bottom {
        align-items: flex-start;
        text-align: left;
    }

    /* Grid layout */
    .layout-grid .agoda-items-wrapper.cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Single hotel */
    .agoda-single-wrapper {
        padding: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sh-title {
        font-size: 22px;
    }

    .sh-meta {
        gap: 8px;
    }

    .sh-main-img img {
        max-height: 300px;
        width: 100%;
        height: auto;
    }

    .sh-booking-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .sh-search-box {
        min-width: 0;
        width: 100%;
    }

    .sh-search-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .sh-date-group {
        min-width: 0;
        width: 100%;
    }

    .sh-date-group input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .sh-update-btn {
        width: 100%;
        height: auto;
        padding: 12px 16px !important;
        justify-content: center;
        white-space: normal;
    }

    .sh-price-action {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px dashed var(--agoda-border);
        padding-left: 0;
        padding-top: 16px;
        margin-top: 4px;
        align-items: flex-start;
    }

    .sh-price-box {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .sh-price-labels {
        align-items: flex-start;
    }

    .sh-price-box .price-sale {
        font-size: 28px;
    }

    .sh-book-btn {
        width: 100%;
    }
}