/* ===============================================
   VARIABLES & GENERAL STYLES
   =============================================== */
:root {
    --primary-color  : #8B5A2B;
    --secondary-color: #D2B48C;
    --accent-color   : #A52A2A;
    --light-color    : #F5F5DC;
    --dark-color     : #2F4F4F;
    --section-padding: 5rem 0;
}

/* RESET MỘT SỐ STYLES (tuỳ chọn)
-------------------------------------- */
/* body, h1, h2, h3, p, ul, li, a {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
} */

html,
body {
    overflow-x: hidden;
    /* Ngăn cuộn ngang trên mobile */
    width     : 100%;
    position  : relative;
}

body {
    font-family     : 'Poppins', sans-serif;
    line-height     : 1.6;
    color           : #333;
    background-color: #FAFAFA;
    max-width       : 100vw;
    /* Đảm bảo không bị lệch sang phải */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* ===============================================
   HERO SECTION
   =============================================== */
.hero {
    position             : relative;
    min-height           : 85vh;
    display              : flex;
    align-items          : center;
    justify-content      : center;
    background-size      : cover;
    background-position  : center;
    background-attachment: fixed;
    height               : calc(var(--vh, 1vh) * 50);
    width                : 100%;
}

.hero-overlay {
    position  : absolute;
    inset     : 0;
    background: rgba(0, 0, 0, 0.6);
    z-index   : 1;
}

.hero .container {
    position     : relative;
    z-index      : 2;
    width        : 100%;
    padding-left : 15px;
    padding-right: 15px;
}

.hero h1,
.hero p {
    color: #fff;
}

.hero-content {
    position        : relative;
    z-index         : 2;
    max-width       : 800px;
    text-align      : center;
    padding         : 2.5rem;
    margin          : 0 auto;
    color           : white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius   : 10px;
    box-shadow      : 0 5px 25px rgba(0, 0, 0, 0.3);
    backdrop-filter : blur(5px);
}

.hero-title {
    font-size    : 3.5rem;
    margin-bottom: 1.5rem;
    color        : white;
    text-shadow  : 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height  : 1.2;
}

.hero-subtitle {
    font-size    : 1.5rem;
    margin-bottom: 2rem;
    font-weight  : 300;
    line-height  : 1.5;
}

.hero-buttons {
    display        : flex;
    gap            : 15px;
    justify-content: center;
    flex-wrap      : wrap;
}

/* ===============================================
   BUTTONS
   =============================================== */
.btn-main {
    background-color: var(--accent-color);
    color           : white;
    padding         : 12px 24px;
    border-radius   : 30px;
    font-weight     : 500;
    transition      : all 0.3s;
    border          : 2px solid var(--accent-color);
}

.btn-outline {
    background-color: transparent;
    color           : white;
    padding         : 12px 24px;
    border-radius   : 30px;
    font-weight     : 500;
    transition      : all 0.3s;
    border          : 2px solid white;
}

.btn-main:hover {
    background-color: #8B2500;
    border-color    : #8B2500;
    transform       : translateY(-3px);
    box-shadow      : 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-outline:hover {
    background-color: white;
    color           : var(--primary-color);
    transform       : translateY(-3px);
    box-shadow      : 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Tùy biến nút (button) - Bootstrap overrides */
.btn-primary {
    background-color: #d9534f;
    border-color    : #d9534f;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #c9302c;
    border-color    : #ac2925;
}

.btn-outline-primary {
    border-color: #d9534f;
    color       : #d9534f;
}

.btn-outline-primary:hover {
    background-color: #d9534f;
    color           : #fff;
}

/* ===============================================
   SECTION STYLING
   =============================================== */
.section-title {
    position     : relative;
    display      : inline-block;
    font-size    : 1.8rem;
    margin-bottom: 3rem;
    color        : var(--primary-color);
}

.section-title::after {
    content         : '';
    position        : absolute;
    width           : 80px;
    height          : 3px;
    background-color: var(--accent-color);
    bottom          : -10px;
    left            : 50%;
    transform       : translateX(-50%);
}

/* Khắc phục lỗi padding cho các section */
section {
    width     : 100%;
    box-sizing: border-box;
}

/* ===============================================
   CARDS & FEATURES
   =============================================== */
/* Dish Cards Styling */
.dish-card {
    border       : none;
    transition   : all 0.3s ease;
    border-radius: 12px;
    overflow     : hidden;
    box-shadow   : 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    /* Thêm khoảng cách giữa các card */
}

.dish-card:hover {
    transform : translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dish-card .card-img-top {
    height    : 220px;
    object-fit: cover;
    width     : 100%;
}

.dish-card .card-body {
    padding: 1.5rem;
}

.dish-card .card-title {
    font-weight  : 700;
    font-size    : 1.3rem;
    margin-bottom: 0.75rem;
    color        : var(--primary-color);
}

.dish-price {
    font-weight: 600;
    color      : var(--accent-color);
    font-size  : 1.1rem;
}

.dish-card .btn-view {
    background-color: var(--primary-color);
    color           : white;
    border          : none;
    padding         : 0.5rem 1.5rem;
    border-radius   : 30px;
    transition      : all 0.3s;
}

.dish-card .btn-view:hover {
    background-color: var(--accent-color);
}

/* Feature Card */
.feature-card {
    background   : #fff;
    border-radius: 5px;
    transition   : transform 0.3s, box-shadow 0.3s;
    margin-bottom: 20px;
}

.feature-card:hover {
    transform : translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Special Card */
.special-card {
    border       : none;
    border-radius: 15px;
    overflow     : hidden;
    box-shadow   : 0 8px 20px rgba(0, 0, 0, 0.1);
    position     : relative;
    transition   : transform 0.3s ease;
    margin-bottom: 20px;
}

.special-card:hover {
    transform: scale(1.03);
}

.special-badge {
    position        : absolute;
    top             : 10px;
    right           : 10px;
    background-color: var(--accent-color);
    color           : white;
    padding         : 0.5rem 1rem;
    border-radius   : 20px;
    font-weight     : 600;
    z-index         : 10;
}

.special-card .card-img-top {
    height    : 250px;
    object-fit: cover;
    transition: transform 0.5s;
    width     : 100%;
}

.special-card:hover .card-img-top {
    transform: scale(1.05);
}

.special-price {
    font-size  : 1.2rem;
    color      : var(--accent-color);
    font-weight: 700;
}

/* News Section Cards */
.news-section {
    background-color: var(--light-color);
    padding         : var(--section-padding);
    width           : 100%;
}

.news-card {
    border       : none;
    border-radius: 12px;
    overflow     : hidden;
    box-shadow   : 0 5px 15px rgba(0, 0, 0, 0.1);
    transition   : transform 0.3s ease;
    margin-bottom: 20px;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card .card-img-top {
    height    : 200px;
    object-fit: cover;
    width     : 100%;
}

.news-date {
    font-size: 0.85rem;
    color    : #777;
}

/* Specials Section */
.specials-section {
    background-color: white;
    padding         : var(--section-padding);
    width           : 100%;
}

/* ===============================================
   FOOTER
   =============================================== */
.footer {
    background-color: var(--dark-color);
    color           : white;
    padding         : 3rem 0 2rem;
    width           : 100%;
}

.footer-title {
    font-size    : 1.5rem;
    margin-bottom: 1.5rem;
    color        : var(--secondary-color);
}

.footer-contact i {
    margin-right: 10px;
    color       : var(--secondary-color);
}

.footer-links a {
    color          : #DDD;
    text-decoration: none;
    display        : block;
    margin-bottom  : 0.5rem;
    transition     : color 0.3s;
}

.footer-links a:hover {
    color: var(--secondary-color);
}

.social-icon {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color           : white;
    margin-right    : 10px;
    transition      : all 0.3s;
}

.social-icon:hover {
    background-color: var(--secondary-color);
    color           : var(--dark-color);
}

/* ===============================================
   UTILITIES
   =============================================== */
/* Back to top button */
.back-to-top {
    position        : fixed;
    bottom          : 20px;
    right           : 20px;
    width           : 45px;
    height          : 45px;
    background-color: var(--primary-color);
    color           : white;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    opacity         : 0;
    transition      : all 0.3s;
    z-index         : 999;
}

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

/* ===============================================
   RESPONSIVE
   =============================================== */
@media (max-width: 768px) {
    .hero {
        min-height           : 60vh;
        /* Giảm chiều cao banner trên mobile */
        background-attachment: scroll;
        height               : calc(var(--vh, 1vh) * 22);
        /* Giảm chiều cao xuống 35% */
        max-width            : 100%;
        background-size      : cover;
        background-position  : center top;
    }

    .hero-content {
        width    : 90%;
        padding  : 1.5rem;
        margin   : 0 auto;
        max-width: 100%;
    }

    .hero-title {
        font-size    : 1.8rem;
        margin-bottom: 0.8rem;
    }

    .hero-subtitle {
        font-size    : 0.9rem;
        margin-bottom: 1.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        width         : 100%;
        gap           : 10px;
    }

    .btn-main,
    .btn-outline {
        width  : 100%;
        padding: 10px;
    }

    .section-title {
        font-size: 1.8rem;
    }

    /* Cố định container */
    .container {
        width        : 100%;
        max-width    : 100%;
        padding-left : 15px;
        padding-right: 15px;
        box-sizing   : border-box;
    }

    /* Thu nhỏ ảnh trong card */
    .dish-card .card-img-top {
        height: 180px;
    }

    .special-card .card-img-top {
        height: 200px;
    }

    /* Giảm padding các section */
    .specials-section,
    .news-section {
        padding-top   : 3rem;
        padding-bottom: 3rem;
    }

    /* Điều chỉnh khoảng cách giữa các row */
    .row {
        --bs-gutter-x: 1rem;
    }

    /* Đảm bảo không bị tràn chữ */
    .card-title,
    .card-text {
        word-wrap: break-word;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .hero {
        min-height: 25vh;
        height    : calc(var(--vh, 1vh));
    }

    .hero-content {
        padding: 1rem;
    }

    .hero-title {
        font-size    : 1.5rem;
        margin-bottom: 0.6rem;
    }

    .hero-subtitle {
        font-size    : 0.8rem;
        margin-bottom: 1rem;
    }

    /* Giảm kích thước tiêu đề section */
    .section-title {
        font-size    : 1.6rem;
        margin-bottom: 2rem;
    }

    /* Giảm padding cho card */
    .dish-card .card-body,
    .news-card .card-body,
    .special-card .card-body {
        padding: 1rem;
    }

    /* Giảm kích thước ảnh thêm nữa với màn hình siêu nhỏ */
    .dish-card .card-img-top {
        height: 160px;
    }

    .special-card .card-img-top {
        height: 180px;
    }

    .news-card .card-img-top {
        height: 160px;
    }

    /* Giảm kích thước tiêu đề card */
    .dish-card .card-title,
    .special-card .card-title,
    .news-card .card-title {
        font-size: 1.1rem;
    }
}

/* Class for iOS devices */
.ios-device {
    background-attachment: scroll !important;
    background-size      : cover !important;
}

/* Fix cho Safari */
@supports (-webkit-touch-callout: none) {
    .hero {
        background-attachment: scroll;
    }
}

/* Cố định giao diện chung */
.row {
    margin-left : 0;
    margin-right: 0;
    width       : 100%;
}

.col,
.col-md-4,
.col-md-3,
.col-lg-3 {
    padding-left : 10px;
    padding-right: 10px;
}

img {
    max-width: 100%;
}

/* ===============================================
   SERVICES SECTION
   =============================================== */
.services-section {
    background-color: #f9f9f9;
    padding         : var(--section-padding);
}

.service-card {
    background-color: white;
    border-radius   : 12px;
    padding         : 1.5rem;
    height          : 100%;
    text-align      : center;
    box-shadow      : 0 5px 20px rgba(0, 0, 0, 0.05);
    transition      : all 0.3s ease;
    display         : flex;
    flex-direction  : column;
}

.service-card:hover {
    transform : translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-icon {
    margin          : 0 auto 1.25rem;
    width           : 70px;
    height          : 70px;
    border-radius   : 50%;
    background-color: var(--light-color);
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.service-icon i {
    font-size: 1.75rem;
    color    : var(--primary-color);
}

.service-title {
    font-size    : 1.2rem;
    margin-bottom: 0.75rem;
    color        : var(--primary-color);
    font-weight  : 600;
}

.service-desc {
    font-size    : 0.9rem;
    color        : #666;
    margin-bottom: 1.25rem;
    flex-grow    : 1;
}

.service-link {
    display        : inline-block;
    color          : var(--accent-color);
    text-decoration: none;
    font-weight    : 500;
    font-size      : 0.9rem;
    transition     : all 0.3s;
    padding-bottom : 2px;
    border-bottom  : 1px dashed var(--accent-color);
}

.service-link:hover {
    color              : var(--primary-color);
    border-bottom-style: solid;
}

/* Responsive styles */
@media (max-width: 768px) {
    .service-card {
        padding: 1.25rem;
    }

    .service-icon {
        width        : 60px;
        height       : 60px;
        margin-bottom: 1rem;
    }

    .service-icon i {
        font-size: 1.5rem;
    }

    .service-title {
        font-size    : 1rem;
        margin-bottom: 0.5rem;
    }

    .service-desc {
        font-size    : 0.8rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .service-card {
        padding: 1rem;
    }

    .service-icon {
        width        : 50px;
        height       : 50px;
        margin-bottom: 0.75rem;
    }

    .service-icon i {
        font-size: 1.25rem;
    }

    .service-title {
        font-size      : 0.9rem;
        min-height     : 2.1rem;
        display        : flex;
        align-items    : center;
        justify-content: center;
    }

    .service-desc {
        font-size         : 0.75rem;
        display           : -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow          : hidden;
        height            : 3.6em;
    }

    .service-link {
        font-size: 0.8rem;
    }
}