/*
 * Các khối bố cục riêng của trang chủ (bản tiếng Việt và bản tiếng Anh) và
 * trang thực đơn tiếng Anh: hero slider, thanh USP, lưới món nổi bật, lưới
 * "chỗ ngồi làm việc", lưới "vì sao đặt trực tiếp".
 *
 * Trước đây toàn bộ khối này nằm inline trong home.blade.php. Tách ra file
 * riêng vì bản tiếng Anh dùng đúng những lớp đó — copy sang trang thứ hai
 * nghĩa là hai bản CSS trôi khỏi nhau theo thời gian, và mỗi lượt xem trang
 * chủ phải tải lại ~9KB CSS mà trình duyệt không được phép cache.
 */

/* Overlay tối cho main slider — ảnh quán thường sáng (tường/trần
   trắng) khiến chữ trắng + text-shadow của template không đủ
   tương phản để đọc. */
.main-slider .slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 100%);
    z-index: 1;
}
.main-slider .slide .content {
    position: relative;
    z-index: 2;
}
/*
 * Vendor để .slide cao cố định 400px (mobile) với .content nằm
 * position:absolute canh giữa — hero giờ có thêm dòng giá/freeship
 * nên dài hơn caption gốc, chữ dài + màn hẹp dễ tràn ra ngoài khung
 * cố định đó. Chuyển sang flex + height:auto ở màn rất hẹp để khung
 * luôn tự giãn theo đúng nội dung, không bao giờ bị cắt/đè lên nhau
 * dù nội dung dài ngắn thế nào.
 */
/*
 * Vendor để .slide cao cố định (100vh ở desktop, 400px từ 767px trở xuống)
 * với .content nằm position:absolute canh giữa — chữ dài hơn khung là bị cắt
 * chứ khung không giãn. Hero giờ có thêm dòng giá/freeship và một dòng tiếng
 * Anh, nên đổi sang flex + height:auto cho toàn bộ dải màn hình hẹp:
 * min-height giữ đúng chiều cao cũ khi chữ ngắn, và khung tự cao lên thay vì
 * cắt mất nút bấm khi chữ dài (tiếng Anh thường dài hơn tiếng Việt).
 */
@media (max-width: 767px) {
    .main-slider .slide {
        height: auto !important;
        min-height: 400px;
        display: flex;
        align-items: center;
    }
    .main-slider .slide .content {
        position: static;
        transform: none;
        padding: 40px 16px;
    }
}

@media (max-width: 480px) {
    .main-slider .slide {
        min-height: 420px;
    }
}

/* Card kiểu trang Thực đơn — .menu-list gốc của template xoay ảnh
   85°, không hợp ảnh chụp món thật. */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.featured-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Vạch vàng nâu mảnh trượt vào từ trái khi hover — cùng tông
   thương hiệu với nút CTA, cho card cảm giác "được chọn" rõ hơn
   là chỉ nhấc lên/đổ bóng suông. */
.featured-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #c89f5b, #a67c3d);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}
.featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.13);
}
.featured-card:hover::before {
    transform: scaleY(1);
}
.featured-card-img {
    position: relative;
    flex: 0 0 130px;
    background: linear-gradient(135deg, #f5e6d3 0%, #e8d5c4 100%);
    overflow: hidden;
}
.featured-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.featured-card:hover .featured-card-img img { transform: scale(1.06); }
.featured-card-body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-card-body .item-name {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 3px;
}
.featured-card-body .item-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    line-height: 1.4;
}
.featured-card-body .item-price {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #c89f5b;
    margin: 0;
}
.best-seller-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    white-space: nowrap;
}
@media (max-width: 991px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .featured-grid { grid-template-columns: 1fr; }
}

/*
 * Thanh USP ngay dưới hero — 4 lý do đặt trực tiếp gói trong 3 giây
 * nhìn đầu tiên, đứng trước cả khối "Chào mừng" branding. Cố tình
 * không dùng icon ảnh (như khối "BẠN CÓ BIẾT?" bên dưới) để nhẹ và
 * load tức thì, chỉ emoji + chữ.
 */
.usp-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.usp-bar .usp-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    margin: 0 auto;
    max-width: 1000px;
}
.usp-bar .usp-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f9f4ea;
    border-radius: 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #6b5433;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .usp-bar .usp-list { padding: 12px 14px; gap: 8px; }
    .usp-bar .usp-item { padding: 7px 12px; font-size: 11.5px; }
}

/* Nút "Đặt món" trên mỗi card món — CTA phụ, nhỏ và gọn hơn nút
   "Chọn" của trang Đặt món vì ở đây chỉ là lối tắt, không phải luồng
   chọn size/topping đầy đủ. */
.featured-card-cta {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #c89f5b, #a67c3d);
    color: #fff !important;
    border-radius: 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    align-self: flex-start;
    transition: transform .2s ease, box-shadow .2s ease;
}
.featured-card-cta:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(166,124,61,.4);
}

.picks-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

/* "Tại sao đặt trực tiếp" — 3 bước đơn giản, số lớn mờ kiểu editorial
   thay vì icon tròn, để khác hẳn khối icon-bx phía trên (đỡ trùng
   ngôn ngữ thị giác) và đọc nhanh như một danh sách lý do. */
.why-direct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}
.why-direct-item { text-align: center; padding: 0 10px; }
.why-direct-item .step-no {
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: rgba(200,159,91,.35);
    line-height: 1;
    margin-bottom: 6px;
}
.why-direct-item h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.why-direct-item p {
    color: #777;
    font-size: 13.5px;
    margin: 0;
}
@media (max-width: 767px) {
    .why-direct-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* "Ngồi cả ngày vẫn thoải mái" — nhắm tệp dân văn phòng ghé làm
   việc lâu. Cùng bố cục lưới với why-direct-grid nhưng thay số bước
   bằng emoji, vì đây là 3 tiện ích song song chứ không phải quy
   trình tuần tự. */
.workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
}
.workspace-item {
    text-align: center;
    padding: 24px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.workspace-item .workspace-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 10px;
}
.workspace-item h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.workspace-item p {
    color: #777;
    font-size: 13.5px;
    margin: 0;
}
@media (max-width: 767px) {
    .workspace-grid { grid-template-columns: 1fr; gap: 16px; }
}

/*
 * Caption slider giờ là <div>/<p> chứ không còn <h2>/<h4> (xem
 * site/home.blade.php: mọi thẻ H2 đứng trước H1 là cấu trúc heading sai).
 * Quy tắc h1–h6 của template gán font-family Oswald theo TÊN THẺ, nên phải
 * gán lại ở đây, nếu không chữ hero rơi về Open Sans của body.
 */
.main-slider .title,
.main-slider .sub-title {
    font-family: Oswald, sans-serif;
}

/* Dòng tiếng Anh ngắn dưới mỗi slide — đủ đọc, không tranh chỗ với chữ chính. */
.main-slider .slide-en {
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .5px;
    margin: -32px 0 26px;
    text-shadow: 0 0 6px rgba(0, 0, 0, .5);
}

@media (max-width: 767px) {
    .main-slider .slide-en {
        font-size: 13px;
        margin: -18px 0 18px;
    }
}

/* Khối "Ghé quán" trên trang chủ: địa chỉ, giờ, điện thoại, chỗ để xe. */
.visit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
}
.visit-list li {
    padding: 4px 0;
}
.visit-list li strong {
    font-family: Oswald, sans-serif;
    font-size: 20px;
    letter-spacing: .5px;
}

/*
 * Câu hỏi thường gặp — trước đây dùng <h5> kèm style inline chỉ để lấy cỡ
 * chữ; giờ là <h3> đúng thứ bậc (nằm dưới H2 "Câu hỏi thường gặp") nên cỡ
 * chữ phải khai lại ở đây thay vì mượn kích thước mặc định của thẻ.
 */
.faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    padding: 16px 0;
}
.faq-item .faq-q {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 4px;
}
.faq-item .faq-a {
    color: #777;
}