/* 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 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ữ */ /* chỉ 3 icon chính (không áp vào link trong hộp tài khoản / giỏ hàng nhỏ) */ .ega .header-right__icons > .icon-action__search > i, .ega .header-right__icons #icon-account > a, .ega .header-right__icons #icon-account > a > i, .ega .header-right__icons .mini-cart > a, .ega .header-right__icons .mini-cart > a > i { 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-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ẻ 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%; } } .ega .ega-apps .fa-check-circle { color: #1a8f3c; } /* Menu "Sách": dùng lại kiểu thả xuống 4 cột của ststore_v2 (.stv2-mega* trong ststore-v2.css). Mục menu của theme có position: relative -> đặt static để khung trải hết bề ngang header; căn lề theo container 1320px. */ @media (min-width: 992px) { .ega .navigation .menu-item.ega-v2mega { position: static; } .ega .ega-v2mega .stv2-mega { z-index: 900; padding: 24px max(24px, calc((100vw - 1320px) / 2 + 15px)); text-align: left; } .ega .ega-v2mega .stv2-mega__link, .ega .ega-v2mega .stv2-mega__chip { font-weight: 400; } } @media (max-width: 991.98px) { .ega #stv2Nav .ega-v2mega .stv2-mega { display: block; position: static; padding: 0 8px 12px; } } /* Màu link như ststore_v2 (theme v3 tô mọi màu --link-color cam) */ .ega .ega-v2mega .stv2-mega__link, .ega .ega-v2mega .stv2-mega__chip { color: var(--stv2-text); } .ega .ega-v2mega .stv2-mega__link i { color: var(--stv2-accent); } .ega .ega-v2mega .stv2-mega__link:hover, .ega .ega-v2mega .stv2-mega__chip:hover { color: var(--stv2-primary); } /* Thẻ sách: 2 nút trên ảnh (