/* --- LUXURY BRAND DESIGN SYSTEM --- */
:root {
    --color-main-1: #c5a059;      /* Vàng Champagne/Gold */
    --color-highlight: #111111;   /* Đen sâu */
    --color-text: #333333;
    --light-1: #f4f4f4;
    --white: #ffffff;
    --transition-lux: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 1. TYPOGRAPHY & UTILITIES */
.fs-12 { font-size: 1.2rem !important; letter-spacing: 1px; }
.fs-13 { font-size: 1.3rem !important; letter-spacing: 0.5px; }
.fs-14 { font-size: 1.4rem !important; letter-spacing: 0.5px; }
.fs-15 { font-size: 1.5rem !important; }
.fs-16 { font-size: 1.6rem !important; letter-spacing: 0.5px; }
.fs-17 { font-size: 1.7rem !important; }
.fs-18 { font-size: 1.8rem !important; font-weight: 300 !important; }
.fs-20 { font-size: 2rem !important; font-family: serif; }
.fs-25 { font-size: 2.5rem !important; letter-spacing: 2px; text-transform: uppercase; }
.fs-26 { font-size: 2.6rem !important; }
.fs-28 { font-size: 2.8rem !important; font-family: serif; }
.fs-30 { font-size: 3rem !important; letter-spacing: 3px; font-weight: 300; }

.spacing-2 { letter-spacing: 3px !important; text-transform: uppercase; }
.color-red { color: #8e0000 !important; } /* Đỏ rượu vang thay vì đỏ tươi */
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.color-text { color: var(--color-text); }

/* 2. GLOBAL ELEMENTS */
body {
    counter-reset: section;
    -webkit-font-smoothing: antialiased;
    font-family: 'Playfair Display', serif; /* Font chữ có chân sang trọng */
}

a { 
    color: var(--color-highlight); 
    transition: var(--transition-lux);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.3;
    letter-spacing: 1px;
}

.bg-light-1 { background: var(--light-1); }

/* 3. IMAGES & EFFECTS */
.object-cover { object-fit: cover !important; }
.object-scale { object-fit: scale-down !important; }

.hover-img img {
    transition: var(--transition-lux);
}

.hover-img:hover img {
    transform: scale(1.05); /* Zoom nhẹ nhàng tinh tế */
    filter: brightness(0.9);
}

/* Loại bỏ animation rung lắc gây cảm giác không chuyên nghiệp */
.cate-home-section .img:active, 
.cate-home-section .img:focus, 
.cate-home-section .img:hover {
    animation: none !important;
    transform: translateY(-5px);
    transition: var(--transition-lux);
}

/* 4. BUTTONS */
.btn-main-1 {
    background: transparent !important;
    border: 1px solid var(--color-main-1) !important;
    color: var(--color-main-1);
    border-radius: 0; /* Góc vuông sang trọng hơn */
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 20px;
    transition: var(--transition-lux);
}

.btn-main-1:hover {
    background: var(--color-main-1) !important;
    color: var(--white) !important;
}

.btn-themes {
    background: var(--color-highlight);
    color: var(--white);
    border: 1px solid var(--color-highlight);
    border-radius: 0;
}

.btn-themes:hover {
    background: transparent;
    color: var(--color-highlight);
    border-color: var(--color-highlight);
}

/* 5. HEADER & NAVIGATION */
.setting-menu > .row { align-items: center; justify-content: space-between; }
.setting-menu > .row > div { display: flex; align-items: center; }
.setting-menu > .row > div:last-child { justify-content: flex-end; }

.search-section .form-dropdown {
    position: absolute;
    padding: 20px;
    background-color: #ffffff;
    width: 320px;
    top: 100%;
    right: 0;
    z-index: 1000;
    border-top: 3px solid var(--color-main-1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-lux);
}

.search-section:hover .form-dropdown {
    opacity: 1;
    visibility: visible;
}

.slider-main, .slider-main img {
    width: 100%;
    height: 75vh; /* Tăng chiều cao banner tạo độ sâu */
    object-fit: cover;
}

.swiper-button-prev, .swiper-button-next {
    width: 45px;
    height: 45px;
    border: 1px solid #eee;
    background: white;
    color: var(--color-highlight);
    transition: var(--transition-lux);
}

.swiper-button-prev:hover, .swiper-button-next:hover {
    background: var(--color-main-1);
    border-color: var(--color-main-1);
    color: #fff;
}

/* 6. PRODUCT ITEMS */
.product-item img { transition: var(--transition-lux); }
.product-item:hover img { transform: translateY(-8px); }

.title-line:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px; /* Đường kẻ mảnh thanh thoát */
    left: 0;
    background: #e0e0e0;
}

.title-line span {
    background: white;
    position: relative;
    padding: 0 25px;
    font-family: serif;
    font-style: italic;
}

/* 7. HOT DEAL SECTION (WATCH GALLERY STYLE) */
.hotdeal-section {
    background-color: #0b0b0b !important; /* Đen huyền bí */
    padding: 100px 0 !important;
}

.hotdeal-section .countdown--item {
    border: 1px solid rgba(197, 160, 89, 0.3) !important; /* Viền gold mờ */
    background: transparent !important;
    text-align: center;
    margin-right: 1.5rem;
    min-width: 11rem;
    min-height: 11rem;
    display: flex;
    border-radius: 0;
}

.hotdeal-section .countdown--number {
    color: var(--color-main-1);
    font-size: 4.5rem;
    font-family: serif;
    font-weight: 300;
}

.hotdeal-section .countdown--label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2rem;
    color: #888;
}

.hotdeal-section .price {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Bỏ nét đứt */
}

/* 8. FOOTER */
footer {
    background: #000000 !important;
    color: #ababab;
    font-size: 1.4rem;
}

.footer-top > .container > .row > div:nth-child(1) {
    background: #111111; /* Đen thay vì xanh lá */
}

.footer-top > .container > .row > div:nth-child(1):before {
    background: #111111;
}

.copyright {
    border-top: 1px solid #222;
    padding: 20px 0;
}

.social-section li a {
    background: transparent;
    border: 1px solid #333;
    border-radius: 0;
}

.social-section li a:hover {
    color: var(--color-main-1);
    border-color: var(--color-main-1);
    background: transparent;
}

/* 9. MOBILE OPTIMIZATION */
.is-mobile .menu-section {
    width: 30rem;
    background-color: #fff;
    box-shadow: 20px 0 50px rgba(0,0,0,0.1);
}

.is-mobile .menu-section > ul li a {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: serif;
}

.is-mobile .menu-section .grower {
    border-left: none; /* Tối giản hóa */
}

/* 10. SCROLL TO TOP */
#return-to-top i {
    background: var(--color-main-1);
    border-radius: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 11. MEDIA QUERIES NÂNG CAO */
@media (min-width: 991px) {
    .hotdeal-section { padding: 10rem !important; }
}

@media only screen and (max-width: 992px) {
    .slider-main, .slider-main img { height: 50vh; }
    .hotdeal-section .countdown--item { min-width: 8rem; min-height: 8rem; }
    .hotdeal-section .countdown--number { font-size: 2.8rem; }
}