html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Quicksand', sans-serif;
}
h1, h2, h3, .font-dancing {
    font-family: 'Dancing Script', cursive;
}

/* Nâng cấp: Bỏ style chiều rộng của card, để grid quản lý */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Nâng cấp: Hiệu ứng hover hiện đại, đổ bóng theo màu thương hiệu */
.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.1), 0 8px 10px -6px rgba(239, 68, 68, 0.1);
}

/* Hover effect for product image only on larger screens */
@media (min-width: 1024px) {
    .product-card .product-image-container {
        overflow: hidden; /* Important for the zoom effect */
    }
    .product-card:hover .product-image {
        transform: scale(1.1);
    }
    .product-image {
        transition: transform 0.3s ease-in-out;
    }
    .product-description {
        /* Canh đều lề trái và phải của văn bản */
        text-align: justify;

        /* Đặt chiều cao tối thiểu để các mô tả ngắn
           vẫn chiếm một không gian tương đối,
           giúp layout các card đồng đều hơn.
           (4 dòng x 1.5rem/dòng = 6rem) */
        min-height: 6rem;
    }
}


.category-btn.active {
    background-color: #ef4444; /* red-500 */
    color: white;
    border-color: #ef4444;
}

.loading-logo {
    animation: move-left-right 3s linear infinite;
}

@keyframes move-left-right {
    0% {
        transform: translateX(-300px); /* Bắt đầu từ ngoài màn hình bên trái */
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(300px); /* Di chuyển đến ngoài màn hình bên phải */
        opacity: 0.8;
    }
}

/* Styles for Hero Slideshow Transition */
.hero-image-transition {
    transition: opacity 1s ease-in-out;
}

/* Fix for sticky header covering section titles */
main, section {
    scroll-margin-top: var(--header-height, 5.5rem);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.footer-bg {
    position: relative;
    background-color: #1f2937; /* bg-gray-800 */
}

.footer-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ef4444' fill-opacity='0.1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 0;
}
.footer-bg > div {
    position: relative;
    z-index: 1;
}

/* START: CSS cho hiệu ứng gõ chữ */
#hero-title {
    /* Đảm bảo container không bị xẹp khi trống */
    min-height: 1.2em; 
    display: inline-block;
}
#hero-title::after {
    content: '|';
    display: inline-block;
    margin-left: 0.1em;
    animation: blink 0.7s infinite;
    font-weight: normal;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* END: CSS cho hiệu ứng gõ chữ */

/* Nâng cấp: CSS cho hiệu ứng "bay vào giỏ hàng" */
.fly-to-cart-image {
    position: fixed;
    z-index: 100;
    border-radius: 50%;
    object-fit: cover;
    transition: all 0.7s ease-in-out;
}

/* Nâng cấp: CSS cho hiệu ứng "hiện ra khi cuộn" */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Nâng cấp: CSS cho layout so le của Dự án nổi bật */
.project-item {
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    cursor: pointer; /* Thêm con trỏ để báo hiệu có thể click */
}

/* Áp dụng hiệu ứng so le và xoay nhẹ cho màn hình lớn (lg trở lên) */
@media (min-width: 1024px) {
    #featured-projects-grid .project-item.visible:nth-child(odd) {
        transform: translateY(-1.5rem) rotate(-2deg);
    }
    #featured-projects-grid .project-item.visible:nth-child(even) {
        transform: translateY(1.5rem) rotate(2deg);
    }
    #featured-projects-grid .project-item.visible:hover {
        transform: translateY(0) rotate(0) scale(1.08);
        z-index: 10; /* Đưa ảnh lên trên các ảnh khác khi hover */
        /* Nâng cấp hiệu ứng đổ bóng khi hover */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3), 0 0 25px rgba(239, 68, 68, 0.3);
    }
}

/* START: CSS nâng cấp cho mục Testimonials */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(239, 68, 68, 0.15);
}

.testimonial-quote-icon {
    transition: transform 0.3s ease;
}

.testimonial-card:hover .testimonial-quote-icon {
    transform: scale(1.1) rotate(-5deg);
}
/* END: CSS nâng cấp cho mục Testimonials */

/* --- START: CSS NÂNG CẤP HERO SECTION (PHIÊN BẢN HYBRID) --- */

/* Slideshow ảnh nền */
#hero-slideshow-image {
    transition: opacity 1.5s ease-in-out; /* Hiệu ứng mờ ảo khi chuyển ảnh */
    animation: kenburns 20s ease-in-out infinite; /* Hiệu ứng lia máy chậm */
}

/* Keyframes cho hiệu ứng Ken Burns */
@keyframes kenburns {
    0%, 100% {
        transform: scale(1) translate(0, 0);
        transform-origin: center center;
    }
    25% {
        transform: scale(1.1) translate(-2%, 2%);
        transform-origin: top left;
    }
    50% {
        transform: scale(1) translate(0, 0);
        transform-origin: center center;
    }
    75% {
        transform: scale(1.1) translate(2%, -2%);
        transform-origin: bottom right;
    }
}

/* Khung video mô phỏng điện thoại (giữ nguyên từ lần trước) */
.video-frame {
    width: 280px;
    height: 580px;
    transition: transform 0.4s ease-out;
}
.video-frame:hover {
    transform: scale(1.03) rotate(-1deg);
}

/* Responsive (giữ nguyên từ lần trước) */
@media (max-width: 1023px) {
    #home .grid {
        flex-direction: column-reverse;
        display: flex;
    }
    .video-frame {
        width: 250px;
        height: 520px;
        margin-bottom: 2rem;
    }
    #hero-title {
        font-size: 3.5rem;
    }
}

/* Hiệu ứng văn bản (giữ nguyên) */
#hero-title, .hero-subtitle, .hero-cta-buttons {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}
.hero-subtitle { animation-delay: 0.3s; }
.hero-cta-buttons { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

#hero-title::after { content: '|'; animation: blink 0.7s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- END: CSS NÂNG CẤP HERO SECTION --- */

/* --- START: CSS NÂNG CẤP CHO BOOKING SECTION --- */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 1rem; /* 16px */
    transform: translateY(-50%);
    color: #9ca3af; /* text-gray-400 */
}

.input-field {
    width: 100%;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem 1rem 0.75rem 3rem; /* 12px 16px 12px 48px */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.input-field:focus {
    outline: none;
    border-color: #f87171; /* focus:border-red-400 */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); /* focus:ring-red-500 with opacity */
}

/* Custom scrollbar for selected items */
#selected-items::-webkit-scrollbar {
    width: 6px;
}
#selected-items::-webkit-scrollbar-track {
    background: #f1f5f9; /* bg-slate-100 */
    border-radius: 10px;
}
#selected-items::-webkit-scrollbar-thumb {
    background: #fca5a5; /* bg-red-300 */
    border-radius: 10px;
}
#selected-items::-webkit-scrollbar-thumb:hover {
    background: #f87171; /* bg-red-400 */
}

/* Styling for date input placeholder */
input[type="date"] {
    position: relative;
    color: #9ca3af;
}

input[type="date"]:focus,
input[type="date"]:valid {
  color: #1f2937; /* text-gray-800 */
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
}
/* --- END: CSS NÂNG CẤP CHO BOOKING SECTION --- */


/* === BẮT ĐẦU: CSS HOÀN CHỈNH CHO MODAL SẢN PHẨM === */

/* Cột hình ảnh (trái) */
.modal-image-column {
    position: relative;
}
/* Đảm bảo có chiều cao tối thiểu trên mobile để ảnh không bị bóp méo */
@media (max-width: 767px) {
    .modal-image-column {
        height: 60vh;
    }
    .modal-details-column {
        height: 40vh;
    }
}

/* Cột chi tiết (phải) */
#modal-desc {
    line-height: 1.6;
}

/* Gallery ảnh thumbnail */
#modal-thumbnail-gallery {
    scrollbar-width: thin;
    scrollbar-color: #fca5a5 #f3f4f6;
}
#modal-thumbnail-gallery::-webkit-scrollbar {
    height: 6px;
}
#modal-thumbnail-gallery::-webkit-scrollbar-thumb {
    background-color: #fca5a5;
    border-radius: 3px;
}

.thumbnail-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    border-radius: 0.375rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}
.thumbnail-img:hover {
    border-color: #f87171;
}
.thumbnail-img.active {
    border-color: #ef4444;
    transform: scale(1.1);
}

/* === KẾT THÚC: CSS HOÀN CHỈNH CHO MODAL SẢN PHẨM === */

/* === BẮT ĐẦU: CSS NÂNG CẤP ĐẶC BIỆT CHO KHU VỰC "GIA TIÊN" === */
#category-description {
    background: linear-gradient(145deg, #fff5f5, #ffebeb);
    border: 1px solid #fecaca;
    box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.1);
}

.gia-tien-title {
    background: -webkit-linear-gradient(45deg, #ef4444, #c81e1e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-card-container {
    /* Tạo không gian 3D cho card bên trong */
    perspective: 1000px;
}

.feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 179, 179, 0.5);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Giữ trạng thái 3D cho các phần tử con */
    transform-style: preserve-3d;
    /* Hiệu ứng chuyển động mượt mà */
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform; /* Tối ưu hóa hiệu năng */
    overflow: hidden; /* Ẩn phần glare thừa ra ngoài */
}

/* Hiệu ứng lớp con bên trong card "nổi" lên */
.feature-card-content {
    /* Đẩy nội dung về phía trước 50px trong không gian 3D */
    transform: translateZ(50px);
}
.feature-card-icon {
    transform: translateZ(60px);
}
.feature-card-title {
    transform: translateZ(55px);
}

/* Lớp "glare" tạo hiệu ứng ánh sáng lóa di chuyển theo chuột */
.feature-card::after {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none; /* Cho phép click xuyên qua lớp này */
}

/* Khi hover, hiện lớp glare lên */
.feature-card-container:hover .feature-card::after {
    opacity: 1;
}
/* === KẾT THÚC: CSS NÂNG CẤP ĐẶC BIỆT CHO KHU VỰC "GIA TIÊN" === */