@font-face {
    font-family: 'arkipelagoregular';
    src: url('../fonts/arkipelago_1.003-webfont.woff2') format('woff2'),
    url('../fonts/arkipelago_1.003-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #faf9f7;
}

/* Start Hero section */
.hero {
    position: relative;
    height: calc(100vh - 10px); /* trừ chiều cao của header (top-bar + navbar) */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('../images/home/hero-background.jpg?v=4') center/cover no-repeat;
    margin-top: -90px; /* trừ chiều cao header 1 hàng — header trong suốt đè lên hình hero (transparent header) */
}

/* Optional overlay for better text contrast */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
    background: url('../images/hero-bg-overlay.png') center bottom no-repeat;
}

.hero h1 {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
}

.hero .display-wrapper{
    z-index: 12;
    color: #000000;
    margin-top: 0px;
}

.hero .display-wrapper .btn {
    background-color: #79A342;
    border: none;
    color: #000000;
    transition: background-color 0.3s ease;
}
.hero .display-wrapper .btn:hover {
    background-color: #b77b47;
}
/* End Hero section */


/*.......Start category-card.........*/
.category-card {
    position: relative;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.category-card .img-fluid{
    height: 600px;
}

.category-card .overlay {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.6);
    transition: all 0.4s ease;
}

.category-card .icon {
    font-size: 2.5rem;
    color: #fff;
    animation: floatIcon 3s ease-in-out infinite;
}

.category-card .icon img{
    width: 50px;
    height: 50px;
}

.category-card .desc {
    max-width: 260px;
    height: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

/* Hover Effects */
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}

.category-card:hover img {
    transform: scale(1.08);
    filter: brightness(60%);
}

.category-card:hover .desc {
    opacity: 1;
    transform: translateY(0);
}

/* Floating icon animation */
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
/*.......End category-card.........*/


/* .....Start delightful-section..... */
/* Màu nền tổng thể cho phần này */
.delightful-section {
    background-color: #f7f3ed; /* Màu kem nhạt tương tự hình */
    position: relative;
    overflow: hidden; /* Quan trọng để hình trang trí nằm đúng chỗ */
}

/* Kiểu chữ tiêu đề phụ */
.section-subtitle {
    font-size: 0.9rem;
    color: #444;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Kiểu chữ tiêu đề chính lớn */
.section-title {
    font-size: 4rem; /* Kích thước lớn */
    font-weight: 900; /* Rất đậm */
    color: #79A342;
    line-height: 1.1;
    margin-bottom: 25px;
}

/* Kiểu chữ nội dung */
.section-body-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    max-width: 80%; /* Giới hạn chiều rộng văn bản */
    margin-bottom: 30px;
    text-align: justify;
}

/* Kiểu chữ ký */
.signature-text {
    font-size: 2.5rem;
    color: #333;
    margin-top: 20px;
}

/* Kiểu dáng cho khối hình ảnh */
.image-box {
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

/* === Các Hình Trang Trí (Decorative Shapes) === */

/* Hình trang trí góc trên bên trái (Text Column) */
.deco-top-left {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    opacity: 0.5;
    pointer-events: none;
    /* Dùng background-image hoặc SVG cho hình vẽ tay mờ */
    /* Đây là một ví dụ dùng SVG/Base64 thay cho ảnh thật */
    background-image: url("data:image/svg+xml;base64,..."); /* Thay thế bằng SVG của hình vẽ chim */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Thiết lập vị trí cho cột văn bản để hình deco có thể định vị tương đối */
.text-content-col {
    position: relative;
    padding-left: 50px; /* Thêm padding để hình deco có chỗ */
    z-index: 2;
}

/* Hình trang trí góc dưới bên phải (Image Column) */
.deco-bottom-right {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    opacity: 0.5;
    pointer-events: none;
    /* Dùng background-image hoặc CSS shape cho hình vết cà phê mờ */
    background: radial-gradient(circle at center, #d4c1ac 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.image-gallery-col {
    position: relative;
    z-index: 2;
}


/* Responsive - Điều chỉnh tiêu đề trên màn hình nhỏ */
@media (max-width: 992px) {
    .section-title {
        font-size: 3rem;
    }
    .section-body-text {
        max-width: 100%;
    }
    .image-box {
        height: 300px !important; /* Giảm chiều cao ảnh trên mobile */
    }
}
/* .....End delightful-section..... */


/* ............=== Start Phần COFFEE AT ITS BEST ===.............. */
.coffee-cta-section {
    background: var(--bg-soft-gradient);
    color: white;
    position: relative;
    padding-top: 150px; /* Thêm padding cho chỗ của hiệu ứng cọ vẽ */
    padding-bottom: 150px;
    overflow: hidden; /* Quan trọng để che đi phần viền ảnh */
}

/* Kiểu dáng cho khối hình ảnh trong phần đen */
.image-box-dark {
    background-size: cover;
    background-position: center;
    height: 100%;
    border-radius: 5px;
}

/* Tiêu đề lớn */
.dark-section-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--text-light) !important;
}

/* Nội dung chữ */
.dark-section-body-text {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 80%;
    margin-bottom: 40px;
    text-align: justify;
}

/* Nút CTA (Tạo khung viền) */
.btn-cta {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid var(--text-light);
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: background-color 0.3s;
}

.btn-cta:hover {
    background-color: #222; /* Hiệu ứng hover nhẹ */
    color: white;
}


/* === Hiệu Ứng Viền Cọ Vẽ (Brush Stroke Effect) === */
.brush-top-wrapper,
.brush-bottom-wrapper {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* loại bỏ khoảng trắng do inline image */
}

.brush-top-img,
.brush-bottom-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

.brush-top-img {
    margin-bottom: -5px; /* dính sát vào section dưới */
}

.brush-bottom-img {
    margin-top: -5px; /* dính sát vào section trên */
}

/* Điều chỉnh responsive */
@media (max-width: 992px) {
    .hero{
        margin-top: unset;
    }
    .coffee-cta-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .dark-section-title {
        font-size: 2.5rem;
        margin-top: 30px; /* Tăng khoảng cách trên mobile */
    }
    .dark-section-body-text {
        max-width: 100%;
    }

    .hero h1{
        font-size: 30px;
    }
}
/* ............=== End Phần COFFEE AT ITS BEST ===.............. */


/* ............=== Start Phần Testimonials ===.............. */
/* Loại bỏ CSS Bootstrap Carousel không cần thiết */
/* (Bao gồm .carousel-item, .carousel-indicators, ...) */

.owl-carousel .owl-item {
    /*Khi slider khởi tạo, thêm CSS này tạm để tránh flicker ban đầu*/
    transition: transform 0.4s ease;
}

/* Thêm lại các kiểu dáng cơ bản của Testimonial Card */
.testimonial-card {
    background-color: transparent; /* Mặc định là trong suốt */
    box-shadow: none;
    padding: 20px 10px;
    border-radius: 5px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.9);
    opacity: 0.8;
}

/* Kiểu dáng cho Card Chính (John Doe) */
.testimonial-card.main-card {
    background-color: white; /* Nền trắng nổi bật */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: fit-content;
    justify-content: center;
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

/* Card phụ (Jeey & Monica) */
.testimonial-card.side-card {
    opacity: 0.8;
    padding-top: 50px;
    padding-bottom: 50px;
    z-index: 1;
}

/* Điều chỉnh lại font chữ cho Card Phụ */
.testimonial-card.side-card .testimonial-text {
    font-size: 0.85rem;
    color: #555;
    text-align: left; /* Đặt text căn lề trái/phải như hình */
}
.testimonial-card.side-card .customer-name {
    font-size: 0.8rem;
}

/* Căn chỉnh vị trí info khách hàng (Sử dụng utility của Bootstrap như justify-content-start) */
.customer-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.customer-avatar {
    /* Thay đổi kích thước từ 40px xuống 30px */
    width: 30px !important;
    height: 30px;
    /* Đảm bảo hình tròn hoàn hảo */
    border-radius: 50%;
    /* Khoảng cách với tên */
    margin-right: 8px;
    /* Đảm bảo ảnh không bị biến dạng */
    object-fit: cover;
}

/* Các chấm tròn Owl Carousel */
.custom-testimonial-slider .owl-dots {
    position: relative;
    margin-top: 40px;
}

.custom-testimonial-slider .owl-dot span {
    background: #000 !important;
    opacity: 0.3 !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
}

.custom-testimonial-slider .owl-dot.active span {
    opacity: 1 !important;
}

.customer-subtitle{
    color: #79A342;
    font-size: 60px;
    text-transform: none;
}

/* ............=== End Phần Testimonials ===.............. */


/* ..........=== Start Phần google maps ===........... */
.experience-section {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 500px;
}

.experience-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 100px;
    background: rgba(0,0,0,0.3);
}

.experience-title {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.experience-section .btn-primary {
    background-color: #C7A17A;
    border: none;
    padding: 12px 28px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
    transition: background .3s ease;
}

.experience-section .btn-primary:hover {
    background-color: #b58c63;
}
/* ..........=== End Phần google maps ===........... */