/* ============================================================================
 * common.css — STYLE DÙNG CHUNG cho toàn storefront (nạp ở _Layout).
 * Gom các thành phần lặp lại nhiều trang về một chỗ để tái sử dụng (CLAUDE.md 6.5),
 * thay cho việc khai báo trùng trong <style> inline của từng view.
 *
 * Khi thêm 1 component dùng ở ≥2 trang, hãy đưa style vào ĐÂY thay vì copy vào view.
 * ========================================================================== */

/* ---- Toast thông báo (góc dưới, trượt lên) --------------------------------
 * Dùng ở: trang Giỏ hàng, Thanh toán, Chi tiết sản phẩm... Markup: <div class="oe-toast">…</div>,
 * thêm class "show" để hiện. Trước đây khai báo trùng trong từng view. */
.oe-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    background: #111111;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    z-index: 9999;
}
.oe-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Menu header: LUÔN 1 dòng, không xuống dòng (6 mục) ===== */
/* Items là inline-block → white-space:nowrap ở ul giữ tất cả trên cùng 1 hàng. */
.aq-header-menu > nav > ul { white-space: nowrap; }
/* Desktop hẹp: thu gọn khoảng cách & cỡ chữ để 6 mục vừa khít, vẫn 1 dòng. */
@media (min-width: 1200px) and (max-width: 1499px) {
    .aq-header-menu > nav > ul > li { margin: 0 9px; }
    .aq-header-menu > nav > ul > li > a { font-size: 13px; letter-spacing: -.2px; }
}

/* ===== Nút CTA "pill" dùng chung (CLAUDE.md 6.5) ============================
 * Một component cho mọi nút kêu gọi hành động: Hero trang chủ, Banner đầu trang
 * danh mục, và các khu khác về sau. Markup:
 *   <a class="oe-cta-btn oe-cta-btn--primary" href="…">Chữ nút <svg…></svg></a>
 *   <a class="oe-cta-btn oe-cta-btn--ghost"   href="…">Chữ nút</a>
 * Vị trí/animation của từng khu để file CSS riêng của khu đó (vd .oe-hero-cta,
 * .oe-cat-banner__cta); ĐÂY chỉ định nghĩa phần "nhìn" của nút để tái dùng. */
.oe-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    min-width: 220px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .15s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
}
.oe-cta-btn svg { transition: transform .2s ease; }
.oe-cta-btn:active { transform: translateY(1px); }

/* Biến thể CHÍNH (đỏ thương hiệu) — dùng chung biến --aq-common-red như các khu khác. */
.oe-cta-btn--primary {
    background: var(--aq-common-red, #e4002b);
    color: #fff;
    box-shadow: 0 12px 30px rgba(228, 0, 43, .35);
}
.oe-cta-btn--primary:hover {
    background: var(--aq-common-red-dark, #c20025);
    color: #fff;
    box-shadow: 0 16px 38px rgba(228, 0, 43, .45);
}
.oe-cta-btn--primary:hover svg { transform: translateX(4px); }

/* Biến thể PHỤ (viền kính mờ trên nền ảnh tối) — vd nút "Tư vấn miễn phí" ở hero. */
.oe-cta-btn--ghost {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
    backdrop-filter: blur(4px);
}
.oe-cta-btn--ghost:hover { background: #fff; color: #16181c; border-color: #fff; }

/* Mobile: nút co theo bề ngang container, cao vừa phải. */
@media (max-width: 479px) {
    .oe-cta-btn { min-width: 0; height: 50px; padding: 0 22px; font-size: 14px; }
}