/* =========================================================================
   WORDPRESS — lớp cầu nối giữa markup do WordPress / plugin sinh ra
   và hệ thống thiết kế đã duyệt.

   NGUYÊN TẮC:
   - KHÔNG sửa thang chữ, không sửa container, không scale trang.
     Mọi thứ ở đây chỉ để markup của WordPress khớp vào đúng khung có sẵn.
   - File này nạp SAU content.css và TRƯỚC responsive.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. SỬA LỖI: THUỘC TÍNH hidden BỊ GHI ĐÈ
   Trình duyệt chỉ đặt [hidden] { display: none } ở mức user-agent, nên bất kỳ
   khai báo display nào của giao diện cũng thắng nó. Thanh lọc nhanh dùng
   item.hidden = true để ẩn thẻ, mà .card lại có display: flex, nên nếu không
   có quy tắc dưới đây thì bấm lọc sẽ không ẩn được thẻ nào.
   ------------------------------------------------------------------------- */

[hidden] {
    display: none !important;
}

/* -------------------------------------------------------------------------
   0b. CHÂN TRANG LUÔN NẰM Ở ĐÁY KHI NỘI DUNG NGẮN
   Bản thiết kế chỉ có các trang dài nên không gặp trường hợp này, nhưng
   WordPress thật sẽ có trang ngắn: giỏ hàng trống, danh mục chưa có bài,
   trang 404, trang tĩnh ít chữ. Không có quy tắc này thì chân trang nằm lơ
   lửng giữa màn hình và để lộ một dải nền trống bên dưới.

   .skip-link là position: absolute nên không tham gia bố cục flex.
   ------------------------------------------------------------------------- */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main,
body > .ams-main,
body > .wp-site-blocks {
    flex: 1 0 auto;
}

body > .site-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/* -------------------------------------------------------------------------
   1. PHÂN TRANG — paginate_links() sinh class khác bản thiết kế
   ------------------------------------------------------------------------- */

/* Bản thiết kế dùng .is-dots, WordPress dùng .dots */
.pagination .dots,
.pagination .is-dots {
    border-color: transparent;
    background: transparent;
    color: var(--c-muted);
}

/* Nút Trang trước / Trang sau cần rộng hơn ô số */
.pagination .prev,
.pagination .next {
    padding-inline: 20px;
}

/* wp_link_pages() in ra chữ trần, bọc lại cho giống ô số trang */
.pagination > .post-page-numbers {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: #fffdfb;
    border: 1.5px solid var(--c-border);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-heading);
}

.pagination > .post-page-numbers.current {
    background: var(--c-red);
    border-color: var(--c-red);
    color: #fff;
}

/* -------------------------------------------------------------------------
   2. THẺ CARD KHÔNG CÓ ẢNH ĐẠI DIỆN
   Bài viết chưa đặt ảnh thì bỏ khối ảnh, phần chữ tự chiếm chỗ.
   Không dùng ảnh giả để layout không bị "vá tạm".
   ------------------------------------------------------------------------- */

.card--no-media {
    border: 1px solid var(--c-border-soft);
}

.card--no-media .card__body {
    padding-top: 26px;
}

/* Lưới bài viết cao đều nhau dù bài có / không có ảnh */
.archive-grid > .card,
.dish-grid > .card {
    height: 100%;
}

/* Ảnh do WordPress sinh mang class attachment-* — đảm bảo lấp kín khung */
.card__media img,
.result img,
.article__cover img,
.story__media img,
.order__bag img,
.gallery-grid img {
    max-width: 100%;
}

/* Nhãn chuyên mục trong card__meta có thể là thẻ <a> */
.card__meta a.badge:hover {
    background: rgba(189, 35, 30, .16);
    color: var(--c-red);
}

.card__meta a:not(.badge):hover {
    color: var(--c-red);
}

/* -------------------------------------------------------------------------
   3. WIDGET DO WORDPRESS SINH
   register_sidebar() đã bọc .widget/.widget__title, phần bên trong là
   markup mặc định của WordPress nên cần chuẩn hoá lại.
   ------------------------------------------------------------------------- */

/*
 * Widget dạng khối (WordPress 5.8 trở lên) KHÔNG dùng before_title của
 * register_sidebar(), mà tự in <h2 class="wp-block-heading">. Phải kéo cỡ chữ
 * về đúng .widget__title, nếu không tiêu đề cột bên sẽ to bằng tiêu đề trang.
 * Website đang bật plugin Classic Widgets thì nhánh này không dùng tới,
 * nhưng vẫn giữ để giao diện đúng trong cả hai trường hợp.
 */
.widget > h1,
.widget > h2,
.widget > h3,
.widget > h4,
.widget .wp-block-heading,
.widget .wp-block-group > h1,
.widget .wp-block-group > h2,
.widget .wp-block-group > h3,
.widget .wp-block-group > h4 {
    margin-bottom: 14px;
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--c-heading);
}

/* Widget khối tự thêm khoảng cách riêng, gỡ để khớp nhịp dọc của bản thiết kế. */
.widget .wp-block-group {
    margin: 0;
}

.widget > *:last-child {
    margin-bottom: 0;
}

.widget ul:not([class]),
.widget .wp-block-latest-posts,
.widget .wp-block-categories,
.widget .wp-block-archives,
.widget .wp-block-page-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget ul:not([class]) li + li,
.widget .wp-block-latest-posts li + li,
.widget .wp-block-categories li + li,
.widget .wp-block-archives li + li,
.widget .wp-block-page-list li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border-soft);
}

.widget ul:not([class]) a,
.widget .wp-block-latest-posts a,
.widget .wp-block-categories a,
.widget .wp-block-archives a,
.widget .wp-block-page-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fs-body-sm);
    color: var(--c-heading);
    transition: color var(--dur) var(--ease);
}

.widget ul:not([class]) a:hover,
.widget .wp-block-latest-posts a:hover,
.widget .wp-block-categories a:hover,
.widget .wp-block-archives a:hover,
.widget .wp-block-page-list a:hover {
    color: var(--c-red);
}

/* Số lượng bài trong widget chuyên mục */
.widget .wp-block-categories .post-count,
.widget ul:not([class]) .count {
    font-size: var(--fs-meta);
    color: var(--c-muted);
}

/* Danh sách con của widget menu / trang */
.widget .children,
.widget .sub-menu {
    list-style: none;
    margin: 10px 0 0;
    padding-left: 14px;
}

/* Widget lịch */
.widget .wp-calendar-table {
    font-size: var(--fs-meta);
}

.widget .wp-calendar-table th,
.widget .wp-calendar-table td {
    padding: 6px 4px;
    text-align: center;
    border: 1px solid var(--c-border-soft);
}

/* Widget ô tìm kiếm mặc định của WordPress */
.widget .wp-block-search__inside-wrapper {
    display: flex;
    gap: 10px;
}

.widget .wp-block-search__input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    background: #fffdfb;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-sm);
    color: var(--c-heading);
}

.widget .wp-block-search__button {
    flex: none;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--c-red);
    color: #fff;
    font-size: var(--fs-btn-sm);
    font-weight: 600;
    cursor: pointer;
}

/* Ảnh nhỏ trong widget bài viết mới */
.mini-post img {
    flex: none;
}

/* -------------------------------------------------------------------------
   4. NỘI DUNG BÀI VIẾT — class căn chỉnh cổ điển của WordPress
   ------------------------------------------------------------------------- */

.prose .alignleft {
    float: left;
    margin: .3em 1.6em 1.1em 0;
    max-width: 50%;
}

.prose .alignright {
    float: right;
    margin: .3em 0 1.1em 1.6em;
    max-width: 50%;
}

.prose .aligncenter {
    clear: both;
    margin-inline: auto;
}

.prose .alignnone {
    margin-inline: 0;
}

/* Bố cục đọc rộng 720px; alignwide/alignfull tràn ra hai bên trong giới hạn khung */
.prose .alignwide {
    margin-inline: -30px;
    max-width: calc(100% + 60px);
    width: calc(100% + 60px);
}

.prose .alignfull {
    margin-inline: -36px;
    max-width: calc(100% + 72px);
    width: calc(100% + 72px);
}

.prose .alignfull img,
.prose .alignwide img {
    width: 100%;
}

.prose::after {
    content: "";
    display: block;
    clear: both;
}

/* Chú thích ảnh kiểu cổ điển */
.prose .wp-caption {
    max-width: 100%;
}

.prose .wp-caption-text,
.prose .wp-element-caption {
    margin-top: 8px;
    font-size: var(--fs-meta);
    color: var(--c-muted);
    text-align: center;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   5. NỘI DUNG BÀI VIẾT — khối Gutenberg
   ------------------------------------------------------------------------- */

.prose .wp-block-image {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
}

.prose .wp-block-image img {
    border-radius: var(--radius-sm);
}

.prose .wp-block-image.is-style-rounded img {
    border-radius: var(--radius-pill);
}

.prose .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 1.4em;
}

.prose .wp-block-gallery .wp-block-image {
    margin: 0;
}

.prose .wp-block-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Thư viện ảnh kiểu cổ điển */
.prose .gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.prose .gallery-item {
    margin: 0;
}

.prose .gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose .gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Khối trích dẫn của Gutenberg dùng lại đúng kiểu của bản thiết kế */
.prose .wp-block-quote {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
}

.prose .wp-block-quote cite,
.prose .wp-block-pullquote cite {
    display: block;
    margin-top: 12px;
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--c-muted);
}

.prose .wp-block-pullquote {
    padding: 26px 30px;
    background: var(--c-panel);
    border-left: 4px solid var(--c-red);
    border-radius: var(--radius-sm);
}

/* Bảng */
.prose .wp-block-table {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    overflow-x: auto;
}

.prose .wp-block-table table {
    min-width: 480px;
}

.prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgba(83, 56, 38, .035);
}

/* Bảng viết bằng HTML thuần được PHP bọc bằng .bang-cuon */
.prose .bang-cuon {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose .bang-cuon table {
    min-width: 480px;
    margin: 0;
}

/* Nhúng video / iframe */
.prose .wp-block-embed__wrapper,
.prose .wp-block-video,
.prose .wp-block-audio {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
}

.prose .wp-block-embed iframe,
.prose iframe,
.prose video {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: var(--radius-sm);
}

.prose .wp-block-embed.wp-has-aspect-ratio iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Danh sách, mã nguồn, phân cách */
.prose .wp-block-list {
    padding-left: 1.2em;
}

.prose pre,
.prose .wp-block-code,
.prose .wp-block-preformatted {
    padding: 18px 20px;
    background: #3b2a21;
    color: #f6ede2;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    line-height: 1.6;
    overflow-x: auto;
}

.prose code:not(pre code) {
    padding: 2px 6px;
    background: rgba(83, 56, 38, .08);
    border-radius: 4px;
    font-size: .92em;
}

.prose .wp-block-separator {
    margin-top: 1.8em;
    margin-bottom: 1.8em;
    border: 0;
    border-top: 1px solid var(--c-border);
}

.prose .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    background: var(--c-red);
    color: #fff;
    font-size: var(--fs-btn);
    font-weight: 600;
    text-decoration: none;
}

.prose .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1.8px solid var(--c-red);
    color: var(--c-red);
}

.prose .wp-block-columns {
    gap: 30px;
}

/* Bài viết được bảo vệ bằng mật khẩu */
.prose .post-password-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.prose .post-password-form input[type="password"] {
    min-height: 52px;
    padding: 0 18px;
    background: #fffdfb;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-pill);
}

.prose .post-password-form input[type="submit"] {
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--c-red);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   5b. Ô TÌM KIẾM TRONG KHỐI TIÊU ĐỀ TRANG TÌM KIẾM
   Bản thiết kế dùng class .mt-18 trực tiếp trên form. searchform.php là
   template dùng chung nên khoảng cách đặt bằng CSS theo ngữ cảnh.
   ------------------------------------------------------------------------- */

.search-hero .page-hero__inner .search-form {
    margin-top: 18px;
}

/* -------------------------------------------------------------------------
   5c. FORM CỦA CÁC PLUGIN FORM PHỔ BIẾN
   Giao diện không tự viết bộ xử lý gửi mail. Khi cài Contact Form 7,
   WPForms hoặc Fluent Forms, các quy tắc dưới đây kéo form của plugin về
   đúng kiểu .contact-form của bản thiết kế.
   ------------------------------------------------------------------------- */

.page-body .wpcf7-form,
.page-body .wpforms-form,
.page-body .fluentform .ff-el-group,
.prose .wpcf7-form,
.prose .wpforms-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin-top: 20px;
}

.wpcf7-form p,
.wpforms-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.wpcf7-form label,
.wpforms-field-label,
.fluentform .ff-el-input--label label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-heading);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    background: #fffdfb;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    color: var(--c-heading);
}

.wpcf7-form textarea,
.wpforms-field textarea,
.fluentform textarea {
    min-height: 140px;
    padding: 14px 18px;
    line-height: var(--lh-body);
    resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
    border-color: rgba(189, 35, 30, .5);
    outline: none;
}

/* Ô nội dung và nút bấm chiếm hết chiều ngang, giống bản thiết kế */
.wpcf7-form p:has( textarea ),
.wpcf7-form p:has( input[type="submit"] ),
.wpforms-field-textarea,
.wpforms-submit-container {
    grid-column: 1 / -1;
}

.wpcf7-form input[type="submit"],
.wpforms-submit,
.fluentform .ff-btn-submit {
    justify-self: start;
    min-height: 56px;
    padding: 0 32px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--c-red);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-btn);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-red);
}

.wpcf7-form input[type="submit"]:hover,
.wpforms-submit:hover {
    background: var(--c-red-dark);
}

/* Thông báo của Contact Form 7 */
.wpcf7-response-output {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-sm);
}

.wpcf7-not-valid-tip {
    font-size: var(--fs-meta);
    color: var(--c-red);
}

/* Form plugin xếp một cột trên màn hẹp, theo đúng breakpoint của bản thiết kế. */
@media (max-width: 860px) {
    .page-body .wpcf7-form,
    .page-body .wpforms-form,
    .prose .wpcf7-form,
    .prose .wpforms-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   6. KHỐI TRẠNG THÁI TRỐNG
   ------------------------------------------------------------------------- */

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
}

.empty-state .search-form {
    max-width: 460px;
    margin-inline: auto;
}

/* Dòng nhắc chỉ người quản trị nhìn thấy */
.bmqb-goi-y-admin {
    margin-top: 22px;
    padding: 18px 22px;
    background: rgba(189, 35, 30, .06);
    border: 1px dashed rgba(189, 35, 30, .35);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-sm);
    color: var(--c-heading);
    text-align: center;
}

/* -------------------------------------------------------------------------
   7. ĐIỀU HƯỚNG BÀI TRƯỚC / BÀI SAU
   ------------------------------------------------------------------------- */

.post-nav {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--c-border-soft);
}

.post-nav .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.post-nav .nav-previous,
.post-nav .nav-next {
    min-width: 0;
}

.post-nav .nav-next {
    text-align: right;
}

.post-nav a {
    display: block;
    padding: 16px 20px;
    background: var(--c-panel);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur) var(--ease);
}

.post-nav a:hover {
    border-color: rgba(189, 35, 30, .4);
}

.post-nav__label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.post-nav__title {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--c-heading);
    line-height: var(--lh-tight);
}

.post-nav a:hover .post-nav__title {
    color: var(--c-red);
}

/* -------------------------------------------------------------------------
   8. BÌNH LUẬN
   ------------------------------------------------------------------------- */

.binh-luan {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--c-border-soft);
}

.binh-luan__title {
    font-size: var(--fs-h3);
    margin-bottom: 20px;
}

.binh-luan__list,
.binh-luan__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.binh-luan__list .children {
    margin-top: 18px;
    padding-left: 26px;
    border-left: 2px solid var(--c-border-soft);
}

.binh-luan__list li + li {
    margin-top: 18px;
}

.binh-luan__list .comment-body {
    padding: 18px 20px;
    background: var(--c-panel);
    border-radius: var(--radius-sm);
}

.binh-luan__list .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--c-heading);
}

.binh-luan__list .comment-author img {
    border-radius: var(--radius-pill);
}

.binh-luan__list .comment-metadata {
    margin-bottom: 10px;
    font-size: var(--fs-meta);
    color: var(--c-muted);
}

.binh-luan__list .reply {
    margin-top: 10px;
    font-size: var(--fs-small);
    font-weight: 600;
}

.binh-luan__list .reply a {
    color: var(--c-red);
}

.binh-luan__dong {
    margin-top: 16px;
    font-size: var(--fs-body-sm);
    color: var(--c-muted);
}

.binh-luan__form .comment-notes,
.binh-luan__form .comment-form-cookies-consent {
    grid-column: 1 / -1;
    font-size: var(--fs-small);
    color: var(--c-muted);
}

.binh-luan__form .comment-form-author,
.binh-luan__form .comment-form-email,
.binh-luan__form .comment-form-url {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.binh-luan__form .comment-form-url,
.binh-luan__form .logged-in-as {
    grid-column: 1 / -1;
}

.binh-luan__form input[type="text"],
.binh-luan__form input[type="email"],
.binh-luan__form input[type="url"] {
    min-height: 52px;
    padding: 0 18px;
    background: #fffdfb;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-sm);
    color: var(--c-heading);
}

.binh-luan__form label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-heading);
}

/* -------------------------------------------------------------------------
   9. THANH QUẢN TRỊ CỦA WORDPRESS
   WordPress tự chèn html { margin-top: 32px }. Header của trang chủ nằm
   position:absolute trong body nên đã tự dịch theo, KHÔNG bù thêm bằng CSS
   để khách truy cập (không đăng nhập) không bị lệch.
   Chỉ xử lý trạng thái header dính, vì lúc đó header là position:fixed.
   ------------------------------------------------------------------------- */

.admin-bar .site-header--sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header--sticky {
        top: 46px;
    }
}

/* -------------------------------------------------------------------------
   10. ALOXOVN MINI SHOP
   Plugin tự dựng <main class="ams-main"> giữa header và footer.
   Chỉ cần đưa nội dung đó vào đúng khung container của giao diện.
   ------------------------------------------------------------------------- */

.ams-main {
    width: min(100% - (var(--container-gutter) * 2), var(--container-max));
    margin-inline: auto;
    padding-block: 40px 56px;
}

.bmqb-shop .ams-main .ams-scope {
    font-size: var(--fs-body);
}

/*
 * Trang Thực đơn dùng lại bố cục trang trong của giao diện (xem
 * aloxovn-mini-shop/shop/archive-product.php), nên .ams-main không còn tự
 * kẻ container nữa — container do .content-section bên trong lo.
 */
.bmqb-shop .ams-main {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: 0;
}

/* Lưới sản phẩm ăn theo lưới thẻ của trang danh mục. */
.bmqb-shop .ams-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmqb-shop .ams-grid > .card {
    margin: 0;
}

.bmqb-shop .ams-grid .card__media {
    aspect-ratio: 3 / 2;
}

.bmqb-shop .ams-grid .card__title {
    font-size: var(--fs-h4);
}

/* Thanh danh mục + sắp xếp của plugin mặc theo thanh lọc của giao diện. */
.bmqb-shop .ams-shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 26px;
    padding: 14px 20px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    background: #fffdfb;
}

.bmqb-shop .ams-shop-toolbar__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bmqb-shop .ams-chip {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--c-border);
    background: #fffdfb;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--c-heading);
    transition: all var(--dur) var(--ease);
}

.bmqb-shop .ams-chip:hover {
    border-color: rgba(189, 35, 30, .4);
    color: var(--c-red);
}

.bmqb-shop .ams-chip.is-active {
    background: var(--c-red);
    border-color: var(--c-red);
    color: #fff;
}

.bmqb-shop .ams-shop-toolbar__sort {
    margin-left: auto;
}

.bmqb-shop .ams-select {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--c-border);
    background: #fffdfb;
    font-size: var(--fs-small);
    color: var(--c-heading);
}

/* Nút thêm vào giỏ mặc dáng nút của giao diện. */
.ams-scope .card__footer .ams-add-to-cart {
    width: 100%;
}

.ams-scope .card__footer .ams-button,
.ams-scope .card__mua .ams-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid var(--c-red);
    border-radius: var(--radius-pill);
    background: var(--c-red);
    color: #fff;
    font-size: var(--fs-btn-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.ams-scope .card__footer .ams-button:hover,
.ams-scope .card__mua .ams-button:hover {
    background: var(--c-red-dark);
    border-color: var(--c-red-dark);
    color: #fff;
    transform: translateY(-2px);
}

.ams-scope .card__footer .ams-button--outline,
.ams-scope .card__mua .ams-button--outline {
    background: #fffdfb;
    color: var(--c-red);
}

.ams-scope .card__footer .ams-button--outline:hover,
.ams-scope .card__mua .ams-button--outline:hover {
    background: var(--c-red);
    color: #fff;
}

.ams-scope .card__footer .ams-button svg,
.ams-scope .card__mua .ams-button svg {
    width: 19px;
    height: 19px;
    flex: none;
}

/* Giá trong thẻ món: dùng lại đúng kiểu .card__gia. */
.ams-scope .card__gia {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ams-scope .card__gia .ams-price__current,
.ams-scope .card__gia .ams-price__contact {
    font-size: var(--fs-h4);
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-red);
    text-decoration: none;
}

.ams-scope .card__gia .ams-price__regular {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--c-muted);
}

/*
 * Nhãn "Hết hàng" / "-20%" của plugin nằm chung góc ảnh với dải ruy băng
 * Best Seller, nên đẩy lên góc trên trái để hai thứ không chồng nhau.
 */
.ams-scope .card__media .ams-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--c-heading);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 600;
}

.ams-scope .card__media .ams-badge--sale {
    background: var(--c-red);
}

/* -------------------------------------------------------------------------
   HÀNG MUA — giá và nút thêm giỏ nằm cùng một dòng

   Dùng chung cho thẻ món ở trang Thực đơn, thẻ món ngoài trang chủ và cột
   "Gọi thêm món" trong giỏ hàng. Khung viền nhẹ tách hàng này khỏi phần mô
   tả để mắt nhận ra ngay đây là chỗ để bấm.
   ------------------------------------------------------------------------- */
.card__mua {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: auto 22px 22px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    background: rgba(189, 35, 30, .035);
}

/* Không có nút thì canh giữa cho cân, tránh khoảng trống lệch một bên. */
.card__mua--khong-nut {
    justify-content: flex-start;
}

.card__mua-gia {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* Bỏ lề trên của dòng giá khi nó đã nằm trong khung mua. */
.card__mua-gia .card__gia {
    margin: 0;
}

.card__mua-nut {
    flex: none;
}

/*
 * Nút trong hàng mua co theo nội dung chứ không kéo hết chiều ngang.
 *
 * Template gốc của plugin gắn sẵn class --block (width:100%), và CSS của
 * plugin được nạp SAU CSS của giao diện. Cùng độ ưu tiên thì cái nạp sau
 * thắng, nên các quy tắc dưới đây phải thêm .ams-scope cho hơn một bậc.
 */
.ams-scope .card__mua .ams-add-to-cart,
.ams-scope .card__mua .ams-button {
    width: auto;
}

.ams-scope .card__mua .ams-button {
    min-height: 44px;
    padding: 0 20px;
    font-size: var(--fs-btn-sm);
    white-space: nowrap;
}

.ams-scope .card__mua .ams-button svg {
    width: 18px;
    height: 18px;
}

/* Thẻ món trang chủ: khung mua rộng bằng thân thẻ. */
.dish-card .card__mua {
    margin: auto 24px 20px;
}

/* -------------------------------------------------------------------------
   GIỎ HÀNG — cột bên "Gọi thêm món"
   ------------------------------------------------------------------------- */

/*
 * Trang giỏ hàng / đặt hàng là Trang tĩnh chứa shortcode nên bị khuôn đọc
 * hẹp 780px của page.php bó lại — bố cục hai cột không đủ chỗ. Nới ra bằng
 * đúng bề rộng khung nội dung.
 */
.bmqb-trang-shop .page-body .prose {
    max-width: none;
}

.bmqb-cart-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 26px;
}

/* Không có món gợi ý thì trả lại một cột, không để khoảng trống. */
.bmqb-cart-wrap--don {
    grid-template-columns: minmax(0, 1fr);
}

.bmqb-cart-wrap__main {
    min-width: 0;
}

.bmqb-cart-them {
    padding: 22px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-md);
    background: #fffdfb;
    box-shadow: var(--shadow-xs);
}

.bmqb-cart-them__tieu-de {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--c-heading);
    margin-bottom: 4px;
}

.bmqb-cart-them__dan {
    font-size: var(--fs-small);
    color: var(--c-muted);
    line-height: var(--lh-tight);
    margin-bottom: 18px;
}

.bmqb-cart-them__ds {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmqb-cart-them__mon {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border-soft);
}

.bmqb-cart-them__mon:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bmqb-cart-them__anh {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xs);
    aspect-ratio: 1 / 1;
}

.bmqb-cart-them__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bmqb-cart-them__than {
    min-width: 0;
}

.bmqb-cart-them__ten {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--c-heading);
    margin-bottom: 6px;

    /* Tên dài cắt ở dòng thứ hai để mọi hàng cao bằng nhau. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bmqb-cart-them__ten a:hover {
    color: var(--c-red);
}

/*
 * Trong cột hẹp thì bỏ khung viền của hàng mua — hai lớp viền lồng nhau
 * trong một ô hẹp nhìn rối và ăn mất chỗ của tên món.
 *
 * Giá một dòng, nút một dòng bên dưới: cột chỉ rộng khoảng 200px sau khi trừ
 * ảnh, đặt giá cạnh nút "Thêm vào giỏ" là chữ bị đẩy xuống lộn xộn.
 */
.bmqb-cart-them .card__mua {
    flex-direction: column;
    /* Nút co theo chữ và canh trái: ba nút đỏ kéo hết bề ngang xếp chồng
       nhau trông nặng, canh theo mép trái cùng tên món thì gọn hơn. */
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    gap: 8px;
}

.ams-scope.bmqb-cart-them .card__mua .ams-add-to-cart,
.ams-scope.bmqb-cart-them .card__mua .ams-button {
    width: auto;
}

.ams-scope.bmqb-cart-them .card__mua .ams-button {
    min-height: 36px;
    padding: 0 12px;
    font-size: var(--fs-meta);
    gap: 7px;
}

.ams-scope.bmqb-cart-them .card__mua .ams-button svg {
    width: 16px;
    height: 16px;
}

.bmqb-cart-them .card__gia .ams-price__current {
    font-size: var(--fs-body-sm);
}

.bmqb-cart-them .card__gia-dv {
    font-size: var(--fs-meta);
}

.bmqb-cart-them__tat-ca {
    display: block;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border-soft);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--c-red);
    text-align: center;
}

.bmqb-cart-them__tat-ca:hover {
    color: var(--c-red-dark);
}

/* -------------------------------------------------------------------------
   KHUNG XEM ẢNH (LIGHTBOX)

   Kích thước ảnh bó theo khung nhìn chứ không theo kích thước file, nên ảnh
   gốc 4000px cũng không bao giờ tràn màn hình hay tạo thanh cuộn.
   ------------------------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.lightbox[hidden] {
    display: none;
}

/* Khoá cuộn trang phía sau khi khung đang mở. */
body.lightbox-dang-mo {
    overflow: hidden;
}

.lightbox__nen {
    position: absolute;
    inset: 0;
    background: rgba(28, 14, 10, .88);
    backdrop-filter: blur(3px);
    cursor: zoom-out;
}

.lightbox__khung {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: min(100%, 1100px);
}

.lightbox__hinh {
    margin: 0;
    text-align: center;
    min-width: 0;
}

.lightbox__hinh img {
    display: block;
    margin-inline: auto;
    /* Trừ chỗ cho padding khung, chú thích và dòng đếm. */
    max-width: 100%;
    max-height: calc(100vh - 132px);
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    background: #fff;
}

.lightbox__chu-thich {
    margin-top: 12px;
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
    color: rgba(255, 255, 255, .88);
}

.lightbox__chu-thich[hidden] {
    display: none;
}

.lightbox__dem {
    grid-column: 1 / -1;
    text-align: center;
    font-size: var(--fs-meta);
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .6);
}

.lightbox__nut {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.lightbox__nut:hover {
    background: var(--c-red);
}

.lightbox__nut:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.lightbox__nut[hidden] {
    visibility: hidden;
    display: grid;
}

/*
 * Nút đóng neo theo KHUNG NHÌN chứ không theo khung ảnh.
 * Ảnh dọc rất cao làm khung ảnh cao hơn màn hình, neo theo khung thì nút bị
 * đẩy lên trên mép màn và khách không còn chỗ bấm để thoát.
 */
.lightbox__nut--dong {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    background: rgba(0, 0, 0, .5);
    z-index: 3;
}

/* -------------------------------------------------------------------------
   CỘT "GỌI THÊM MÓN" — khử kiểu chữ bài viết tràn vào

   Giỏ hàng là shortcode nằm trong .prose của trang tĩnh, nên mọi quy tắc chữ
   của bài viết (link gạch chân đỏ, dấu chấm đầu dòng, cỡ chữ h2/h3, khoảng
   cách dòng) đổ hết vào đây. Đây chính là thứ làm cột bên trông thô.
   ------------------------------------------------------------------------- */
.prose .bmqb-cart-wrap a,
.prose .ams-scope a {
    text-decoration: none;
}

.prose .bmqb-cart-wrap ul,
.prose .bmqb-cart-wrap ol,
.prose .ams-scope ul,
.prose .ams-scope ol {
    list-style: none;
    padding-left: 0;
}

.prose .bmqb-cart-wrap li + li,
.prose .ams-scope li + li {
    margin-top: 0;
}

.prose .bmqb-cart-wrap h2,
.prose .bmqb-cart-wrap h3,
.prose .ams-scope h2,
.prose .ams-scope h3 {
    margin-top: 0;
}

.prose .bmqb-cart-them__tieu-de {
    font-size: var(--fs-h4);
}

.prose .bmqb-cart-them__ten {
    font-size: var(--fs-body-sm);
}

.prose .bmqb-cart-them__ten a {
    color: var(--c-heading);
}

.prose .bmqb-cart-them__ten a:hover {
    color: var(--c-red);
}

/* Dấu … của phân trang do WordPress sinh ra mang class "dots". */
.pagination .dots {
    border-color: transparent;
    background: transparent;
    color: var(--c-muted);
}

/*
 * Lớp ẩn chỉ dành cho trình đọc màn hình. WordPress và nhiều plugin in ra
 * class này, giao diện phải tự định nghĩa nếu không chữ sẽ hiện ra ngoài.
 */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   11. KHỐI NỘI DUNG TỰ NHẬP Ở TRANG CHỦ
   ------------------------------------------------------------------------- */

.content-section--front {
    padding-top: 12px;
}

/* -------------------------------------------------------------------------
   12. CÁC TIỆN ÍCH NHỎ CÒN THIẾU
   ------------------------------------------------------------------------- */

/*
 * Logo tuỳ biến của WordPress là thẻ <img> nằm trong .site-logo nên đã ăn
 * theo quy tắc .site-logo img của header.css, kể cả các breakpoint trong
 * responsive.css. KHÔNG khai báo lại chiều cao ở đây: selector
 * ".site-logo .custom-logo" có độ ưu tiên cao hơn ".site-logo img" và sẽ
 * khoá logo ở 58px trên mọi màn hình, làm logo mobile to sai so với bản duyệt.
 */

.site-footer__logo img {
    max-height: 62px;
    width: auto;
}

/* Thẻ sticky do WordPress đánh dấu */
.card.sticky {
    outline: 2px solid rgba(189, 35, 30, .3);
    outline-offset: -2px;
}