/* 1. Gallery Top Grid */
.tn-gallery-top-wrapper {
    margin-top:30px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
}

.tn-gallery-featured img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.tn-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    height: 380px;
}

.tn-gallery-grid-item img {
    width: 100%;
    height: 188px;
    object-fit: cover;
    display: block;
}




/* Container bao ngoài các Hàng */



.tn-single-left-container {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Tách các Hàng ra bằng khoảng hở 24px */
}

/* Mỗi Hàng là một khối Box riêng có nền trắng */
.tn-left-row {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 24px;
}

/* 1. Thanh điều hướng Anchor Bar */
.tn-nav-anchor-bar {
    border-bottom: 2px solid #edf2f7;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

.tn-nav-anchor-bar ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.tn-nav-anchor-bar a {
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: #4a5568;
    padding-bottom: 8px;
    display: inline-block;
    transition: color 0.2s ease;
}

.tn-nav-anchor-bar a:hover,
.tn-nav-anchor-bar a.active {
    color: #FF4500;
    border-bottom: 2px solid #FF4500;
}

/* Badges: Nền #FFF0ED, border-radius tối đa */
.tn-badges-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tn-badge-item {
    background-color: #FFF0ED;
    color: #FF4500;
    padding: 6px 16px;
    border-radius: 999px; /* Max border-radius */
    font-size: 13px;
    font-weight: 600;
}

/* Title & Specs */
.tn-left-title-h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
    margin: 8px 0;
}

.tn-left-specs-line {
    font-size: 14px;
    color: #718096;
    margin-bottom: 20px;
}

.tn-left-specs-line .dot {
    margin: 0 4px;
    color: #cbd5e0;
}

/* Sub-sections */
.tn-sub-section h3,
.tn-row-title {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 14px;
}

/* Nút bấm Solid Button Orange (#FF4500), border-radius tối đa */
.tn-btn-solid-orange {
    background-color: #FF4500;
    color: #ffffff !important;
    border: none;
    padding: 10px 24px;
    border-radius: 999px; /* Max border-radius */
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 14px;
    transition: opacity 0.2s ease;
}

.tn-btn-solid-orange:hover {
    opacity: 0.9;
}

/* Đường gạch ngang Dash */
.tn-divider-dash {
    border-top: 1px dashed #cbd5e0;
    margin: 24px 0;
}

/* Amenities Grid */
.tn-amenities-grid-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tn-amenities-grid-list li {
    font-size: 14px;
    color: #4a5568;
}

/* Where you'll sleep Header & Slider */
.tn-sleep-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tn-sleep-header h3 {
    margin-bottom: 0;
}

.tn-slider-nav-btns {
    display: flex;
    gap: 8px;
}

.tn-slider-nav-btns button {
    background: #edf2f7;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
}

.tn-sleep-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột bằng nhau */
    gap: 16px;
}

.tn-sleep-img-col img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Rules Bullet List */
.tn-rules-bullet-list {
    padding-left: 20px;
    line-height: 1.7;
    color: #4a5568;
}

/* Explore Grid */
.tn-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.explore-item {
    display: flex;
    justify-content: space-between;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}

#tn-sleep-prev,
#tn-sleep-next{
background: #FF4500;
}

/* Sidebar Sticky Container */
.tn-sidebar-box {
    position: sticky;
    top: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom:20px;
}

/* 1. Header trên cùng (#ff5634) */
.tn-sidebar-header-title {
    background-color: #ff5634;
    padding: 16px 20px;
    text-align: center;
}

.tn-sidebar-header-title h3 {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* 2. Body bên dưới màu trắng */
.tn-sidebar-body {
    background-color: #ffffff;
    padding: 20px;
}

/* Dòng 1: Giá */
.tn-sidebar-price-row {
    font-size: 14px;
    color: #718096;
    margin-bottom: 8px;
    
    /* Thêm các dòng bên dưới */
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center;     /* Căn giữa theo chiều dọc */
    
}

.tn-sidebar-price-row .price-amount {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
}

/* Dòng 2: Chi tiết địa điểm */
.tn-sidebar-location-row {
    font-size: 13px;
    color: #4a5568;
    margin-bottom: 18px;
    line-height: 1.4;
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center;     /* Căn giữa theo chiều dọc */
}

/* Dòng 3: Thông số (Bed | Baths | Floors | sqft) */
.tn-sidebar-specs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    padding: 12px 10px;
    margin-bottom: 16px;
    text-align: center;
}

.tn-sidebar-specs-row .spec-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.tn-sidebar-specs-row .spec-label {
    font-size: 12px;
    color: #a0aec0;
    font-weight: 500;
    text-transform: uppercase;
}

.tn-sidebar-specs-row .spec-value {
    font-size: 15px;
    color: #2d3748;
    font-weight: 700;
    margin-top: 2px;
}

.tn-sidebar-specs-row .spec-divider {
    width: 1px;
    height: 24px;
    background-color: #e2e8f0;
}

/* Dòng 4: Thẻ <p> Check availability & booking */
.tn-sidebar-check-text {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 14px;
    text-align: center;
}

/* Dòng 5: Button Airbnb màu #ff5634 */
.tn-btn-airbnb-primary {
    display: block;
    background-color: #ff5634;
    color: #ffffff !important;
    text-align: center;
    padding: 12px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: background-color 0.2s ease;
}

.tn-btn-airbnb-primary:hover {
    background-color: #e04526;
}

/* Dòng 6: Button Get Support màu Đen */
.tn-btn-support-black {
    display: block;
    background-color: #007aed;
    color: #ffffff !important;
    text-align: center;
    padding: 12px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.tn-btn-support-black:hover {
    background-color: #2d3748;
}

/* ================= HÀNG 5: REVIEWS STYLING ================= */

/* Container Layout 2 Cột */
.tn-reviews-layout-2col {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

/* 1. Cột trái Summary Column (Gọn gàng) */
.tn-reviews-summary-col {
    width: 200px;
    flex-shrink: 0;
}

.tn-reviews-summary-col .tn-row-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.tn-summary-score-box .score-number {
    font-size: 32px;
    font-weight: 800;
    color: #1a202c;
    line-height: 1;
}

.tn-summary-score-box .stars-row {
    color: #FF4500;
    font-size: 16px;
    margin: 6px 0;
}

.tn-summary-score-box .summary-text {
    font-size: 13px;
    color: #718096;
    line-height: 1.4;
}

/* 2. Đường kẻ dọc đứt nét giữa 2 cột */
.tn-vertical-divider-dash {
    width: 1px;
    border-left: 1px dashed #cbd5e0;
    margin: 0 8px;
}

/* 3. Cột phải List Column (Co giãn chiếm phần còn lại) */
.tn-reviews-list-col {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Danh sách review xếp chồng chiều dọc */
.tn-reviews-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Component 1 phần tử Review */
.tn-review-item-component {
    position: relative;
}

/* Review Header */
.tn-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.tn-review-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Khung ảnh tròn */
    object-fit: cover;
    display: block;
}

.tn-review-meta {
    display: flex;
    flex-direction: column;
}

.tn-author-name {
    font-weight: 700;
    font-size: 15px;
    color: #2d3748;
}

.tn-author-location {
    font-size: 12px;
    color: #718096;
}

.tn-rating-stars {
    color: #FF4500;
    font-size: 13px;
    margin-top: 2px;
}

/* Review Body */
.tn-review-body p {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* 4. Hiệu ứng Fade-out cho Review cuối cùng */
.tn-review-fade-out .tn-review-body {
    position: relative;
    max-height: 40px;
    overflow: hidden;
}

.tn-review-fade-out .tn-review-body::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

/* 5. Nút View More dạng Pill Button ở góc trái bên dưới */
.tn-reviews-action-bottom {
    margin-top: 20px;
    text-align: left;
}

.tn-btn-pill-orange {
    background-color: #FF4500;
    color: #ffffff !important;
    border: none;
    padding: 8px 24px;
    border-radius: 999px; /* Pill button bo tròn 2 đầu */
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.tn-btn-pill-orange:hover {
    opacity: 0.9;
}

.tn-row-reviews{
margin-bottom:20px;
}