/* =========================================
   GLOBAL COMPONENTS (Dùng chung cho các tiêu đề)
   ========================================= */
html body .section-badge {
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important;
    font-size: 18px !important; /* Thu nhỏ chữ lại cho tinh tế */
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    margin: 0 0 24px 0 !important;
    color: #101214 !important;
    letter-spacing: 0.5px !important;
}

html body .section-badge .dot { 
    width: 8px !important; 
    height: 8px !important; 
    border-radius: 50% !important; 
    background: #52C41A !important; /* Chấm xanh lá chuẩn bài */
    display: inline-block !important; 
    flex-shrink: 0 !important;
}

/* Biến thể dấu chấm màu trắng cho nền đen (Carbon Block) */
html body .section-badge--light {
    color: white !important;
}
html body .section-badge--light .dot--light { 
    background: white !important; 
}

/* =========================================
   ÉP LƯỚI BẮT BUỘC CHO TRANG NÀY
   ========================================= */
html body .nomad-col-5 { grid-column: span 5 !important; }
html body .nomad-col-7 { grid-column: span 7 !important; }

/* =========================================
   HERO TEXT
   ========================================= */
.nomad-style-hero { padding: 40px 0 60px 0; }
.hero-text-col { display: flex; flex-direction: column; justify-content: center; }

.nomad-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: #667085; margin-bottom: 24px; text-transform: uppercase; }
.nomad-breadcrumb a { color: #667085; text-decoration: none; }

.style-hero__title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 16px 0; color: #101214; letter-spacing: -1px; }
.style-hero__title .highlight { color: #FF4D2E; }
.style-hero__desc { font-size: 15px; color: #475467; line-height: 1.6; padding-right: 40px; margin: 0; }

/* =========================================
   IMAGE COLLAGE 3 CỘT (MỚI)
   ========================================= */
.style-hero-collage-3col { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 12px; 
    height: 500px; /* Độ cao bằng đúng thiết kế */
    width: 100%;
}
.collage-col { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    border-radius: 5px; 
    overflow: hidden; 
}
.collage-col img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* Xử lý cột giữa có 2 ảnh xếp chồng */
.collage-col--split { 
    gap: 12px; 
    background: transparent; 
    border-radius: 0; 
    overflow: visible; 
}
.collage-col--split img { 
    height: calc(50% - 6px); /* Chia đôi chiều cao, trừ đi nửa khoảng cách gap */
    border-radius: 5px; 
}

/* =========================================
   THANH CHỌN PHONG CÁCH
   ========================================= */
.nomad-style-nav-wrapper { border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; background: #fff; position: sticky; top: 80px; z-index: 90; }
.style-nav-list { display: flex; list-style: none; padding: 0; margin: 0; justify-content: space-between; }
.style-nav-list li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 2px solid transparent; cursor: pointer; color: #667085; transition: all 0.2s; }
.style-nav-list li.active { border-bottom-color: #FF4D2E; color: #FF4D2E; }
.style-nav-list li:hover { color: #FF4D2E; }
.s-icon { width: 24px; height: 24px; }
.s-icon svg { width: 100%; height: 100%; }
.style-nav-list li span { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* =========================================
   BENTO GRID PHONG CÁCH (FIX CHUẨN DESIGN)
   ========================================= */
.style-bento-grid { row-gap: 24px; }
.style-card { 
    position: relative; height: 320px; /* Tăng chiều cao lên chút cho thoáng */
    border-radius: 5px; overflow: hidden; 
    cursor: pointer; transition: transform 0.3s;
}
.style-card:hover { transform: translateY(-4px); }
.style-card__bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.style-card__overlay { 
    position: absolute; inset: 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%); 
}

.style-card__content { 
    position: absolute; bottom: 0; left: 0; right: 0; 
    padding: 32px 24px; /* Tăng padding để chữ không dính viền */
    color: white; display: flex; flex-direction: column; 
    height: 100%; justify-content: flex-end; 
    z-index: 2;
}

.style-card__title { font-size: 26px; font-weight: 800; margin: 0 0 8px 0; }
.style-card__desc { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0 0 24px 0; padding-right: 20px; }

.style-card__bottom { 
    display: flex; justify-content: space-between; align-items: center; 
    border-top: none !important; /* XÓA ĐƯỜNG VIỀN NGANG VÔ DUYÊN */
    padding-top: 0; 
}

.style-card__count { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.9); }
.style-card__count strong { font-size: 18px; font-weight: 800; color: white; }

/* Ép nút bấm thành hình tròn, chứa icon mũi tên đỏ */
.style-card-btn {
    width: 40px; height: 40px; 
    border-radius: 50% !important; 
    background: white; 
    border: none; 
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.2s ease;
    flex-shrink: 0;
}
.style-card-btn svg { width: 20px; height: 20px; }
.style-card:hover .style-card-btn { transform: translateX(6px); } /* Hiệu ứng đẩy mũi tên sang phải khi hover */

/* =========================================
   CARBON BLOCK
   ========================================= */
.carbon-block { background: #101214; padding: 80px 0; color: white; }
.section-badge--light .dot--light { background: white; }
.carbon-title { font-size: 30px; font-weight: 800; line-height: 1.3; margin: 0 0 16px 0; }
.carbon-desc { color: #98A2B3; font-size: 16px; line-height: 1.6; margin-bottom: 32px; padding-right: 40px; }
.btn-primary-red { display: inline-flex; background: #FF4D2E; color: white; padding: 12px 24px; border-radius: 50px; font-weight: 600; text-decoration: none; }
.carbon-reasons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-content: center; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 40px; }
.c-reason { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.c-icon { width: 40px; height: 40px; color: white; }
.c-icon svg { width: 100%; height: 100%; }
.c-reason span { font-size: 14px; font-weight: 500; }

/* =========================================
   3 BƯỚC PROCESS
   ========================================= */
.step-process-grid { gap: 24px; align-items: center; }
.process-step { display: flex; align-items: center; gap: 16px; position: relative; padding: 24px; background: #FAFAFA; border-radius: 16px; }
.p-num { font-size: 32px; font-weight: 300; color: #DDE1E5; }
.p-icon { width: 48px; height: 48px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.p-content h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px 0; color: #101214; }
.p-content p { font-size: 13px; color: #667085; margin: 0; line-height: 1.4; }
.p-arrow { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #98A2B3; z-index: 2; }
.nomad-col-4:last-child .p-arrow { display: none; } /* Ẩn mũi tên bước cuối */

/* =========================================
   TESTIMONIAL (SEMANTIC)
   ========================================= */
.testimonial-section { padding: 60px 0; background: #FAFAFA; }
.testimonial-layout { display: flex; align-items: center; gap: 40px; }
.testi-content { flex: 1; padding-right: 40px; }
.quote-icon { font-size: 80px; color: #FF4D2E; line-height: 1; font-family: Georgia, serif; margin-bottom: -20px; }
.quote-text { font-size: 18px; color: #475467; line-height: 1.6; font-style: italic; margin-bottom: 24px; }
.testi-author strong { display: inline-block; margin-right: 12px; color: #101214; }
.testi-author span { color: #667085; font-size: 14px; position: relative; }
.testi-author span::before { content: "•"; position: absolute; left: -10px; }
.testi-controls { display: flex; gap: 12px; margin-top: 24px; }
.t-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #DDE1E5; background: white; color: #101214; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.t-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Semantic: Vô hiệu hóa nút nếu chỉ có 1 bài */

.testi-image { width: 300px; height: 300px; flex-shrink: 0; }
.circle-mask { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 8px solid white; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.circle-mask img { width: 100%; height: 100%; object-fit: cover; }

.testi-side-quote { flex: 1; padding-left: 40px; border-left: 2px solid #f66b48; }
.testi-side-quote p { font-size: 16px; color: #101214; font-weight: 600; line-height: 1.6; margin: 0; }



/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 768px) {
    /* Hero */
    .style-hero__title { font-size: 2.8rem; }
    .style-hero-collage { flex-direction: column; height: auto; }
    .collage-main { height: 250px; }
    .collage-side { flex-direction: row; height: 100px; }
    
    /* Thanh cuộn phong cách */
    .style-nav-list {
        justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 0 16px; gap: 24px; scrollbar-width: none;
    }
    .style-nav-list::-webkit-scrollbar { display: none; }
    .style-nav-list li { scroll-snap-align: start; }
    
    /* Bento Mobile (1 cột) */
    .style-bento-grid { grid-template-columns: 1fr !important; }
    .nomad-col-6.style-card { grid-column: span 1 !important; width: 100% !important; }
    
    /* Carbon Block */
    .carbon-block { padding: 40px 0; }
    .carbon-reasons-grid { grid-template-columns: 1fr 1fr; border-left: none; padding-left: 0; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 32px; gap: 24px; }
    .carbon-desc { padding-right: 0; }
    
    /* Tour Swipe Mobile */
    .slider-mobile-swipe {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory;
        gap: 16px !important; margin: 0 -16px !important; padding: 0 16px 24px 16px !important; scrollbar-width: none;
    }
    .slider-mobile-swipe::-webkit-scrollbar { display: none; }
    .slider-mobile-swipe > div { flex: 0 0 85% !important; scroll-snap-align: center; }
    
    /* 3 Bước */
    .step-process-grid { display: flex !important; flex-direction: column !important; }
    .process-step { width: 100% !important; }
    .p-arrow { display: none; } /* Ẩn toàn bộ mũi tên ngang trên mobile */
    
    /* Testimonial */
    .testimonial-layout { flex-direction: column; text-align: center; gap: 32px; }
    .testi-content { padding-right: 0; }
    .testi-controls { justify-content: center; }
    .testi-side-quote { border-left: none; padding-left: 0; border-top: 1px solid #E5E7EB; padding-top: 24px; }
}

/* =========================================
   BỔ SUNG HỆ THỐNG LƯỚI (CỘT 5 & CỘT 7)
   ========================================= */
.nomad-col-5 { grid-column: span 5; }
.nomad-col-7 { grid-column: span 7; }

/* =========================================
   FIX LẠI KHỐI CARBON BLOCK (BẠN ĐI ĐỂ TÌM ĐIỀU GÌ)
   ========================================= */

/* 1. Ép lại tỷ lệ: Chữ bên trái chiếm 4 phần, Icon bên phải chiếm 8 phần */
html body .carbon-text { 
    grid-column: span 4 !important; 
    padding-right: 24px !important; 
}

/* 2. Dàn 4 icon thành 1 hàng ngang, vạch kẻ ngắn lại tinh tế hơn */
/* XÓA BỎ VẠCH KẺ DỌC DÀI BÊN TRÁI KHỐI ICON */
html body .carbon-reasons-grid { 
    grid-column: span 8 !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important;
    align-items: center !important; 
    
    /* FIX: Tắt vạch kẻ dọc dài ngoẵng ở đây */
    border-left: none !important; 
    
    padding-left: 0 !important; /* Xóa luôn khoảng cách thừa nếu có */
    gap: 0 !important;
}

/* 3. Chia đều 4 ô icon và thêm vạch kẻ dọc nhẹ nhàng */
html body .c-reason { 
    flex: 1 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    text-align: center !important; 
    gap: 16px !important;
    padding: 0 16px !important;
    border-left: 1px solid rgba(255,255,255,0.15) !important; /* Vạch phụ ngăn cách icon */
}

/* Xóa vạch thừa ở ô đầu tiên để không bị đúp viền */
html body .c-reason:first-child {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Chữ dưới icon */
html body .c-reason span {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500 !important;
}

/* Tút tát lại cái nút màu đỏ cho gọn gàng */
html body .carbon-block .btn-primary-red {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
}

/* =========================================
   BẢO VỆ GIAO DIỆN MOBILE CHO KHỐI NÀY
   ========================================= */
@media (max-width: 768px) {
    html body .carbon-text { grid-column: span 1 !important; padding-right: 0 !important; }
    html body .carbon-reasons-grid { 
        grid-column: span 1 !important;
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; /* Mobile thì vẫn bẻ về 2x2 cho dễ nhìn */
        gap: 32px 16px !important;
        border-top: 1px solid rgba(255,255,255,0.15) !important; /* Vạch kẻ ngang trên mobile */
        padding-top: 32px !important;
        margin-top: 24px !important;
    }
    html body .c-reason {
        border-left: none !important; /* Ẩn vạch dọc khi xuống mobile */
        padding: 0 !important;
    }
}