/* Template ststore_v3 – bổ sung cho ega-theme.css (CSS trang tham khảo đã đóng phạm vi .ega).
   1) Biến :root + font khai báo inline trong <head> của trang tham khảo (omegaplus.vn/index.html).
   2) Nối markup tham khảo với JS cũ (ststore-v2.js): menu trượt điện thoại (#stv2Nav.is-open), ô tìm kiếm (#stv2Search.is-open).
   3) Slider dùng carousel Bootstrap 5 sẵn có thay slick; icon Font Awesome thay ảnh PNG của trang tham khảo. */

/* ---------- 1. Biến & font (giữ nguyên giá trị trang tham khảo) ---------- */
.ega {
    --text-color: #282828;
    --body-background: #F8F8F8;
    --text-secondary-color: #666666;
    --primary-color: #2f336f;
    --secondary-color: #292929;
    --price-color: #EB3030;
    --subheader-background: #e5677d;
    --subheader-color: #f9f9f6;
    --header-category-bg: #a50a06;
    --header-category-color: #fff3f4;
    --label-background: #EB3030;
    --label-color: #ffffff;
    --footer-bg: #ffffff;
    --footer-color: #111111;
    --sale-pop-color: #eed104;
    --addtocart-bg: #282828;
    --addtocart-text-color: #ffffff;
    --cta-color: #282828;
    --col-menu: 4;
    --border-color: #f1f1f1;
    --link-color: #EC720E;
    --link-hover-color: #2f5acf;
    --policies-bg: #2f336f;
    --policies-color: #ffffff;
    --reviewBg: #2f336f;
    --starColor: #ffffff;
    --btn-radius: 0px;
    --primary-button-background: #fff;
    --border-radius: 0px;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: var(--text-color);
}
/* Trang tham khảo hiển thị nền trắng (các khối .card trắng liền mạch) */
body.ega-body { background: #fff; }
.ega-home { background: #fff; padding-bottom: 1px; }
.ega h1, .ega h2, .ega h3, .ega h4, .ega h5, .ega h6, .ega button, .ega input { font-family: 'Be Vietnam Pro', sans-serif; }
.ega a:hover { text-decoration: none; }

/* ---------- 2a. Header dính + ô tìm kiếm (JS cũ bật .is-open) ---------- */
.ega-header-scope { position: sticky; top: 0; z-index: 1030; }
/* body { overflow-x: hidden } của theme sau khi đóng phạm vi thành .ega { overflow-x: hidden } -> cắt submenu; header không cần */
.ega.ega-header-scope { overflow: visible; }
.ega-header-scope .ega-header { background: #fff; }
.ega-header-scope .ega-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.ega-header-scope #logo img { max-height: 56px; width: auto; }
.ega .header-right__icons .header-icon { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-color); cursor: pointer; position: relative; }
.ega .header-right__icons .header-icon a { color: inherit; }
/* Theme gốc dùng ảnh PNG cho icon và đặt chữ header màu trắng -> ép icon Font Awesome về màu chữ */
.ega .header-right__icons i, .ega .header-right__icons a { color: var(--text-color) !important; }
.ega .mini-cart .count_item { top: -6px; right: -10px; }
.ega .ega-search { display: none; border-top: 1px solid var(--border-color); background: #fff; padding: 12px 0; }
.ega .ega-search.is-open { display: block; }
.ega .ega-caret i { font-size: 10px; margin-left: 6px; }
.ega .account-action a { display: block; white-space: nowrap; }

/* Submenu 1 cột (menu "Sách", combo): mở ngay dưới mục, rộng theo nội dung thay vì full container */
@media (min-width: 992px) {
    .ega .submenu.ega-submenu--flat { left: 0; right: auto; width: auto; min-width: 240px; }
    .ega .submenu.ega-submenu--flat .submenu__list { display: block; width: auto; max-width: none; padding: 12px 0; }
    .ega .submenu.ega-submenu--flat .submenu__item--main { display: block; padding: 6px 20px; white-space: nowrap; }
    .ega .menu-item:hover > .submenu { opacity: 1; visibility: visible; pointer-events: auto; }
    .ega .ega-mnav-head { display: none !important; }
}

/* ---------- 2b. Menu trượt trên điện thoại (#stv2Nav.is-open do JS cũ bật) ---------- */
@media (max-width: 991.98px) {
    .ega #stv2Nav { display: block !important; position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; background: #fff; z-index: 1050;
        transform: translateX(-100%); transition: transform .25s; overflow-y: auto; }
    .ega #stv2Nav.is-open { transform: none; }
    .ega .ega-mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); }
    .ega .ega-mnav-close { background: none; border: 0; font-size: 20px; }
    /* .navigation-wrapper của theme cao cố định + overflow hidden (thanh menu ngang) -> cắt danh sách trong menu trượt */
    .ega #stv2Nav .navigation-wrapper, .ega #stv2Nav nav, .ega #stv2Nav .navigation { overflow: visible; height: auto; max-height: none; }
    .ega #stv2Nav .navigation { flex-direction: column; }
    .ega #stv2Nav .ega-caret { display: none; }
    .ega #stv2Nav .menu-item { width: 100%; border-bottom: 1px solid var(--border-color); }
    .ega #stv2Nav .menu-item__link { display: flex; justify-content: space-between; padding: 12px 16px; }
    .ega #stv2Nav .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 16px 10px; display: block; }
    .ega #stv2Nav .submenu__list { display: block; padding: 0; }
    .ega #stv2Nav .submenu__item, .ega #stv2Nav .submenu__col { display: block; padding: 5px 0; }
    /* Dưới .ega-header (z 1000) để không che menu trượt nằm trong header */
    .ega .opacity_menu.is-open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 999; }
}

/* ---------- 3. Slider: carousel Bootstrap 5 với giao diện nút/chấm của trang tham khảo ---------- */
.ega .home-slider .carousel-item img { width: 100%; height: auto; }
.ega .home-slider .slick-arrow { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); bottom: auto; border-radius: 50%; background: rgba(255, 255, 255, .85);
    color: #282828; opacity: 0; transition: opacity .2s; margin: 0 16px; border: 0; }
.ega .home-slider:hover .slick-arrow { opacity: 1; }
.ega .home-slider .carousel-indicators { margin-bottom: 12px; }
.ega .home-slider .carousel-indicators [data-bs-target] { width: 24px; height: 4px; border: 0; border-radius: 2px; background: #fff; opacity: .5; }
.ega .home-slider .carousel-indicators .active { opacity: 1; background: var(--primary-color); }

/* Icon lửa thay ảnh flashsale-hot.png */
.ega .ega-hot-icon { color: #f5780b; font-size: 20px; }

/* Lookbook: danh sách bộ sách có dấu đầu dòng (CSS cũ của site bỏ list-style toàn cục), ảnh rộng hết cột */
.ega .lookbook-desc-content ul { list-style: disc; padding-left: 20px; text-align: left; }
.ega .lookbook-desc-content li { list-style: disc; }
.ega .lookbook-desc-content a { color: inherit; }
.ega .lookbook-image-wrap img { width: 100% !important; max-height: none; }

/* Thẻ sách: ảnh bìa đứng (sách ST-Store) đặt giữa khung vuông như trang tham khảo */
.ega .item_product_main .image_thumb img { object-fit: contain; }

/* Video: nút play bằng icon */
.ega .video-play-button { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }

/* Instagram: icon */
.ega .insta-icon { color: #fff; font-size: 28px; }

/* Đánh giá: sao */
.ega .star-vote i { color: var(--starColor); margin-right: 2px; }

/* Dải chính sách: icon Font Awesome thay ảnh PNG, cả khối là link */
.ega .policies-item { color: var(--policies-color); text-decoration: none; }
.ega .policies-item:hover { color: var(--policies-color); opacity: .9; }
.ega .policies-image i { font-size: 30px; line-height: 1; }
.ega .policies-title, .ega .policies-desc { color: var(--policies-color) !important; }

/* Footer: icon mạng xã hội + ứng dụng thay ảnh PNG */
.ega .ega-social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 8px; border-radius: 50%;
    background: var(--primary-color); color: #fff !important; font-size: 15px; }
.ega .ega-apps a { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px 0; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 4px; color: var(--footer-color); font-size: 13px; }
.ega .ega-bct { color: var(--footer-color); font-size: 13px; }
.ega .ega-bct i { color: #1a8f3c; }

/* custom0e2e.css của site ép .container { max-width: var(--container-width, 1280px) !important } -> đặt biến theo
   độ rộng container của trang tham khảo (1320px từ 1200px, 1650px từ 1800px) để khung trang khớp */
.ega { --container-width: 1320px; }
@media (min-width: 1800px) { .ega { --container-width: 1650px; } }

/* Theme xoay thẻ <i> trong .menu-item__link 45° (thiết kế cho icon SVG); quy tắc áp cả icon con -> xoay bù để mũi tên hướng xuống */
.ega .menu-item__link .ega-caret i { transform: rotate(-45deg) !important; display: inline-block; }

/* Footer: theme gốc ẩn danh sách link trên điện thoại và cần JS của họ để mở -> luôn hiện (không dùng JS tham khảo) */
@media (max-width: 991.98px) {
    .ega .footer-click .toggle-mn { display: block !important; }
    .ega .header-right__icons { grid-template-columns: repeat(2, auto) !important; gap: 4px; }
}

/* Đánh giá: chữ trắng trên nền --reviewBg (theme gốc tô màu bằng JS) */
.ega .feedback_header--left, .ega .feedback_header--left h3, .ega .feedback_header--left h4, .ega .feedback_header--left h5,
.ega .feedback_header--left p, .ega .feedback_header--left span { color: #fff; }

/* Video chưa có ảnh: khung 16:9 nền tối + tiêu đề */
.ega .ega-video-noimg { display: flex; align-items: flex-end; aspect-ratio: 16 / 9; padding: 12px; background: linear-gradient(135deg, #2f336f, #11132b);
    color: #fff; font-size: 14px; font-weight: 600; text-align: left; }

/* Video/Instagram: theme gốc chia ô bằng JS slick -> dùng CSS (cuộn ngang, 3 video / 5 ảnh trên máy tính) */
.ega .tiktok_slide_body .hrz-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ega .tiktok_slide_item { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); scroll-snap-align: start; }
/* Instagram: theme đã có lưới 5 cột -> ô lấp đầy cột, vuông; ảnh phủ kín */
.ega .insta_body .insta_item { width: 100%; max-width: none; aspect-ratio: 1 / 1; height: auto; display: block; position: relative; overflow: hidden; }
.ega .insta_body .insta_item::before { display: none; }
.ega .insta_body .insta_item img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 767.98px) {
    .ega .tiktok_slide_item { flex-basis: 80%; max-width: 80%; }
}