/* =====================================================================================================================
   Template ststore_v4 – "Ấn bản chính luận": lớp thiết kế riêng của ST-Store đặt lên khung + khối nội dung của ststore_v3.
   Chỉ nạp khi template v4 bật (Asset v4 đăng ký SAU asset v3/v2), nên không cần đóng phạm vi; dùng body.st-v4 khi cần
   đè quy tắc v3. Một số chỗ thêm :not(#st) – mỗi lần +1 cột ID trong độ ưu tiên – để thắng quy tắc font !important của
   ega-pages.css mục 2 (body.ega-body *:not(i):not([class*="fa-"])…).

   Bản sắc: trang web như một cuốn sách của Nhà xuất bản –
     nền giấy ngà · tiêu đề chữ có chân (Noto Serif) · mỗi khối là một "Chương 0N" (đánh số tự động bằng CSS counter) ·
     dải đánh dấu đỏ (ruy băng trên logo ST) thay nhãn giảm giá · thẻ sách đổ bóng như sách thật, nghiêng nhẹ khi rê chuột.
   Màu: xanh #38bbff (chính – đổi 02/11/2026, trước là xanh dầu #1D4E6B) · đỏ ST #D71920 (điểm nhấn: giá, Mua ngay, dải đánh dấu) · xanh đậm #0b4f7a (chữ tiêu đề).

   Mục lục: 1 Biến · 2 Nền & chữ · 3 Thanh trên cùng · 4 Header & menu · 5 Banner · 6 Ô ưu đãi (vé) · 7 Tiêu đề "Chương" ·
            8 Thẻ sách · 9 Flash sale · 10 Khối trang chủ khác · 11 Footer · 12 Trang trong · 13 Nút & form · 14 Responsive
   ===================================================================================================================== */

/* ---------- 1. Biến: đè bảng màu v3 (đang dùng màu của trang tham khảo) bằng màu ST-Store ---------- */
body.ega-body.st-v4 {
    /* 02/11/2026: xanh chủ đạo đổi sang #38bbff (theo nhận diện sach365.vn); --st-night = cùng tông, đậm – cho chữ tiêu đề */
    --st-petrol: #38bbff;
    --st-petrol-dark: #1a9de0;
    --st-night: #0b4f7a;
    --st-red: #D71920;
    --st-red-dark: #A3121A;
    --st-red-soft: #FBE3E4;
    --st-paper: #FAF7F0;
    --st-paper-2: #F1EBDF;
    --st-ink: #1E2328;
    --st-lead: #5B6470;
    --st-rule: #E2DACB;
    --st-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
    --st-sans: 'Be Vietnam Pro', sans-serif;
    --st-book-shadow: drop-shadow(0 1px 0 rgba(0, 0, 0, .06)) drop-shadow(0 12px 14px rgba(18, 50, 71, .28));

    /* ega-pages.css (trang trong) + ststore-v2.css */
    --ega-primary: var(--st-petrol);
    --ega-primary-dark: var(--st-petrol-dark);
    --ega-price: var(--st-red);
    --ega-text: var(--st-ink);
    --ega-muted: var(--st-lead);
    --ega-line: var(--st-rule);
    --ega-soft: var(--st-paper-2);
    --stv2-primary: var(--st-petrol);
    --stv2-primary-dark: var(--st-petrol-dark);
    --stv2-accent: var(--st-red);
    --stv2-radius: 10px;
    --stv2-shadow: 0 10px 30px -18px rgba(18, 50, 71, .45);
    background: var(--st-paper);
    color: var(--st-ink);
}
/* ega-fix.css khai biến trên từng khối .ega (header, trang chủ, footer) */
.st-v4 .ega {
    --text-color: #1E2328;
    --body-background: #FAF7F0;
    --text-secondary-color: #5B6470;
    --primary-color: #38bbff;
    --secondary-color: #0b4f7a;
    --price-color: #D71920;
    --label-background: #D71920;
    --label-color: #ffffff;
    --footer-bg: #38bbff;
    --footer-color: #ffffff;
    --addtocart-bg: #38bbff;
    --addtocart-text-color: #ffffff;
    --cta-color: #38bbff;
    --border-color: #E2DACB;
    --link-color: #38bbff;
    --link-hover-color: #D71920;
    --policies-bg: #38bbff;
    --policies-color: #ffffff;
    --reviewBg: #38bbff;
    --heading-color: #38bbff;
    --btn-radius: 999px;
    --border-radius: 10px;
}

/* ---------- 2. Nền giấy & chữ ---------- */
.st-v4 .wrapper, .st-v4 .ega-home, .st-v4 .ega .section, .st-v4 .section_product_top,
.st-v4 .section_blog, .st-v4 .section_bento_grid, .st-v4 .section_lookbook { background-color: transparent; }
.st-v4 a { color: var(--st-petrol); }
.st-v4 a:hover { color: var(--st-red); }
.st-v4 ::selection { background: var(--st-red-soft); color: var(--st-red-dark); }

/* Chữ có chân cho tiêu đề & tên sách (thắng quy tắc Be Vietnam Pro !important của v3) */
body.st-v4 :is(h1, h2, h3, .heading-bar__title, .product-name, .product-name a, .stv2-pd-title, .stv2-cat-head__title,
    .stv2-combo-head__title, .stv2-rel__title, .stv2-news-card__title, .stv2-news-card__title a, .ega-page__title,
    .ega-checkout__title, .policies-title, .ega-rv__quote, .blogwp h3, .blogwp h3 a, .footer-title, .estore-bundle__title,
    .estore-popup__title, .st-ticket__title, .ega-reviews__title, .ega-mnav-head):not(#st):not(#st),
body.st-v4 :is(h1, h2, h3, .heading-bar__title, .product-name, .stv2-pd-title, .stv2-cat-head__title, .stv2-combo-head__title,
    .stv2-rel__title, .stv2-news-card__title, .ega-page__title, .ega-checkout__title, .policies-title, .blogwp h3,
    .estore-bundle__title, .st-ticket__title, .ega-reviews__title)
    :not(i):not(svg):not(svg *):not([class*="fa-"]):not([class*="ri-"]):not(#st):not(#st) {
    font-family: var(--st-serif) !important;
}
.st-v4 :is(h1, h2, h3) { color: var(--st-night); letter-spacing: 0; }

/* ---------- 3. Thanh trên cùng (views/layouts/_topbar.php) ---------- */
.st-topbar { background: var(--st-petrol); color: #fff; font-size: 13px; line-height: 1.4; }
.st-topbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding-top: 7px; padding-bottom: 7px; }
.st-topbar__brand { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; }
.st-topbar__links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.st-v4 .st-topbar a { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.st-v4 .st-topbar a:hover { color: var(--st-night); }
.st-topbar strong { color: #fff; font-weight: 600; }
.st-topbar i { font-size: 15px; color: #fff; }

/* ---------- 4. Header & menu ---------- */
.st-v4 .ega-header { background: var(--st-paper); border-bottom: 1px solid var(--st-rule); box-shadow: none; }
.st-v4 .ega-header .menu-item__link { color: var(--st-night); font-weight: 600; position: relative; }
.st-v4 .ega-header .menu-item__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 2px;
    background: var(--st-red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.st-v4 .ega-header .menu-item:hover > .menu-item__link,
.st-v4 .ega-header .menu-item__link:hover { color: var(--st-red); }
.st-v4 .ega-header .menu-item:hover > .menu-item__link::after { transform: scaleX(1); }
.st-v4 .ega-header .header-icon,
.st-v4 .ega-header .header-icon i,
.st-v4 .ega-header #icon-account > a i { color: var(--st-petrol); font-size: 22px; }
.st-v4 .ega-header .header-icon:hover i { color: var(--st-red); }
.st-v4 .ega-header .count_item { background: var(--st-red); color: #fff; font-weight: 700; }
.st-v4 .ega-header .submenu, .st-v4 .stv2-mega { border-top: 3px solid var(--st-red); border-radius: 0 0 12px 12px; box-shadow: 0 18px 36px -20px rgba(18, 50, 71, .5); }
.st-v4 .ega-header .submenu .link:hover, .st-v4 .stv2-mega__link:hover { color: var(--st-red); }
.st-v4 .stv2-mega__heading { color: var(--st-red); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.st-v4 .stv2-mega__chip { border-color: var(--st-rule); border-radius: 999px; }
.st-v4 .stv2-mega__chip:hover { border-color: var(--st-petrol); color: var(--st-petrol); }
.st-v4 .ega-form-search .search-bar { border: 1.5px solid var(--st-petrol); border-radius: 999px; overflow: hidden; background: #fff; }
.st-v4 .ega-form-search .search-bar input { border: 0; box-shadow: none; }
.st-v4 .ega-form-search .btn-action .btn { background: var(--st-petrol); color: #fff; border-radius: 0 999px 999px 0; }
.st-v4 .ega-form-search .search__list a { border-radius: 999px; border: 1px solid var(--st-rule); background: #fff; }
.st-v4 .ega-minicart { border-top: 3px solid var(--st-petrol); border-radius: 0 0 12px 12px; }

/* Header: v3 (ega-fix/ega-theme) đặt màu icon = var(--text-color), nền trắng, bộ đếm = --primary-color với độ ưu tiên cao hơn → đè lại */
body.st-v4 .ega .ega-header { background: var(--st-paper) !important; }
body.st-v4 .ega .ega-header .menu-item__link,
body.st-v4 .ega .ega-header .menu-item__link span { color: var(--st-night) !important; }
body.st-v4 .ega .ega-header .menu-item:hover > .menu-item__link,
body.st-v4 .ega .ega-header .menu-item:hover > .menu-item__link span { color: var(--st-red) !important; }
body.st-v4 .ega .header-right__icons .header-icon,
body.st-v4 .ega .header-right__icons .header-icon i,
body.st-v4 .ega .header-right__icons #icon-account > a,
body.st-v4 .ega .header-right__icons #icon-account > a i { color: var(--st-petrol) !important; }
body.st-v4 .ega .header-right__icons .header-icon:hover i,
body.st-v4 .ega .header-right__icons #icon-account > a:hover i { color: var(--st-red) !important; }
body.st-v4 .ega .header-right__icons .header-icon i { font-size: 24px; }
body.st-v4 .ega .ega-header .header-right__icons { grid-template-columns: repeat(3, 44px) !important; }
/* 3 ô icon (tìm kiếm · tài khoản · giỏ) rộng bằng nhau: căn giữa icon trong mỗi ô cho khoảng cách đều (v3 chỉ căn giữa ô tìm kiếm) */
body.st-v4 .ega .header-right__icons > .header-icon,
body.st-v4 .ega .header-right__icons > #icon-account,
body.st-v4 .ega .header-right__icons > .mini-cart { display: flex !important; justify-content: center; align-items: center; }
body.st-v4 .ega .header-right__icons > #icon-account > a { display: flex !important; justify-content: center; align-items: center; width: 100%; }
body.st-v4 .ega .header-right__icons > .mini-cart > a.header-icon { display: flex !important; justify-content: center; align-items: center; width: 100%; padding: 0 !important; }
body.st-v4 .ega .ega-header .header-right__icons > #icon-account > a { padding: 0 !important; } /* v3: padding-right 15px làm icon lệch trái */
body.st-v4 .ega .ega-header .count_item { background: var(--st-red) !important; color: #fff !important; box-shadow: 0 0 0 2px var(--st-paper); }
body.st-v4 .ega .ega-header .toggle-nav .bar { background: var(--st-petrol) !important; }

/* Menu tài khoản trên header (v3: nền #333 chữ trắng) → cùng kiểu menu con v4 */
body.st-v4 .ega .ega-header .header-right__icons #icon-account .account-action {
    background: #fff !important; border-top: 3px solid var(--st-red); border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 36px -20px rgba(18, 50, 71, .5); padding: 8px 0 !important; min-width: 220px;
}
body.st-v4 .ega .ega-header .header-right__icons #icon-account .account-action a { color: var(--st-night) !important; padding: 9px 18px !important; font-weight: 500; }
body.st-v4 .ega .ega-header .header-right__icons #icon-account .account-action a i { color: var(--st-petrol) !important; width: 18px; }
body.st-v4 .ega .ega-header .header-right__icons #icon-account .account-action a:hover { background: var(--st-paper-2) !important; color: var(--st-red) !important; }
body.st-v4 .ega .ega-header .header-right__icons #icon-account .account-action a:hover i { color: var(--st-red) !important; }

/* ---------- 5. Banner ---------- */
.st-v4 .section_slider .home-slider { border-radius: 0 0 18px 18px; overflow: hidden; }
.st-v4 .section_slider .carousel-indicators button { width: 12px; height: 4px; border-radius: 2px; background: #C8BEAC; border: 0; opacity: 1; }
.st-v4 .section_slider .carousel-indicators button.active { width: 28px; background: var(--st-red); }
.st-v4 .section_slider .slick-arrow { background: rgba(250, 247, 240, .92); color: var(--st-petrol); border-radius: 50%; width: 44px; height: 44px; }

/* ---------- 5b. Khối đầu trang chủ 3 cột: menu kệ sách | banner | tin tức (views/estore/_hero.php, 02/11/2026) ----------
   Máy tính: hàng cao cố định (360px / 300px ở 992–1199px), 3 cột cao bằng nhau; menu cuộn nếu nhiều kệ, ảnh banner phủ
   khung (cover). KHÔNG dùng aspect-ratio + min-height cho cột banner: trong grid nó ép cột rộng tối thiểu 340×2,5 = 850px
   → banner tràn đè cột tin (lỗi 02/11/2026). < 992px: ẩn menu (đã có menu trên header), tin xuống dưới banner. */
.st-v4 .ega-home > .st-hero { margin: 16px 0 40px; }
.st-hero__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.st-hero__menu { position: relative; background: #fff; border: 1px solid var(--st-rule); border-radius: 12px; }
.st-hero__menu-list { position: absolute; inset: 0; margin: 0; padding: 8px 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.st-v4 .st-hero__menu-list a {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--st-ink); font-size: 15px; line-height: 1.35; text-decoration: none;
    transition: background .15s, color .15s;
}
.st-hero__menu-list a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hero__menu-list a i { flex: 0 0 20px; font-size: 18px; color: var(--st-lead); }
.st-v4 .st-hero__menu-list a:hover { background: #E6F6FF; color: var(--st-petrol-dark); }
.st-hero__menu-list a:hover i { color: var(--st-petrol); }
.st-hero__slider { position: relative; min-width: 0; width: 100%; border-radius: 12px; overflow: hidden; background: var(--st-paper-2); }
.st-v4 .st-hero__slider .home-slider { border-radius: 0; }
.st-hero__slider .home-slider, .st-hero__slider .carousel-inner, .st-hero__slider .carousel-item { height: 100%; }
.st-hero__slider .carousel-item > a, .st-hero__slider picture { display: block; height: 100%; }
@media (min-width: 992px) {
    .st-hero__grid { height: 360px; }
    .st-hero__grid > * { height: 100%; }
    body.st-v4 .ega .st-hero__slider .carousel-item img { width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; }
}
.st-hero__news { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--st-rule); border-radius: 12px; overflow: hidden; }
.st-hero__news-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--st-paper-2); flex: 0 1 auto; min-height: 120px; }
.st-hero__news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.st-hero__news-img:hover img { transform: scale(1.03); }
.st-hero__news-noimg { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 42px; color: var(--st-petrol); }
body.st-v4 .st-hero__news-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 12px 14px 6px; }
.st-v4 .st-hero__news-title a { color: var(--st-night); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-v4 .st-hero__news-title a:hover { color: var(--st-petrol-dark); }
.st-hero__news-sum { margin: 0 14px; color: var(--st-lead); font-size: 13.5px; line-height: 1.5; text-align: justify;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-v4 .st-hero__news-more { margin: auto 14px 12px; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--st-petrol-dark); display: inline-flex; align-items: center; gap: 2px; }
@media (max-width: 1199.98px) {
    .st-hero__grid { grid-template-columns: 220px minmax(0, 1fr) 260px; height: 300px; }
    .st-hero__news-sum { -webkit-line-clamp: 2; }
}
@media (max-width: 991.98px) {
    .st-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .st-hero__menu { display: none; }
    .st-hero__grid { height: auto; } /* ảnh giữ tỉ lệ gốc / khung 2:1 của v3 (ega-pages.css mục 20) */
    .st-hero__slider .home-slider, .st-hero__slider .carousel-inner, .st-hero__slider .carousel-item,
    .st-hero__slider .carousel-item > a, .st-hero__slider picture { height: auto; }
    .st-hero__news { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
    .st-hero__news-img { grid-row: 1 / 4; aspect-ratio: auto; min-height: 140px; }
    .st-v4 .st-hero__news-more { margin-top: 6px; }
}
@media (max-width: 575px) {
    .st-v4 .ega-home > .st-hero { margin: 10px 0 28px; }
    .st-hero__slider { border-radius: 10px; }
    .st-hero__news { grid-template-columns: 38% minmax(0, 1fr); }
    .st-hero__news-sum { display: none; }
    body.st-v4 .st-hero__news-title { font-size: 15px; margin: 10px 10px 4px; }
    .st-v4 .st-hero__news-more { margin: 4px 10px 10px; }
}

/* ---------- 6. Ô ưu đãi nhanh dưới banner – dạng vé (views/estore/_quick_offers.php) ---------- */
.st-v4 .awe-section-1:has(+ .st-offers), .st-v4 .st-hero:has(+ .st-offers) { margin-bottom: 0 !important; }
.st-offers { margin: 24px 0 56px; }
.st-offers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-ticket {
    --tk: var(--st-petrol);
    position: relative; display: flex; min-height: 92px; background: #fff; border: 1px solid var(--st-rule);
    border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.st-ticket:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(18, 50, 71, .55); }
.st-ticket--voucher, .st-ticket--flash { --tk: var(--st-red); }
/* Cuống vé: màu đặc + mép răng cưa (2 khuyết tròn trên/dưới + đường đục lỗ) */
.st-ticket__stub {
    flex: 0 0 76px; display: flex; align-items: center; justify-content: center; background: var(--tk); color: #fff;
    position: relative; font-size: 30px;
    -webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.st-ticket__stub::after {
    content: ""; position: absolute; right: -1px; top: 14px; bottom: 14px; width: 0;
    border-right: 2px dotted rgba(255, 255, 255, .7);
}
.st-ticket__stub i { line-height: 1; }
.st-ticket__body { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.st-v4 .st-ticket__title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--st-night); text-decoration: none; }
.st-v4 a.st-ticket__title:hover { color: var(--st-night); }
.st-ticket--voucher .st-ticket__title, .st-ticket--flash .st-ticket__title { color: var(--st-red-dark); }
.st-ticket__sub { font-size: 13px; color: var(--st-lead); line-height: 1.35; }
.st-ticket__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; position: relative; z-index: 2; }
.st-ticket__code { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--st-red-dark); background: var(--st-red-soft); border: 1px dashed var(--st-red); border-radius: 6px; padding: 5px 8px; letter-spacing: .06em; }
.st-ticket__btn { border: 0; border-radius: 999px; background: var(--st-red); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; min-height: 30px; cursor: pointer; }
.st-ticket__btn:hover { background: var(--st-red-dark); }
.st-ticket__btn.is-copied { background: var(--st-petrol); }
body.st-v4 .st-ticket .st-ticket__btn { border-radius: 999px !important; padding: 5px 12px !important; min-height: 28px !important; height: auto !important;
    font: 600 12px/1.2 var(--st-sans) !important; letter-spacing: 0 !important; text-transform: none !important; width: auto !important; }
body.st-v4 .st-ticket .st-ticket__code { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; padding: 5px 8px !important; }
.st-ticket__meta { font-size: 12px; color: var(--st-lead); }
.st-ticket__meta b { color: var(--st-red-dark); font-variant-numeric: tabular-nums; }
.st-ticket__more { font-size: 13px; font-weight: 600; color: var(--tk); display: inline-flex; align-items: center; gap: 4px; }

/* Vé ưu đãi – bản gọn (17/10/2026: "icon to quá, cách xa khối dưới"): cuống nền nhạt + icon màu, thấp hơn, sát khối dưới */
body.st-v4 .st-offers { margin: 18px 0 0 !important; }
body.st-v4 .st-offers + .section { margin-top: 28px !important; }
body.st-v4 .st-ticket { min-height: 0; border-radius: 12px; }
body.st-v4 .st-ticket__stub { flex: 0 0 56px; font-size: 22px; background: #E6F6FF; color: var(--tk); }
body.st-v4 .st-ticket--voucher .st-ticket__stub, body.st-v4 .st-ticket--flash .st-ticket__stub { background: var(--st-red-soft); }
body.st-v4 .st-ticket__stub::after { border-right-color: rgba(56, 187, 255, .35); }
body.st-v4 .st-ticket--voucher .st-ticket__stub::after, body.st-v4 .st-ticket--flash .st-ticket__stub::after { border-right-color: rgba(215, 25, 32, .35); }
body.st-v4 .st-ticket__body { padding: 10px 14px; gap: 1px; }
body.st-v4 .st-ticket__title { font-size: 15px !important; }
body.st-v4 .st-ticket__sub { font-size: 12.5px; }
body.st-v4 .st-ticket__more, body.st-v4 .st-ticket__meta { font-size: 12.5px; }

/* ---------- 7. Tiêu đề khối: chữ có chân màu xanh chủ đạo · gạch đôi (nhãn "Chương 0N" đã bỏ 02/11/2026) ---------- */
.st-v4 .title_module_main { flex-wrap: wrap; align-items: flex-end !important; border-bottom: 4px double var(--st-petrol); padding-bottom: 10px !important; margin-bottom: 24px; background: none; }
.st-v4 .heading-bar__title, .st-v4 .heading-bar__title a, .st-v4 a.heading-bar__title {
    color: var(--st-petrol) !important; font-weight: 600; font-size: 30px; line-height: 1.25; letter-spacing: 0;
    text-transform: lowercase; border: 0; background: none; padding: 0; text-decoration: none;
}
/* Tiêu đề trong dữ liệu viết HOA → hiển thị dạng câu ("Sách bán chạy") */
.st-v4 .heading-bar__title::first-letter, .st-v4 .heading-bar__title a::first-letter { text-transform: uppercase; }
.st-v4 .heading-bar__title::before, .st-v4 .heading-bar__title::after { display: none !important; }
.st-v4 .heading-bar__title i { color: var(--st-red); margin-right: 6px; font-size: .8em; }
/* "Xem tất cả" bên phải tiêu đề */
.st-v4 .title_module_main > a:not(.heading-bar__title), .st-v4 .title_module_main .btn-main, .st-v4 .stv2-rel__all {
    font-size: 14px; font-weight: 600; color: var(--st-petrol); background: none; border: 0; text-transform: none; padding: 0;
}
.st-v4 .title_module_main > a:not(.heading-bar__title)::before { display: none !important; }
.st-v4 .title_module_main > a:not(.heading-bar__title)::after, .st-v4 .stv2-rel__all::after {
    content: " →" !important; position: static !important; display: inline !important; width: auto !important; height: auto !important;
    background: none !important; border: 0 !important; transform: none !important;
}
.st-v4 .title_module_main > a:not(.heading-bar__title) { text-decoration: none !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0; }
.st-v4 .title_module_main > a:not(.heading-bar__title):hover { color: var(--st-red); }
/* "Sách mới phát hành" (home.php v3 viết cứng màu #1c4566 inline) → màu xanh chủ đạo */
body.st-v4 .ega-home .title_module_main a.link-watch-all { color: var(--st-petrol) !important; }
body.st-v4 .ega-home .title_module_main a.link-watch-all:hover { color: var(--st-red) !important; }

/* ---------- 8. Thẻ sách: sách đổ bóng như thật · dải đánh dấu đỏ · tên chữ có chân ---------- */
.st-v4 .item_product_main { background: transparent; border: 0; box-shadow: none; padding: 0; }
.st-v4 .item_product_main .product-thumbnail { background: transparent; overflow: visible; }
.st-v4 .item_product_main .image_thumb { background: transparent; overflow: visible; box-shadow: none !important; }
.st-v4 .item_product_main .image_thumb img {
    object-fit: contain; filter: var(--st-book-shadow); border-radius: 2px;
    transition: filter .2s ease;
}
/* Rê chuột: ảnh đứng yên (không đổi transform – v3 dùng transform để căn giữa ảnh), chỉ đậm bóng */
body.st-v4 .ega .item_product_main .product-thumbnail:hover .image_thumb { transform: none !important; } /* v3: scale(.95) */
.st-v4 .item_product_main:hover .image_thumb img { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .06)) drop-shadow(0 16px 16px rgba(18, 50, 71, .34)); }
/* Dải đánh dấu giảm giá (thay nhãn chữ nhật): treo ở mép trên, đuôi khuyết chữ V như ruy băng logo */
body.st-v4 .ega .item_product_main .product-thumbnail > .label_product,
.st-v4 .product-thumbnail > .label_product {
    display: flex !important; position: absolute; top: -4px; right: 12px; left: auto; z-index: 3; width: 40px; height: 54px; padding: 12px 0 0;
    background: var(--st-red); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    display: flex; justify-content: center; box-shadow: none;
}
body.st-v4 .ega .item_product_main .product-thumbnail > .label_product .label_wrapper,
.st-v4 .product-thumbnail > .label_product .label_wrapper { background: none; color: #fff; font-size: 12px; font-weight: 700; padding: 0; line-height: 1; }
.st-v4 .price-box .label_product { display: none !important; }
.st-v4 .ega-flash-tag { background: var(--st-night); color: #fff; border-radius: 999px; font-weight: 600; top: 8px !important; bottom: auto !important; left: 8px !important; right: auto !important; z-index: 3; }
.st-v4 .ega-flash-tag i { color: #FFD166; }
.st-v4 .product-info { padding: 14px 2px 0; background: transparent; }
.st-v4 .product-name a, .st-v4 .product-name .link { color: var(--st-ink); font-weight: 600; font-size: 15px; line-height: 1.4; }
.st-v4 .item_product_main:hover .product-name a { color: var(--st-petrol); }
.st-v4 .price-box .price { color: var(--st-red); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.st-v4 .price-box .compare-price { color: var(--st-lead); font-size: 13px; }
.st-v4 .price-contact { color: var(--st-petrol); font-weight: 600; }
.st-v4 .ega-card-rating { color: #C9932E; }
.st-v4 .estore-sold-chip { background: #ECE8E0; color: #4A505A; border-radius: 999px; font-weight: 600; }
.st-v4 .ega-flash-time { color: var(--st-red-dark); }
/* Thanh thao tác khi rê chuột: nút tròn xanh dầu */
body.st-v4 .item_product_main .action-bar {
    background: #fff !important; border: 1px solid var(--st-rule); border-radius: 999px; overflow: hidden;
    box-shadow: 0 10px 22px -12px rgba(18, 50, 71, .45);
}
body.st-v4 .item_product_main .action-bar .action-child {
    background: transparent !important; color: var(--st-petrol) !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
}
body.st-v4 .item_product_main .action-bar .action-child + .action-child { border-left: 1px solid var(--st-rule) !important; }
body.st-v4 .item_product_main .action-bar .action-child:hover { background: var(--st-paper-2) !important; color: var(--st-red) !important; }
body.st-v4 .item_product_main .action-bar .action-child i { color: inherit !important; }

/* ---------- 9. Flash sale: dải nền giấy cũ tràn ngang ---------- */
.st-v4 .estore-flash-home .section_flashsale {
    --background-color: #F1EBDF !important; --heading-color: #D71920 !important; --countdown-background: var(--st-night) !important;
    background: var(--st-paper-2) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-top: 1px solid var(--st-rule) !important; border-bottom: 1px solid var(--st-rule) !important; padding-top: 28px; padding-bottom: 28px;
}
/* Tiêu đề có icon đứng trước chữ ("⚡ FLASH SALE"): chữ bọc <span> inline-block để ::first-letter áp được */
.st-v4 .heading-bar__title > span { display: inline-block; }
.st-v4 .heading-bar__title > span::first-letter { text-transform: uppercase; }
.st-v4 .estore-flash-home .heading-bar__title { color: var(--st-red) !important; }
.st-v4 .flashsale .countdown, .st-v4 .estore-flash-home__time b, .st-v4 .estore-flash-home__time span { border-radius: 8px; }

/* ---------- 10. Các khối trang chủ khác ---------- */
.st-v4 .ega-home > .section { margin-bottom: 64px; }
.st-v4 .section_bento_grid img, .st-v4 .ega-banner-block__banner, .st-v4 .ega-banner-block__banner img,
.st-v4 .section_lookbook img { border-radius: 14px; }
.st-v4 .section_lookbook { background: transparent; }
/* Tin tức – sự kiện: bài như mục báo */
.st-v4 .blogwp { background: #fff; border: 1px solid var(--st-rule); border-radius: 14px; overflow: hidden; }
.st-v4 .blogwp h3 a { color: var(--st-night); font-weight: 600; font-size: 17px; line-height: 1.4; }
.st-v4 .blogwp:hover h3 a { color: var(--st-petrol); }
/* v4 thêm khung cho thẻ tin → chữ cần lề trong (v3: padding 15px 0) */
body.st-v4 .blogwp .content_blog { padding: 16px 20px 18px !important; }
body.st-v4 .blogwp .short-summary { color: var(--st-lead); font-size: 14px; line-height: 1.55; margin-bottom: 10px; }
body.st-v4 .blogwp .button_custome_35 { color: var(--st-petrol) !important; font-weight: 600; font-size: 14px; }
body.st-v4 .blogwp .button_custome_35::after { content: " →"; }
body.st-v4 .blogwp .button_custome_35:hover { color: var(--st-red) !important; }
.st-v4 .ega-event-date { background: var(--st-petrol); color: #fff; border-radius: 10px; }
.st-v4 .ega-news-tag { color: var(--st-red); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; background: none; }
/* Độc giả nói gì: thẻ trích dẫn trên nền giấy, ngoặc kép đỏ */
.st-v4 .ega-rv { background: var(--st-paper-2); border: 0; border-radius: 14px; position: relative; }
.st-v4 .ega-rv::before { content: "“"; position: absolute; top: 4px; right: 16px; font: 64px/1 var(--st-serif); color: var(--st-red); opacity: .9; }
.st-v4 .ega-rv__quote, .st-v4 .ega-rv__text { font-style: italic; color: var(--st-night); }
.st-v4 .ega-rv__stars, .st-v4 .ega-rv__score { color: #C9932E; }
.st-v4 .ega-rv__avatar--text { background: var(--st-petrol); color: #fff; }
/* Dải chính sách trên footer */
.st-v4 .section_policies, .st-v4 .ega-policies { background: var(--st-paper-2); border-top: 1px solid var(--st-rule); }
.st-v4 .policies-item { background: transparent; }
.st-v4 .policies-image { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--st-rule); display: flex; align-items: center; justify-content: center; color: var(--st-petrol); }
.st-v4 .policies-image i { color: var(--st-petrol); font-size: 24px; }
.st-v4 .policies-title { color: var(--st-night) !important; font-size: 15px; }
.st-v4 .policies-desc { color: var(--st-lead) !important; }

/* Nút btn-main / btn-style1 dạng nút (Xem chi tiết, Chọn sách để đánh giá…): chữ trắng; bỏ vạch ::before 5px của theme EGA
   (nằm dưới nút, thành "vệt" đậm). Link "Xem tất cả" trên tiêu đề khối đã được mục 7 đổi thành link chữ. */
body.st-v4 .ega .btn-main.btn-style1, body.st-v4 .ega .btn-main.btn-style1:visited { color: #fff !important; border-radius: 999px; padding: 10px 26px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.st-v4 .ega .btn-main.btn-style1::before { display: none !important; }
body.st-v4 .ega .btn-main.btn-style1:hover { color: #fff !important; background: var(--st-red) !important; border-color: var(--st-red) !important; }
body.st-v4 .ega .title_module_main > a.btn-main.btn-style1 { color: var(--st-petrol) !important; padding: 0 !important; background: none !important; border-radius: 0; }
body.st-v4 .ega .title_module_main > a.btn-main.btn-style1:hover { color: var(--st-red) !important; background: none !important; }
/* Những bộ sách nổi bật: khung chữ không nền / viền / bóng riêng – đồng nhất với các khối khác (18/10/2026, trước là thẻ trắng có viền) */
body.st-v4 .ega .lookbook-desc-content-wrap { background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; }
body.st-v4 .ega .lookbook-desc-content { padding: 28px 30px; }
body.st-v4 .ega .lookbook-desc-content ul { padding-left: 18px; margin-bottom: 18px; }
body.st-v4 .ega .lookbook-desc-content li { margin: 4px 0; }
body.st-v4 .ega .lookbook-desc-content li a { color: var(--st-ink); }
body.st-v4 .ega .lookbook-desc-content li a:hover { color: var(--st-red); }
body.st-v4 .ega .lookbook-desc-content li::marker { color: var(--st-red); }
/* 2 khối thẳng hàng (18/10/2026): màn ≥1200px hai cột cao bằng nhau – ảnh lấp khung (cover, bo góc như thẻ),
   thẻ chữ kéo bằng chiều cao hàng, nội dung căn giữa theo chiều dọc; thẻ gọn lại để ảnh ít bị cắt */
@media (min-width: 1200px) {
  body.st-v4 .ega .section_lookbook .lookbooks-container { align-items: stretch; }
  body.st-v4 .ega .section_lookbook .lookbooks-column, body.st-v4 .ega .section_lookbook .lookbook-desc-body { display: flex; align-self: stretch !important; align-items: stretch !important; }
  body.st-v4 .ega .section_lookbook .lookbooks-banner, body.st-v4 .ega .section_lookbook .lookbooks-banner__photo,
  body.st-v4 .ega .section_lookbook .lookbook-image-wrap { display: flex; flex: 1 1 auto; height: 100%; min-height: 0; margin: 0; padding: 0; }
  body.st-v4 .ega .section_lookbook .lookbook-image-wrap img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; object-position: center; border-radius: 18px; }
  body.st-v4 .ega .lookbook-desc-content-wrap { flex: 1 1 auto; display: flex; align-items: center; height: auto; margin: 0 !important; }
  body.st-v4 .ega .lookbook-desc-content { width: 100%; padding: 24px 30px; }
  body.st-v4 .ega .lookbook-desc-content .heading-bar__title { margin: 0 0 10px !important; }
  body.st-v4 .ega .lookbook-desc-content ul { margin-bottom: 16px; }
  body.st-v4 .ega .lookbook-desc-content li { margin: 2px 0; }
}
@media (max-width: 1199.98px) { body.st-v4 .ega .section_lookbook .lookbook-desc-body { margin-top: 14px; } }

/* Banner 1 ảnh giữa Flash sale và Sách mới (co_home_item banner_mid): bo góc như các banner khác, rê chuột sáng nhẹ */
body.st-v4 .ega .ega-banner-mid__link { border-radius: 18px; box-shadow: 0 18px 36px -28px rgba(18, 50, 71, .55); }
body.st-v4 .ega a.ega-banner-mid__link .ega-banner-mid__img { transition: transform .4s ease, filter .3s ease; }
body.st-v4 .ega a.ega-banner-mid__link:hover .ega-banner-mid__img { transform: scale(1.01); filter: brightness(1.03); }
@media (max-width: 575px) { body.st-v4 .ega .ega-banner-mid__link { border-radius: 12px; } }
/* margin 100px của .section_flashsale (theme EGA) tràn ra ngoài dải flash sale → bỏ, khoảng cách do khối ngoài quyết định */
body.st-v4 .estore-flash-home .section_flashsale { margin-bottom: 0 !important; }
.st-v4 .ega-home > .section:has(+ .ega-banner-mid) { margin-bottom: 44px !important; }
.st-v4 .ega-home > .ega-banner-mid { margin-bottom: 52px !important; }
@media (max-width: 575px) { .st-v4 .ega-home > .section:has(+ .ega-banner-mid) { margin-bottom: 28px !important; } .st-v4 .ega-home > .ega-banner-mid { margin-bottom: 36px !important; } }

/* ---------- 11. Footer: nền mực đêm, tiêu đề cột nhãn hồng đỏ ---------- */
.st-v4 .ega-footer-scope footer, .st-v4 .mid-footer { background: var(--st-petrol); color: #fff; }
.st-v4 .mid-footer a, .st-v4 .mid-footer .link { color: #fff; }
.st-v4 .mid-footer a:hover { color: var(--st-night); }
.st-v4 .mid-footer :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .fot_shop_name) { color: #fff !important; }
body.st-v4 .mid-footer .fot_shop_name:not(#st):not(#st) { font-family: var(--st-serif) !important; font-size: 20px; }
.st-v4 .mid-footer .footer-title, .st-v4 .mid-footer h4 { color: #fff !important; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--st-sans) !important; }
.st-v4 .footer_logo img { background: #fff; border-radius: 10px; padding: 6px 10px; }
.st-v4 .mid-footer i { color: #fff; }
.st-v4 .ega-social a, .st-v4 .ega-social .item_links { background: rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; }
.st-v4 .ega-social a:hover { background: var(--st-red); }
.st-v4 .ega-apps a { border-color: rgba(255, 255, 255, .6); color: #fff; border-radius: 10px; }
/* Đăng ký nhận tin: dải xanh dầu */
.st-v4 .estore-newsletter-form { background: var(--st-night); color: #fff; border-radius: 16px; border: 0; }
.st-v4 .estore-newsletter-form__text, .st-v4 .estore-newsletter-form__text * { color: #fff !important; }
.st-v4 .estore-newsletter-form__field input { border-radius: 999px 0 0 999px; border: 0; }
.st-v4 .estore-newsletter-form__field button { background: var(--st-red); border-radius: 0 999px 999px 0; color: #fff; border: 0; }

/* ---------- 12. Trang trong ---------- */
/* Đường dẫn */
.st-v4 :is(.stv2-cat-crumb, .stv2-pd-breadcrumb, .stv2-crumb, .breadcrumb_detail) { color: var(--st-lead); font-size: 13px; }
.st-v4 :is(.stv2-cat-crumb__current, .stv2-pd-breadcrumb__current) { color: var(--st-ink); }
/* Danh mục */
.st-v4 .stv2-cat-head { border-bottom: 4px double var(--st-petrol); padding-bottom: 10px; margin-bottom: 18px; }
body.st-v4 :is(.stv2-cat-head__title, .stv2-combo-head__title, .ega-page__title) { color: var(--st-petrol) !important; font-weight: 600 !important; text-transform: lowercase !important; letter-spacing: 0 !important; display: inline-block; }
body.st-v4 :is(.stv2-cat-head__title, .stv2-combo-head__title, .ega-page__title)::first-letter { text-transform: uppercase !important; }
.st-v4 .stv2-cat-filter { background: #fff; border: 1px solid var(--st-rule); border-radius: 14px; }
.st-v4 .stv2-cat-fgroup__title { color: var(--st-red); letter-spacing: .12em; font-size: 12px; }
.st-v4 .stv2-cat-opt__box { border-color: #B9AF9C; }
.st-v4 .stv2-cat-toolbar { background: #fff; border: 1px solid var(--st-rule); border-radius: 12px; }
.st-v4 .stv2-cat-pager__link { border-radius: 999px; border-color: var(--st-rule); color: var(--st-petrol); }
.st-v4 .stv2-cat-pager__item.is-active .stv2-cat-pager__link,
.st-v4 .stv2-cat-pager__item.active .stv2-cat-pager__link,
.st-v4 .stv2-cat-pager__link[aria-current] { background: var(--st-petrol); color: #fff; border-color: var(--st-petrol); }
/* Chi tiết sách */
.st-v4 .stv2-pd-title { color: var(--st-night); font-weight: 700; line-height: 1.3; }
.st-v4 .stv2-pd-cover, .st-v4 .stv2-pd-gallery { background: transparent; }
.st-v4 .stv2-pd-cover__img { filter: var(--st-book-shadow); }
body.st-v4 .stv2-pd .stv2-pd-cover__sale { background: var(--st-red) !important; border-radius: 0 !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); padding: 10px 9px 18px !important; top: 0 !important; font-weight: 700; }
.st-v4 .stv2-pd-price { background: var(--st-paper-2); border-radius: 14px; }
.st-v4 .stv2-pd-price__sale { color: var(--st-red); font-weight: 700; }
.st-v4 .stv2-pd-price__badge { background: var(--st-red-soft); color: var(--st-red-dark); }
.st-v4 .stv2-pd-tabs__btn { font-weight: 600; color: var(--st-lead); border-bottom: 3px solid transparent; }
.st-v4 .stv2-pd-tabs__btn.is-active, .st-v4 .stv2-pd-tabs__btn.active, .st-v4 .stv2-pd-tabs__btn[aria-selected="true"] { color: var(--st-petrol); border-bottom-color: var(--st-red); }
.st-v4 .stv2-pd-thumb { border-radius: 4px; }
.st-v4 .stv2-pd-type { border-radius: 10px; }
.st-v4 .stv2-rel__head { border-bottom: 4px double var(--st-petrol); padding-bottom: 8px; }
.st-v4 .stv2-rel__title { color: var(--st-petrol) !important; font-weight: 600; text-transform: lowercase; }
.st-v4 .stv2-rel__title::first-letter { text-transform: uppercase; }
.st-v4 .estore-bundle { border-radius: 16px; border-color: var(--st-rule); }
.st-v4 .estore-bundle__title { color: var(--st-petrol); }
/* Tin tức */
.st-v4 .stv2-news-card { background: #fff; border: 1px solid var(--st-rule); border-radius: 14px; overflow: hidden; }
.st-v4 .stv2-news-card__title a, .st-v4 .stv2-news-card__title { color: var(--st-night); font-weight: 600; }
body.st-v4 .stv2-news-card__body { padding: 14px 18px 18px !important; }
.st-v4 .stv2-news-card__date { color: var(--st-red); font-weight: 600; letter-spacing: .06em; }
.st-v4 .stv2-news-tab { border-radius: 999px; }
.st-v4 .stv2-news-tab.is-active, .st-v4 .stv2-news-tab.active { background: var(--st-petrol); color: #fff; border-color: var(--st-petrol); }
/* Trang khung .ega-page (giỏ, thanh toán, tài khoản, tủ sách, về NXB) */
.st-v4 .ega-page__title, .st-v4 .ega-checkout__title { color: var(--st-petrol); font-weight: 600; }
/* Tiêu đề bước thanh toán có số thứ tự đứng trước → giữ chữ gốc (đã viết đúng dạng câu) */
body.st-v4 .ega-checkout__title { text-transform: none !important; }

/* Tiêu đề khối phụ trang chi tiết (Mua cùng sách này, Có thể bạn quan tâm, Sách cùng chủ đề / tác giả, Sách mua nhiều nhất):
   cùng kiểu tiêu đề chương, dữ liệu viết HOA → dạng câu */
body.st-v4 :is(.estore-bundle__title, .stv2-rel__title, .topview-content-heading) {
    text-transform: lowercase !important; color: var(--st-petrol) !important; font-weight: 600 !important; letter-spacing: 0 !important;
}
body.st-v4 :is(.estore-bundle__title, .stv2-rel__title, .topview-content-heading)::first-letter { text-transform: uppercase !important; }
body.st-v4 :is(.estore-bundle__title, .stv2-rel__title) { font-size: 26px !important; }
body.st-v4 .topview-content-heading:not(#st):not(#st) { font-family: var(--st-serif) !important; font-size: 18px !important; border-bottom: 4px double var(--st-petrol); padding-bottom: 8px; }
body.st-v4 .estore-bundle__head { border-bottom: 4px double var(--st-petrol); padding-bottom: 8px; margin-bottom: 16px; }

/* ---------- 13. Nút & form: Mua ngay = đỏ ST · nút chính = xanh dầu · nút viền = viền xanh dầu ---------- */
body.st-v4 .stv2-pd .stv2-pd-btn, .st-v4 .stv2-pd-btn { border-radius: 999px !important; box-shadow: none !important; min-height: 46px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.st-v4 .stv2-pd .stv2-pd-btn--primary, .st-v4 .stv2-pd-btn--primary { background: var(--st-red) !important; border-color: var(--st-red) !important; color: #fff !important; }
body.st-v4 .stv2-pd .stv2-pd-btn--primary:hover { background: var(--st-red-dark) !important; border-color: var(--st-red-dark) !important; }
body.st-v4 .stv2-pd .stv2-pd-btn--outline, .st-v4 .stv2-pd-btn--outline { background: #fff !important; border: 1.5px solid var(--st-petrol) !important; color: var(--st-petrol) !important; }
body.st-v4 .stv2-pd .stv2-pd-btn--outline:hover { background: var(--st-petrol) !important; color: #fff !important; }
.st-v4 :is(.btn-main, .btn-style1, .ega-cart-sum__submit, .estore-bundle__btn, .estore-popup__btn, .stv2-cat-price__btn) {
    border-radius: 999px; background: var(--st-petrol); border-color: var(--st-petrol); color: #fff; text-transform: none; font-weight: 600;
}
.st-v4 :is(.btn-main, .btn-style1, .ega-cart-sum__submit, .estore-bundle__btn, .estore-popup__btn, .stv2-cat-price__btn):hover { background: var(--st-red); border-color: var(--st-red); color: #fff; }
.st-v4 .ega-cart-sum__submit, .st-v4 .estore-popup__btn { background: var(--st-red); border-color: var(--st-red); }
.st-v4 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], select, textarea).form-control { border-color: #CFC6B5; border-radius: 10px; }
.st-v4 .form-control:focus { border-color: var(--st-petrol); box-shadow: 0 0 0 3px rgba(56, 187, 255, .15); }
.st-v4 .estore-popup__box { border-radius: 18px; overflow: hidden; }
.st-v4 .estore-popup__title { color: var(--st-night); }

/* Chi tiết sách: nút Yêu thích chỉ còn icon (tên nút vẫn có trong aria-label/title của WishlistService::heartButton) */
body.st-v4 .stv2-pd-actions .shop-wish--button {
    flex: 0 0 46px !important; width: 46px; height: 46px; min-height: 46px; padding: 0 !important; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--st-rule) !important; background: #fff !important;
    color: var(--st-red) !important;
}
body.st-v4 .stv2-pd-actions .shop-wish--button .shop-wish__text { display: none !important; }
body.st-v4 .stv2-pd-actions .shop-wish--button i { font-size: 20px; margin: 0 !important; }
body.st-v4 .stv2-pd-actions .shop-wish--button:hover, body.st-v4 .stv2-pd-actions .shop-wish--button.is-active { border-color: var(--st-red) !important; background: var(--st-red-soft) !important; }
/* Hai nút chính: chia đều, chữ không xuống dòng / không bị cắt */
body.st-v4 .stv2-pd-actions { gap: 10px; align-items: center; }
body.st-v4 .stv2-pd-actions .stv2-pd-btn { flex: 1 1 0 !important; min-width: 0; white-space: nowrap; padding: 0 14px !important; gap: 6px; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 991px) {
    .st-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-v4 .heading-bar__title, .st-v4 a.heading-bar__title { font-size: 24px; }
}
@media (max-width: 575px) {
    body.st-v4 .stv2-pd-actions { gap: 8px; }
    body.st-v4 .stv2-pd-actions .stv2-pd-btn { padding: 0 10px !important; font-size: 14px !important; }
    .st-topbar__brand { display: none; }
    .st-topbar__inner { justify-content: center; }
    .st-topbar__links a:last-child { display: none; }
    .st-offers { margin-top: 14px; margin-bottom: 36px; }
    /* Điện thoại: dải vé vuốt ngang (kiểu sàn TMĐT), mỗi vé ~80% chiều rộng, ló vé kế tiếp để gợi ý vuốt */
    .st-offers__grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; gap: 10px;
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
    .st-offers__grid::-webkit-scrollbar { display: none; }
    .st-ticket { scroll-snap-align: start; }
    .st-ticket { min-height: 84px; }
    .st-ticket__stub { flex-basis: 52px; font-size: 22px; }
    .st-ticket__body { padding: 10px; }
    .st-v4 .st-ticket__title { font-size: 14px; }
    .st-ticket__sub { font-size: 12px; }
    .st-ticket__row { flex-wrap: wrap; gap: 6px; }
    body.st-v4 .ega .item_product_main .product-thumbnail > .label_product, .st-v4 .product-thumbnail > .label_product { width: 34px; height: 46px; padding-top: 10px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .st-v4 .item_product_main .image_thumb img, .st-ticket { transition: none; }
}

/* ---------- 15. Vé ưu đãi trên điện thoại – bản nhỏ gọn (19/10/2026: "to quá, gây phản cảm bán hàng") ----------
   Rule mục 6 dùng body.st-v4 + !important nên rule mobile cũ ở mục 14 (.st-ticket…) không có tác dụng → khai lại ở đây
   cùng độ ưu tiên. Mỗi vé ~50px cao, 1 dòng tiêu đề + 1 dòng phụ, ~2 vé/màn hình; bỏ "Xem ngay" (cả vé là link). */
@media (max-width: 767px) {
    body.st-v4 .st-offers { margin: 10px 0 0 !important; }
    body.st-v4 .st-offers + .section { margin-top: 18px !important; }
    body.st-v4 .st-offers__grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 58%;
        gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; scrollbar-width: none; }
    body.st-v4 .st-offers__grid::-webkit-scrollbar { display: none; }
    body.st-v4 .st-ticket { min-height: 0; border-radius: 10px; scroll-snap-align: start; box-shadow: none; }
    body.st-v4 .st-ticket:hover { transform: none; box-shadow: none; }
    body.st-v4 .st-ticket__stub { flex: 0 0 34px; font-size: 16px;
        -webkit-mask: radial-gradient(circle 5px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                      radial-gradient(circle 5px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
                mask: radial-gradient(circle 5px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                      radial-gradient(circle 5px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
    body.st-v4 .st-ticket__stub::after { top: 8px; bottom: 8px; border-right-width: 1px; }
    body.st-v4 .st-ticket__body { padding: 7px 9px; gap: 0; }
    body.st-v4 .st-ticket__title { font-size: 13px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.st-v4 .st-ticket__sub, body.st-v4 .st-ticket__meta { font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Flash sale: dòng phụ = đồng hồ đếm ngược (bỏ dòng "Đến …"); vé thường: giữ dòng mô tả ngắn */
    body.st-v4 .st-ticket--flash .st-ticket__sub { display: none; }
    /* Voucher: tiêu đề + mã + nút sao chép (bỏ mô tả và HSD cho vừa 2 dòng) */
    body.st-v4 .st-ticket--voucher .st-ticket__sub, body.st-v4 .st-ticket--voucher .st-ticket__meta { display: none; }
    body.st-v4 .st-ticket__more { display: none; }
    body.st-v4 .st-ticket__row { margin-top: 3px; gap: 6px; flex-wrap: nowrap; }
    body.st-v4 .st-ticket .st-ticket__code { font-size: 11px !important; padding: 3px 6px !important; }
    body.st-v4 .st-ticket .st-ticket__btn { font-size: 11px !important; padding: 3px 9px !important; min-height: 22px !important; }
}
/* Điện thoại (≤ 430px): bỏ icon trong 2 nút chính để đủ chỗ cho chữ "Thêm vào giỏ" */
@media (max-width: 430px) {
    body.st-v4 .stv2-pd-actions .stv2-pd-btn i { display: none; }
}

/* =====================================================================================================================
   15. CỠ CHỮ TRÊN ĐIỆN THOẠI – CHỈNH TẠI ĐÂY (một chỗ cho toàn web bán hàng, màn hình ≤ 575px)
   Đổi giá trị các biến bên dưới → mọi trang dùng chung (trang chủ, danh mục, chi tiết sách, tin tức, giỏ hàng, hướng dẫn…).
   Máy tính dùng cỡ riêng ở các mục phía trên. Sau khi sửa: php yii cache/flush-all, xoá home/runtime/cache (URL CSS tự đổi ?v=).
   ===================================================================================================================== */
@media (max-width: 575px) {
    body.st-v4 {
        --st-m-section: 21px;   /* tiêu đề khối: Sách mới phát hành, Bán chạy, Sách cùng chủ đề, Mua cùng sách này… */
        --st-m-page: 21px;      /* tiêu đề trang: tên danh mục, Giỏ hàng, Tin tức, trang hướng dẫn… */
        --st-m-book: 15px;      /* tên sách trên thẻ sách */
        --st-m-price: 17px;     /* giá bán trên thẻ sách */
        --st-m-pd-title: 20px;  /* tên sách ở trang chi tiết */
        --st-m-pd-price: 26px;  /* giá ở trang chi tiết */
        --st-m-text: 15px;      /* nội dung: giới thiệu sách, bài viết, trang hướng dẫn, link chân trang */
        --st-m-small: 14px;     /* chữ phụ: tóm tắt tin, mục bộ lọc, tab trang chi tiết */
        --st-m-tiny: 13px;      /* chữ rất nhỏ: giá gạch (giá bìa) */
        --st-m-button: 14px;    /* nút: Thêm vào giỏ, Mua ngay, Xem chi tiết… */
    }
    body.st-v4 :is(.heading-bar__title, a.heading-bar__title, .heading-bar__title a, .stv2-rel__title, .estore-bundle__title,
        .st-guide .st-g-part > h2) { font-size: var(--st-m-section) !important; }
    body.st-v4 :is(.stv2-cat-head__title, .stv2-combo-head__title, .ega-page__title, .st-guide h1.st-g-title) { font-size: var(--st-m-page) !important; }
    body.st-v4 :is(.product-name a, .product-name .link) { font-size: var(--st-m-book) !important; }
    body.st-v4 .price-box .price { font-size: var(--st-m-price) !important; }
    body.st-v4 .price-box .compare-price { font-size: var(--st-m-tiny) !important; }
    body.st-v4 .stv2-pd-title { font-size: var(--st-m-pd-title) !important; }
    body.st-v4 .stv2-pd-price__sale { font-size: var(--st-m-pd-price) !important; }
    body.st-v4 :is(.stv2-pd-desc, .stv2-pd-desc p, .stv2-news-card__summary, .st-guide, .mid-footer .link, .mid-footer a) { font-size: var(--st-m-text) !important; }
    body.st-v4 :is(.short-summary, .stv2-cat-opt__text, .stv2-pd-tabs__btn) { font-size: var(--st-m-small) !important; }
    body.st-v4 :is(.stv2-pd-btn, .ega .btn-main.btn-style1, .ega-cart-sum__submit) { font-size: var(--st-m-button) !important; }
}

/* =====================================================================================================================
   16. TRANG CHỦ v4 – BỐ CỤC MỚI TỪNG KHỐI (02/11/2026, views/estore/default/home.php của v4, phạm vi .st-home)
   Giữ phong cách v4 (nền giấy, tiêu đề mục 7, thẻ sách mục 8, đỏ ST cho giá/điểm nhấn), chỉ đổi bố cục
   (Flash sale, Sách mới giữ nguyên v3): Top 10 bán chạy (bảng xếp hạng 2 cột) ·
   Sách nổi bật (banner dọc + lưới 4) · Bộ sách (lưới thẻ ảnh) · Tin tức (1 lớn + danh sách) · Độc giả (hàng cuộn) · Chính sách.
   ===================================================================================================================== */
.st-v4 .st-home > .st-sec { margin-bottom: 56px !important; }
.st-v4 .st-home > .st-sec.st-bento { margin-bottom: 44px !important; }
/* Tiêu đề khối trang chủ = cỡ chữ tiêu đề Flash sale (chữ trong <span> 0.7em của theme EGA: 30px → 21px; ≤991px 24px → 17px;
   ≤575px 21px → 15px) – trước là 30px, to quá (02/11/2026) */
body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title),
body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title) a { font-size: 21px !important; }
@media (max-width: 991px) {
    body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title),
    body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title) a { font-size: 17px !important; }
}
@media (max-width: 575px) {
    body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title),
    body.st-v4 .st-home .title_module_main .heading-bar__title:not(.flashsale__title) a { font-size: 15px !important; }
}
.st-cards { display: grid; gap: 22px 18px; }
.st-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-home .st-cards__item { min-width: 0; }

.st-rank__price s { color: var(--st-lead); font-size: 14px; }

/* Banner bento / bento_2: 1 ảnh tràn khung, giữ tỉ lệ ảnh gốc (02/11/2026, trước 2 ảnh ngang) */
.st-bento__grid { display: block; }
.st-bento__item { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 36px -28px rgba(18, 50, 71, .55); }
.st-bento__item img { display: block; width: 100%; height: auto; transition: transform .4s ease, filter .3s ease; }
.st-bento__item:hover img { transform: scale(1.01); filter: brightness(1.03); }

/* Top 10 bán chạy: bảng xếp hạng 2 cột (1–5 trái, 6–10 phải) – thẻ trắng viền xanh nhạt, số tròn, top 3 nền cam (giữ theo yêu cầu 02/11/2026) */
.st-rank, .st-sets { --st-orange: #fc8c2c; --st-sky-soft: #EAF7FF; }
.st-rank__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 12px 24px; }
.st-rank__item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; border: 1px solid #E3EEF5; border-radius: 12px; transition: border-color .2s; }
.st-rank__item:hover { border-color: var(--st-petrol); }
.st-rank__no { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--st-sky-soft); color: var(--st-petrol-dark); font-size: 18px; font-weight: 800; }
.st-rank__item.is-top .st-rank__no { background: var(--st-orange); color: #fff; }
.st-rank__cover { flex: 0 0 64px; }
.st-rank__cover img { width: 64px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(11, 79, 122, .2)); }
.st-rank__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-v4 .st-rank__name { color: var(--st-ink); font-weight: 600; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-v4 .st-rank__name:hover { color: var(--st-petrol-dark); }
.st-rank__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.st-rank__price b { color: var(--st-red); font-size: 16px; }
.st-rank__off { color: var(--st-orange); font-weight: 700; font-size: 13px; }
.st-rank__sold { font-size: 12.5px; color: var(--st-lead); }

/* Sách nổi bật: banner dọc trái + lưới 4 cột */
.st-feat__grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; }
.st-feat__grid.is-full { grid-template-columns: minmax(0, 1fr); }
.st-feat__banner { display: block; border-radius: 14px; overflow: hidden; }
.st-feat__banner img { width: 100%; height: 100%; object-fit: cover; }

/* Bộ sách nổi bật: lưới thẻ ảnh 3 cột – thẻ trắng viền xanh nhạt, "Xem bộ sách" cam (giữ theo yêu cầu 02/11/2026) */
.st-sets__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-v4 .st-sets__item { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3EEF5; border-radius: 14px; overflow: hidden; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.st-v4 .st-sets__item:hover { border-color: var(--st-petrol); box-shadow: 0 12px 24px -16px rgba(56, 187, 255, .8); }
.st-sets__img { display: block; aspect-ratio: 3 / 2; background: var(--st-sky-soft); overflow: hidden; }
.st-sets__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.st-sets__item:hover .st-sets__img img { transform: scale(1.03); }
.st-sets__name { padding: 12px 14px 4px; color: var(--st-night); font-weight: 700; font-size: 16px; line-height: 1.35; }
.st-sets__more { padding: 0 14px 14px; color: var(--st-orange); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; }

/* Tin tức – sự kiện: 1 bài lớn (ảnh phủ, chữ trên nền tối) + danh sách 4 bài */
.st-news__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.st-v4 .st-news__big { position: relative; display: block; min-height: 380px; border-radius: 14px; overflow: hidden; background: var(--st-night); text-decoration: none; }
.st-news__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.st-news__big:hover img { transform: scale(1.03); }
.st-news__big-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 22px; display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(to top, rgba(18, 35, 45, .9), rgba(18, 35, 45, 0)); color: #fff; }
body.st-v4 .st-news__big-title:not(#st):not(#st), body.st-v4 .st-news__row-title:not(#st):not(#st) { font-family: var(--st-serif) !important; }
.st-news__big-title { font-size: 22px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-news__big .st-news__date { color: rgba(255, 255, 255, .85); }
.st-news__tag { color: var(--st-red); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.st-news__big .st-news__tag { color: #F2A7A9; }
.st-news__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-news__list li + li { border-top: 1px solid var(--st-rule); }
.st-v4 .st-news__row { display: flex; gap: 16px; padding: 14px 0; text-decoration: none; }
.st-news__list li:first-child .st-news__row { padding-top: 0; }
.st-news__thumb { flex: 0 0 130px; height: 86px; border-radius: 10px; overflow: hidden; background: var(--st-paper-2); display: flex; align-items: center; justify-content: center; color: var(--st-petrol); font-size: 28px; }
.st-news__thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-news__row-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-news__row-title { color: var(--st-night); font-weight: 600; font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-news__row:hover .st-news__row-title { color: var(--st-petrol); }
.st-news__date { font-size: 12.5px; color: var(--st-lead); display: inline-flex; align-items: center; gap: 4px; }

/* Độc giả nói gì: hàng thẻ trích dẫn trên nền giấy, cuộn ngang */
.st-reviews__list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.st-rv { position: relative; scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--st-paper-2); border-radius: 14px; }
.st-rv::before { content: "“"; position: absolute; top: 4px; right: 16px; font: 64px/1 var(--st-serif); color: var(--st-red); opacity: .9; }
.st-rv__stars { color: #C9932E; font-size: 16px; }
.st-rv__text { margin: 0; color: var(--st-night); font-style: italic; font-size: 14.5px; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.st-rv__who { display: flex; align-items: center; gap: 10px; }
.st-rv__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--st-petrol); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.st-rv__meta { display: flex; flex-direction: column; line-height: 1.3; }
.st-rv__meta small { color: var(--st-lead); }
.st-rv__meta small i { color: #2E8B57; }
.st-v4 .st-rv__book { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fff; border-radius: 10px; text-decoration: none; }
.st-rv__book img { width: 36px; height: 48px; object-fit: contain; }
.st-rv__book span { min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.st-rv__book small { color: var(--st-lead); }
.st-rv__book b { color: var(--st-night); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dải chính sách: nền giấy cũ, icon trong vòng tròn trắng (như mục 10) */
.st-v4 .st-home > .st-policies { margin-bottom: 0 !important; background: var(--st-paper-2); border-top: 1px solid var(--st-rule); padding: 26px 0; }
.st-policies__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.st-v4 .st-policies__item { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.st-policies__icon { flex: 0 0 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--st-rule); display: flex; align-items: center; justify-content: center; }
.st-policies__icon i { color: var(--st-petrol); font-size: 24px; }
.st-policies__body { display: flex; flex-direction: column; line-height: 1.35; }
body.st-v4 .st-policies__body b:not(#st):not(#st) { font-family: var(--st-serif) !important; }
.st-policies__body b { font-size: 15px; color: var(--st-night); }
.st-policies__body small { font-size: 13px; color: var(--st-lead); }

@media (max-width: 1199.98px) {
    .st-cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .st-reviews__list { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 991.98px) {
    .st-rank__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .st-feat__grid { grid-template-columns: minmax(0, 1fr); }
    .st-feat__banner { aspect-ratio: 5 / 2; }
    .st-sets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-news__grid { grid-template-columns: minmax(0, 1fr); }
    .st-news__big { min-height: 280px; }
    .st-policies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-reviews__list { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (max-width: 575px) {
    .st-v4 .st-home > .st-sec { margin-bottom: 36px !important; }
    .st-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-cards { gap: 16px 10px; }
    .st-bento__item { border-radius: 10px; }
    .st-sets__grid { grid-template-columns: minmax(0, 1fr); }
    .st-news__thumb { flex-basis: 100px; height: 70px; }
    .st-news__big-title { font-size: 18px; }
    .st-reviews__list { grid-auto-columns: 82%; }
    .st-policies__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =====================================================================================================================
   17. HEADER KIỂU BOOK365 (02/11/2026, layout v4 bật $this->params['stHeaderBook365'] → _header_v3.php thêm mục "Danh mục"
   trong ô tìm kiếm + chữ cạnh icon tài khoản/giỏ). Máy tính: 2 tầng – tầng trên nền gradient xanh như book365
   (#36d8ff → #02bbff): logo · ô tìm kiếm luôn hiện · tài khoản / giỏ hàng chữ trắng; tầng dưới nền trắng: menu ngang chữ có
   chân đậm màu đen, rê chuột đỏ. Điện thoại: giữ khung cũ, chỉ đổi nền xanh + icon trắng.
   ===================================================================================================================== */
/* Thanh trên cùng: nền sáng, chữ tối (header đã có dải xanh) */
.st-topbar { background: #F3FAFF; color: #34495e; border-bottom: 1px solid #DCEFFB; }
.st-v4 .st-topbar a { color: #34495e; }
.st-v4 .st-topbar a:hover { color: var(--st-red); }
.st-topbar strong { color: var(--st-red); }
.st-topbar i { color: #1a9de0; }

body.st-v4 .ega .ega-header { background: linear-gradient(0deg, #02bbff 0, #36d8ff 100%) !important; border-bottom: 0; }
body.st-v4 .ega .header-right__icons .header-icon,
body.st-v4 .ega .header-right__icons .header-icon i,
body.st-v4 .ega .header-right__icons #icon-account > a,
body.st-v4 .ega .header-right__icons #icon-account > a i,
body.st-v4 .ega .ega-header .st-hd-label { color: #fff !important; }
body.st-v4 .ega .ega-header .toggle-nav .bar { background: #fff !important; }
body.st-v4 .ega .ega-header .count_item { box-shadow: 0 0 0 2px #fff; }
.st-hd-label { display: none; }

@media (min-width: 992px) {
    body.st-v4 .ega .ega-header { background: linear-gradient(0deg, #02bbff 0, #36d8ff 100%) top / 100% 76px no-repeat, #fff !important;
        border-bottom: 1px solid #E6E6E6; box-shadow: 0 6px 16px -14px rgba(0, 0, 0, .35); }
    body.st-v4 .ega .ega-header .header-wrap { height: auto !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "logo search right" "nav nav nav"; column-gap: 36px; row-gap: 0; align-items: center; }
    body.st-v4 .ega .ega-header #logo { grid-area: logo; height: 76px; display: flex; align-items: center; }
    body.st-v4 .ega-header-scope #logo img { max-height: 50px; }
    /* Ô tìm kiếm luôn hiện, giữa tầng trên */
    body.st-v4 .ega .ega-header .ega-form-search,
    body.st-v4 .ega .ega-header .ega-form-search[hidden] { grid-area: search; display: block !important; position: static; width: 100%; max-width: 760px;
        justify-self: center; padding: 0; margin: 0; background: none; box-shadow: none; }
    body.st-v4 .ega .ega-header .ega-form-search .search__list,
    body.st-v4 .ega .ega-header .icon-action__search { display: none !important; }
    body.st-v4 .ega .ega-form-search .search-bar { display: flex; align-items: stretch; height: 42px; padding: 0; border: 1px solid #E0E0E0; border-radius: 8px; background: #fff; overflow: hidden; }
    body.st-v4 .ega .ega-form-search .st-search-cat { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-right: 1px solid #EDEDED;
        color: #333; font-size: 14px; white-space: nowrap; text-decoration: none; }
    body.st-v4 .ega .ega-form-search .st-search-cat:hover { color: var(--st-red); }
    body.st-v4 .ega .ega-form-search .st-search-cat i { font-size: 12px; color: #666; }
    body.st-v4 .ega .ega-form-search .input-group-field { height: 40px; padding: 0 14px; font-size: 14.5px; }
    body.st-v4 .ega .ega-form-search .btn-action .btn { height: 40px; min-width: 52px; border-radius: 0; background: transparent !important; color: #04396c !important; }
    body.st-v4 .ega .ega-form-search .btn-action .btn i { color: #04396c !important; font-size: 20px !important; }
    /* Tài khoản / giỏ hàng: icon + chữ trắng */
    body.st-v4 .ega .ega-header .header-right { grid-area: right; }
    body.st-v4 .ega .ega-header .header-right__icons { display: flex !important; align-items: center; gap: 26px; }
    body.st-v4 .ega .header-right__icons > #icon-account > a,
    body.st-v4 .ega .header-right__icons > .mini-cart > a.header-icon { justify-content: flex-start !important; width: auto !important; gap: 8px; position: relative; }
    .st-hd-label { display: inline-block; font-size: 13px; line-height: 1.25; font-weight: 500; text-align: left; white-space: nowrap; }
    .st-hd-label b { font-weight: 700; }
    body.st-v4 .ega .header-right__icons .mini-cart .ega-minicart__tip { display: none !important; }
    /* Tầng dưới: menu ngang nền trắng, chữ có chân đậm màu đen (book365: Merriweather) */
    body.st-v4 .ega .ega-header #stv2Nav { grid-area: nav; justify-self: stretch; height: 48px; display: flex !important; align-items: center; }
    body.st-v4 .ega .ega-header #stv2Nav .navigation-wrapper { height: 48px !important; }
    body.st-v4 .ega #stv2Nav .navigation { justify-content: flex-start; height: 48px; }
    body.st-v4 .ega .ega-header .menu-item__link,
    body.st-v4 .ega .ega-header .menu-item__link span { color: #000 !important; font-weight: 700; font-size: 15px; }
    body.st-v4 .ega .ega-header .menu-item__link span:not(#st):not(#st) { font-family: var(--st-serif) !important; }
    body.st-v4 .ega #stv2Nav .navigation > .menu-item:first-child > .menu-item__link { padding-left: 0; }
    body.st-v4 .ega .ega-header .menu-item:hover > .menu-item__link,
    body.st-v4 .ega .ega-header .menu-item:hover > .menu-item__link span { color: var(--st-red) !important; }
    body.st-v4 .ega .ega-header .menu-item__link::after { bottom: 0; }
}

/* =====================================================================================================================
   18. MENU DANH MỤC KHỐI ĐẦU TRANG CHỦ KIỂU BOOK365 (views/estore/_hero.php, JS st-v4.js – 02/11/2026)
   Cột trái: các nhóm danh mục nền xám nhạt, icon xám. Rê chuột → bảng #stHeroMega đè lên banner + tin, rộng cả khung:
   tab trái (Sách in / Sách ebook, tab chọn nền xanh nhạt) | các nhóm (tiêu đề in hoa) + danh mục con xếp 4 cột, nút × góc phải.
   ===================================================================================================================== */
.st-hero__grid { position: relative; }
.st-hero__menu { background: #F4F4F4; border: 0; border-radius: 4px; }
.st-v4 .st-hero__menu-list a { color: #222; font-size: 15px; padding: 7px 18px; gap: 12px; }
.st-hero__menu-list a i { color: #8a8a8a; font-size: 18px; }
.st-v4 .st-hero__menu-list a:hover { background: #E3F4FD; color: #000; }
.st-hero__menu-list a:hover i { color: #1a9de0; }
.st-mega[hidden] { display: none !important; }
.st-mega { position: absolute; top: 0; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100%; height: auto !important; background: #fff; border: 1px solid #E3E3E3; border-radius: 4px; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35); }
.st-mega__tabs { display: flex; flex-direction: column; background: #fff; border-right: 1px solid #ECECEC; padding: 0; }
.st-v4 .st-mega__tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 22px; border: 0; background: transparent; color: #000;
    font-size: 16px; text-align: left; cursor: pointer; border-radius: 0; }
.st-mega__tab i { font-size: 22px; color: #8a8a8a; }
.st-mega__tab:hover { background: #F1FAFF; }
.st-v4 .st-mega__tab.is-active { background: #C8EDFC; }
.st-mega__body { position: relative; padding: 26px 40px 30px 36px; }
.st-v4 .st-mega__close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: transparent; color: #555; font-size: 30px; line-height: 1; cursor: pointer; }
.st-v4 .st-mega__close:hover { color: var(--st-red); }
.st-mega__cols { column-count: 4; column-gap: 36px; }
.st-mega__group { break-inside: avoid; page-break-inside: avoid; display: flex; flex-direction: column; margin-bottom: 22px; }
.st-v4 .st-mega__head { display: block; color: #000; font-size: 16px; font-weight: 500; text-transform: uppercase; line-height: 1.35; margin-bottom: 10px; text-decoration: none; }
.st-v4 .st-mega__link { display: block; color: #222; font-size: 15px; line-height: 1.45; padding: 5px 0; text-decoration: none; }
.st-v4 :is(.st-mega__head, .st-mega__link):hover { color: var(--st-red); }
@media (max-width: 1199.98px) {
    .st-mega { grid-template-columns: 220px minmax(0, 1fr); }
    .st-mega__cols { column-count: 3; }
    .st-mega__body { padding: 22px 28px; }
}
@media (max-width: 991.98px) {
    .st-mega { display: none !important; }
}

/* =====================================================================================================================
   19. DẢI LOGO GIAN HÀNG (views/estore/_partner_logos.php – thay 4 ô ưu đãi, 02/11/2026): nền xanh rất nhạt, logo vuông
   viền bo góc chạy ngang liên tục (2 bản danh sách nối nhau, dịch -50%), dừng khi rê chuột; giảm chuyển động → cuộn tay.
   ===================================================================================================================== */
.st-v4 .st-home > .st-logos { margin: 18px 0 40px !important; }
.st-logos__viewport { overflow: hidden; background: #EEF9FF; border-radius: 6px; padding: 18px 0; }
.st-logos__track { display: flex; width: max-content; animation: st-logos-run calc(var(--st-logos-count, 40) * 2.2s) linear infinite; }
.st-logos__viewport:hover .st-logos__track, .st-logos__viewport:focus-within .st-logos__track { animation-play-state: paused; }
.st-logos__list { display: flex; gap: 22px; padding-right: 22px; }
.st-v4 .st-logos__item { flex: 0 0 86px; width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; background: #fff;
    border: 1px solid #E4E4E4; border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.st-logos__item:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .35); }
.st-logos__item img { width: 100%; height: 100%; object-fit: contain; }
@keyframes st-logos-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .st-logos__track { animation: none; }
    .st-logos__viewport { overflow-x: auto; }
    .st-logos__list[aria-hidden="true"] { display: none; }
}
@media (max-width: 575px) {
    .st-v4 .st-home > .st-logos { margin: 10px 0 28px !important; }
    .st-logos__viewport { padding: 12px 0; }
    .st-logos__list { gap: 12px; padding-right: 12px; }
    .st-v4 .st-logos__item { flex-basis: 64px; width: 64px; height: 64px; border-radius: 10px; }
}