/* Theme Name: Mindy Child Author: WebGeniusLab Author URI: http://webgeniuslab.net Description: WebGeniusLab team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product! Version: 2.4 Template: mindy Text Domain: mindy-child */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/montserrat-400.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/montserrat-500.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/montserrat-600.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-700.ttf") format("truetype"); } :root { --elora-navy: #1b2a57; --elora-gold: #d4925d; --elora-ivory: #f6f1eb; --elora-beige: #d9cbc2; --elora-blue-gray: #6b7f94; --elora-dark-gray: #435365; } /* ELORA brand header: keep Mindy's original overlay/sticky animation, but * replace the English demo styling with the Vietnamese brand system. */ body .wgl-theme-header, body .wgl-sticky-header { font-family: "Montserrat", Arial, Helvetica, sans-serif !important; color: var(--elora-navy); } body .wgl-theme-header .wgl-logotype-container img, body .wgl-sticky-header .wgl-logotype-container img { width: auto !important; max-width: 210px !important; height: 58px !important; object-fit: contain !important; } body .wgl-theme-header .primary-nav > ul > li > a, body .wgl-sticky-header .primary-nav > ul > li > a, body .wgl-theme-header .primary-nav > div > ul > li > a, body .wgl-sticky-header .primary-nav > div > ul > li > a { color: var(--elora-navy) !important; font-family: "Montserrat", Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } body .wgl-theme-header .primary-nav > ul > li:hover > a, body .wgl-theme-header .primary-nav > ul > li.current-menu-item > a, body .wgl-theme-header .primary-nav > div > ul > li:hover > a, body .wgl-theme-header .primary-nav > div > ul > li.current-menu-item > a, body .wgl-sticky-header .primary-nav > ul > li:hover > a, body .wgl-sticky-header .primary-nav > ul > li.current-menu-item > a, body .wgl-sticky-header .primary-nav > div > ul > li:hover > a, body .wgl-sticky-header .primary-nav > div > ul > li.current-menu-item > a { color: var(--elora-gold) !important; } body .wgl-theme-header .lavalamp-object, body .wgl-sticky-header .lavalamp-object { background: rgba(246, 241, 235, 0.92) !important; /* Chỉ animate transform/opacity (compositor-only) — animate cả width/height như mặc định theme (mindy/css/main.css) vừa gây giật khi hover đổi mục vừa khiến pill hiển thị lệch/"kẹt giữa 2 mục" khi width và transform không cùng khớp trạng thái layout (vd ngay sau khi đổi mức zoom). */ transition-property: transform, opacity !important; } body .wgl-theme-header .wgl-button, body .wgl-sticky-header .wgl-button, body .wgl-theme-header .elementor-button, body .wgl-sticky-header .elementor-button { border-color: var(--elora-gold) !important; color: var(--elora-navy) !important; font-family: "Montserrat", Arial, Helvetica, sans-serif !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; } body .wgl-theme-header .wgl-button:hover, body .wgl-sticky-header .wgl-button:hover, body .wgl-theme-header .elementor-button:hover, body .wgl-sticky-header .elementor-button:hover { border-color: var(--elora-navy) !important; background: var(--elora-navy) !important; color: #ffffff !important; } body .wgl-theme-header .wgl-infobox-title, body .wgl-theme-header .wgl-infobox-title span, body .wgl-theme-header .wgl-infobox .content_wrapper, body .wgl-theme-header .wgl-infobox .content_wrapper * { color: var(--elora-navy) !important; font-family: "Montserrat", Arial, Helvetica, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; } body .wgl-sticky-header { box-shadow: 0 10px 30px rgba(27, 42, 87, 0.1) !important; } body.home .elementor-2324 [data-id="1eddc7e"] .wgl-double-heading, body.home .elementor-2324 [data-id="1eddc7e"] .wgl-double-heading * { font-family: "Montserrat", Arial, Helvetica, sans-serif !important; letter-spacing: 0 !important; } body.home .elementor-2324 [data-id="1eddc7e"] .dblh__subtitle { color: var(--elora-gold) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.5 !important; text-transform: none !important; } body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title, body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title span { color: #181818 !important; font-weight: 500 !important; line-height: 1.16 !important; text-transform: none !important; } body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title-2, body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title-2 span { color: var(--elora-navy) !important; font-style: normal !important; font-weight: 700 !important; } body.home .elementor-2324 [data-id="8a19d63"] .clip-text__title { font-size: clamp(118px, 14vw, 190px) !important; } @media (max-width: 767px) { body.home .elementor-2324 [data-id="8a19d63"] .clip-text__title { font-size: clamp(58px, 17vw, 72px) !important; } body.home .elementor-2324 [data-id="1eddc7e"] .dblh__subtitle { font-size: 13px !important; } body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title, body.home .elementor-2324 [data-id="1eddc7e"] .dblh__title span { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1.18 !important; } } @media (max-width: 767px) { body .wgl-theme-header .wgl-logotype-container img, body .wgl-sticky-header .wgl-logotype-container img { max-width: 178px !important; height: 52px !important; } } /* ========================================== HEADER DESKTOP CHẬT Ở DẢI 1201-1500px (chính là vùng người dùng gặp khi zoom 125% trên màn 1536/1600px) ------------------------------------------ Ở dải này theme VẪN dùng header desktop (breakpoint mobile của theme là 1200px), nhưng container Elementor co các widget lại nhỏ hơn nội dung thật bên trong -> NỘI DUNG TRÀN RA NGOÀI BOX và đè lên nhau (đo tại 1280px: box logo rộng 130px trong khi bị ép max-width:210px nên vẽ tới 174px, tràn 44px sang phần menu; vòng tròn nút cart/search 56px nằm trong box 35px nên 2 vòng chồng mép nhau; nút "Mua sắm ngay" white-space:normal nên xuống 3 dòng, cao 84px và lòi khỏi mép phải container). Vì vậy phải thu nhỏ CHÍNH NỘI DUNG, không phải chỉnh lại breakpoint/layout. ========================================== */ @media (min-width: 1201px) and (max-width: 1500px) { /* Logo: hạ trần max-width xuống vừa trong box để hết tràn sang menu */ body .wgl-theme-header .wgl-logotype-container img, body .wgl-sticky-header .wgl-logotype-container img { max-width: 130px !important; height: 44px !important; } /* Menu: giảm chữ + khoảng đệm để 7 mục chiếm ít bề ngang hơn */ body .wgl-theme-header .primary-nav > ul > li > a, body .wgl-sticky-header .primary-nav > ul > li > a { margin: 0 2px !important; padding: 0 10px !important; font-size: 13px !important; } /* Cart + search: thu vòng tròn về 44px và tự chừa khoảng cách, tránh 2 vòng chồng mép nhau như hiện tại */ body .wgl-theme-header .wgl-header-row .mini-cart a.wgl-cart, body .wgl-theme-header .wgl-header-row .header_search .wgl-search, body .wgl-sticky-header .wgl-header-row .mini-cart a.wgl-cart, body .wgl-sticky-header .wgl-header-row .header_search .wgl-search { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 4px !important; } /* icon mũi tên trong nút chiếm khá nhiều chỗ ở dải hẹp này */ body .wgl-theme-header .wgl-button .icon-wrapper, body .wgl-sticky-header .wgl-button .icon-wrapper { margin-right: 8px !important; } } /* Nút CTA header ("Mua sắm ngay") LUÔN nằm trên 1 hàng ở mọi bề rộng desktop. Tách riêng khỏi block 1201-1500px ở trên vì nút còn rớt dòng ở dải 1501-1600px — đo được tại 1536px (chính là màn 1920 chạy tỉ lệ hiển thị Windows 125%, trình duyệt báo 1536 CSS px ngay khi zoom trình duyệt 100%): nút cao 70px, phần chữ cao 28px = 2 dòng. Đây là bề rộng RẤT phổ biến nên không giới hạn trần nữa. */ @media (min-width: 1201px) { body .wgl-theme-header .wgl-button, body .wgl-sticky-header .wgl-button, body .wgl-theme-header .wgl-button .button__content, body .wgl-sticky-header .wgl-button .button__content { white-space: nowrap !important; } } /* Ở 1201-1600px, ép 1 hàng thôi chưa đủ — nút sẽ dài ra và lòi khỏi mép phải container, nên phải giảm kèm đệm/cỡ chữ. Trên 1600px giữ nguyên kích thước gốc của theme vì đã đủ chỗ. */ @media (min-width: 1201px) and (max-width: 1600px) { body .wgl-theme-header .wgl-button, body .wgl-sticky-header .wgl-button { padding: 14px 20px !important; font-size: 13px !important; } } /* Nấc chặt nhất: sát ngay trên breakpoint mobile (1201-1320px) vẫn còn thiếu ~20px nên nút bị lòi mép phải. Bóp thêm menu/logo/nút một chút nữa. */ @media (min-width: 1201px) and (max-width: 1320px) { body .wgl-theme-header .wgl-logotype-container img, body .wgl-sticky-header .wgl-logotype-container img { max-width: 112px !important; height: 38px !important; } body .wgl-theme-header .primary-nav > ul > li > a, body .wgl-sticky-header .primary-nav > ul > li > a { margin: 0 1px !important; padding: 0 7px !important; font-size: 12px !important; } body .wgl-theme-header .wgl-header-row .mini-cart a.wgl-cart, body .wgl-theme-header .wgl-header-row .header_search .wgl-search, body .wgl-sticky-header .wgl-header-row .mini-cart a.wgl-cart, body .wgl-sticky-header .wgl-header-row .header_search .wgl-search { width: 38px !important; height: 38px !important; min-width: 38px !important; margin: 0 2px !important; } body .wgl-theme-header .wgl-button, body .wgl-sticky-header .wgl-button { padding: 12px 14px !important; font-size: 12px !important; } } body, button, input, select, textarea { font-family: "Montserrat", Arial, sans-serif !important; } h1, h2, h3, h4, h5, h6, .logo-name, .menu { font-family: "Montserrat", Arial, sans-serif !important; letter-spacing: 0 !important; } .woocommerce .woosw-btn, .woocommerce .woosc-btn, .woosw-btn, .woosc-btn, .woosc-area { display: none !important; } .mindy-storefront-heading::after { content: attr(data-storefront-title); } .mindy-storefront-heading>* { display: none !important; } .home .elementor-element.elementor-element-01533e8 { background-color: #f1f5f4 !important; background-image: url("/wp-content/uploads/2026/07/product-multicream.jpg"), url("/wp-content/uploads/2026/07/product-shampoo.jpg"), url("/wp-content/uploads/2026/07/product-ectoin-cream.jpg") !important; background-position: 84% 50%, 68% 88%, 101% 90% !important; background-repeat: no-repeat !important; background-size: 32% auto, 22% auto, 22% auto !important; } .people-store-header-inner { width: min(1290px, calc(100% - 48px)); margin-inline: auto; } .people-store-promo { position: relative; z-index: 99999; padding: 10px 24px; background: var(--elora-navy); color: #fff; font-size: 13px; line-height: 1.4; text-align: center; } .people-store-masthead { position: relative; z-index: 99999; background: #fff; border-bottom: 1px solid #ececec; } .people-store-utility { display: flex; justify-content: flex-end; padding-top: 12px; } .people-store-utility nav { display: flex; gap: 18px; } .people-store-utility a { color: #777; font-size: 12px; } .people-store-brand-row { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(340px, 520px) minmax(330px, 1fr); align-items: center; gap: 36px; min-height: 112px; padding-block: 18px 22px; } .people-store-wordmark { display: block; width: min(260px, 100%); } .people-store-wordmark img { display: block; width: 100%; height: auto; } .people-store-product-search { display: grid; grid-template-columns: 1fr auto; overflow: hidden; height: 48px; border: 1px solid var(--elora-navy); border-radius: 4px; } .people-store-product-search input[type="search"] { width: 100%; height: 46px; padding: 0 18px; border: 0; background: #fff; color: var(--elora-navy); font-size: 14px; } .people-store-product-search button { height: 46px; padding: 0 20px; border: 0; border-radius: 0; background: var(--elora-navy); color: #fff; font-size: 13px; } .people-store-actions { display: flex; justify-content: flex-end; gap: 24px; } .people-store-actions a { display: grid; gap: 4px; color: var(--elora-navy); text-align: center; } .people-store-actions strong { font-size: 13px; font-weight: 600; } .people-store-actions span { color: #888; font-size: 11px; } .people-store-actions em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 3px; border-radius: 50%; background: var(--elora-gold); color: #fff; font-size: 11px; font-style: normal; } @media (min-width: 1201px) { .wgl-site-header .position_left_middle, .wgl-site-header .position_right_middle { display: none !important; } .wgl-site-header .position_center_middle { flex: 1 1 100%; width: 100% !important; min-width: 0; } .wgl-site-header .position_center_middle .header_area_container, .wgl-site-header .primary-nav { display: block !important; width: 100% !important; } .wgl-site-header .wgl-header-row_wrapper, .wgl-site-header .primary-nav { height: 58px !important; --header-height: 58px !important; } .wgl-site-header .primary-nav>ul { display: flex !important; flex-wrap: nowrap; justify-content: center; align-items: center; width: min(1290px, calc(100% - 48px)); margin-inline: auto; } .wgl-site-header .primary-nav>ul>li { flex: 0 1 auto; white-space: nowrap; } .wgl-site-header .primary-nav>ul>li>a { padding-inline: 18px; border-radius: 0 !important; background: transparent !important; font-size: 13px; } .wgl-site-header .primary-nav>ul>li:hover>a, .wgl-site-header .primary-nav>ul>li.current-menu-item>a, .wgl-site-header .primary-nav>ul>li.current-menu-ancestor>a { background: transparent !important; color: var(--elora-gold) !important; } .wgl-site-header .primary-nav>ul>li:first-child>a { padding-left: 28px; } .wgl-site-header .primary-nav>ul>li:first-child>a>.item_wrapper_text { display: inline-flex; align-items: center; } .wgl-site-header .primary-nav>ul>li:first-child>a>.item_wrapper_text::before { content: "\2630"; margin-right: 10px; font-size: 19px; } .wgl-site-header .hamburger-box { display: none !important; } .wgl-site-header .primary-nav .sub-menu { min-width: 260px; padding: 10px !important; border: 1px solid #e5dfd8; border-radius: 6px; background: #fff !important; box-shadow: 0 18px 42px rgba(27, 42, 87, 0.14); } .wgl-site-header .primary-nav .sub-menu li a { padding: 10px 14px !important; border-radius: 4px; background: transparent !important; color: var(--elora-navy) !important; } .wgl-site-header .primary-nav .sub-menu li:hover>a, .wgl-site-header .primary-nav .sub-menu li.current-menu-item>a { background: var(--elora-ivory) !important; color: var(--elora-gold) !important; } } /* Homepage header is `position: absolute` (via .header_overlap) so it can float transparently over the tall hero image — but other pages don't have a hero tall enough to safely sit under a floating header (e.g. the shop page's category-filter bar collides with it right at the top). Keep the header in normal document flow on those pages instead — it still scrolls away on scroll-down and the sticky clone below still reveals it on scroll-up, same animation as the homepage, just without the risky overlap positioning. */ body:not(.home) .wgl-theme-header.header_overlap { position: relative; } @media (max-width: 1200px) { .people-store-masthead { display: none; } .people-store-promo { padding-block: 8px; font-size: 11px; } .people-store-header-inner { width: min(100% - 24px, 720px); } } .people-store-home { color: var(--elora-navy); } .people-store-home .store-section { padding: 88px 24px; } .people-store-home .store-container { width: min(1290px, 100%); margin-inline: auto; } .people-store-home .store-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr); align-items: center; min-height: 620px; overflow: hidden; background: var(--elora-ivory); } .people-store-home .store-hero-copy { max-width: 650px; padding: 70px clamp(32px, 6vw, 100px); } .people-store-home .store-eyebrow { margin: 0 0 20px; color: var(--elora-gold); font-size: 13px; font-weight: 600; text-transform: uppercase; } .people-store-home .store-hero h1 { margin: 0 0 24px; color: var(--elora-navy); font-size: clamp(48px, 5.5vw, 82px); line-height: 1.02; letter-spacing: 0; } .people-store-home .store-hero-copy>p:not(.store-eyebrow) { max-width: 560px; margin: 0 0 34px; color: var(--elora-dark-gray); font-size: 17px; line-height: 1.7; } .people-store-home .store-actions { display: flex; flex-wrap: wrap; gap: 12px; } .people-store-home .store-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 1px solid var(--elora-navy); border-radius: 4px; background: var(--elora-navy); color: #fff; font-size: 13px; font-weight: 600; } .people-store-home .store-button.is-light { background: transparent; color: var(--elora-navy); } .people-store-home .store-hero-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 18px; height: 100%; padding: 54px clamp(28px, 5vw, 72px); background: var(--elora-beige); } .people-store-home .store-hero-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #fff; } .people-store-home .store-hero-media img:first-child { grid-row: span 2; } .people-store-home .store-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e8e8e8; background: #fff; } .people-store-home .store-benefit { padding: 28px 24px; border-right: 1px solid #e8e8e8; text-align: center; } .people-store-home .store-benefit:last-child { border-right: 0; } .people-store-home .store-benefit strong, .people-store-home .store-benefit span { display: block; } .people-store-home .store-benefit strong { margin-bottom: 5px; font-size: 15px; } .people-store-home .store-benefit span { color: var(--elora-blue-gray); font-size: 12px; } .people-store-home .store-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 38px; } .people-store-home .store-section-heading h2 { margin: 0; color: var(--elora-navy); font-size: 42px; letter-spacing: 0; } .people-store-home .store-section-heading a { color: var(--elora-gold); font-weight: 600; } .people-store-home .store-section-heading p { max-width: 520px; margin: 0; color: var(--elora-dark-gray); } .people-store-home .store-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .people-store-home .store-category { position: relative; overflow: hidden; min-height: 360px; border-radius: 6px; background: #f3f3f3; } .people-store-home .store-category img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .people-store-home .store-category:hover img { transform: scale(1.035); } .people-store-home .store-category span { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 15px 18px; border-radius: 4px; background: rgba(255, 255, 255, 0.94); color: var(--elora-navy); font-size: 17px; font-weight: 600; } .people-store-home .store-products { background: var(--elora-ivory); } .people-store-home .store-products .woocommerce ul.products { margin-bottom: 0; } .people-store-home .store-promotion { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; padding: 0; background: var(--elora-ivory); } .people-store-home .store-promotion-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 64px clamp(32px, 7vw, 110px); } .people-store-home .store-promotion-copy h2 { margin: 0 0 18px; color: var(--elora-navy); font-size: 46px; letter-spacing: 0; } .people-store-home .store-promotion-copy p { max-width: 520px; margin: 0 0 28px; color: var(--elora-dark-gray); line-height: 1.7; } .people-store-home .store-promotion-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 42px; background: var(--elora-beige); } .people-store-home .store-promotion-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: 6px; background: #fff; } .people-store-home .store-brands { padding-block: 58px; border-top: 1px solid #e8e8e8; } .people-store-home .store-brand-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #e4e4e4; } .people-store-home .store-brand-list a { padding: 24px 16px; background: #fff; color: var(--elora-navy); font-size: 16px; font-weight: 600; text-align: center; } .people-store-footer { padding: 68px 24px 0; background: var(--elora-navy); color: #dce0df; } .people-store-footer a { color: #dce0df; } .people-store-footer-inner { width: min(1290px, 100%); margin-inline: auto; } .people-store-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 54px; padding-bottom: 54px; } .people-store-footer h2, .people-store-footer h3 { margin: 0 0 20px; color: #fff; letter-spacing: 0; } .people-store-footer h2 { font-size: 28px; } .people-store-footer-logo { display: block; width: min(230px, 100%); margin-bottom: 24px; filter: brightness(0) invert(1); } .people-store-footer h3 { font-size: 16px; } .people-store-footer p { margin: 0 0 12px; color: #aeb7b4; line-height: 1.7; } .people-store-footer ul { margin: 0; padding: 0; list-style: none; } .people-store-footer li { margin-bottom: 11px; } .people-store-footer-meta { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #98a29f; font-size: 12px; } .people-store-footer-meta span:last-child { padding-right: 72px; } .wgl-theme-header .logo-name, .wgl-theme-header .menu a, .woocommerce-loop-product__title, .woocommerce div.product .product_title { color: var(--elora-navy) !important; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce .price ins, .woocommerce .price ins .amount, .woocommerce .price>.amount, .woocommerce .star-rating, .woocommerce p.stars a { color: var(--elora-gold) !important; } .woocommerce span.onsale, .woocommerce ul.products li.product .onsale { background: var(--elora-gold) !important; color: #fff !important; } .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .wc-block-components-button { border-color: var(--elora-navy) !important; background: var(--elora-navy) !important; color: #fff !important; } .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover, .wc-block-components-button:hover { border-color: var(--elora-gold) !important; background: var(--elora-gold) !important; } .wgl-products { align-items: stretch; } .wgl-products .product { height: 100%; } .wgl-products .product .woo_product_inner_wrapper { display: flex; flex-direction: column; height: 100%; } .wgl-products .product .woo_product_image, .wgl-products .product .picture, .wgl-products .product .woo_post-link { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; } .wgl-products .product .woo_product_image img { width: 100%; height: 100%; object-fit: cover; } .people-store-home .wgl-products .product .picture img+img { display: none !important; } .wgl-products .product .woo_product_content { display: flex; flex: 1; flex-direction: column; min-height: 240px; } .wgl-products .product .woocommerce-loop-product__title { order: 2; min-height: 4.35em; margin-bottom: 12px; overflow: hidden; font-size: 19px !important; line-height: 1.45 !important; } .wgl-products .product .woocommerce-loop-product__title a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .wgl-products .product .star-rating { order: 1; flex: 0 0 auto; margin-bottom: 10px; } .wgl-products .product .price { order: 3; margin-top: auto !important; padding-right: 58px; } .wgl-products .product .wgl_woo_button_wrapper { order: 4; } @media (max-width: 1200px) { .mobile_nav_wrapper .sub-menu { background: #16244a !important; } .mobile_nav_wrapper .sub-menu a { color: #fff !important; } } .scroll_up-arrow { border-color: var(--elora-gold) !important; background: var(--elora-gold) !important; color: var(--elora-navy) !important; } .home .scroll_up-arrow, .woocommerce-page .scroll_up-arrow { display: none !important; } .elora-content-page { color: var(--elora-navy); } .elora-page-hero { padding: 100px max(24px, calc((100% - 1290px) / 2)); background: var(--elora-ivory); } .elora-page-hero>* { max-width: 850px; } .elora-page-hero>p, .elora-label, .elora-media-grid article>p { margin: 0 0 16px; color: var(--elora-gold); font-size: 12px; font-weight: 600; text-transform: uppercase; } .elora-page-hero h1 { margin: 0 0 24px; color: var(--elora-navy); font-size: clamp(44px, 6vw, 78px); line-height: 1.08; } .elora-page-hero>span { display: block; color: var(--elora-dark-gray); font-size: 17px; line-height: 1.8; } .elora-page-section { width: min(1290px, calc(100% - 48px)); margin-inline: auto; padding-block: 82px; } .elora-brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #e7e3df; } .elora-brand-item { display: flex; flex-direction: column; min-height: 280px; padding: 32px 26px; background: #fff; color: var(--elora-navy); } .elora-brand-item strong { margin-bottom: 26px; font-size: 19px; } .elora-brand-item span { color: var(--elora-dark-gray); font-size: 13px; line-height: 1.7; } .elora-brand-item em { margin-top: auto; padding-top: 24px; color: var(--elora-gold); font-size: 12px; font-style: normal; font-weight: 600; } .elora-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .elora-media-grid article img { width: 100%; aspect-ratio: 1; margin-bottom: 24px; border-radius: 6px; object-fit: cover; background: var(--elora-ivory); } .elora-media-grid article h2, .elora-story-grid h2, .elora-contact-grid h2 { margin: 0; color: var(--elora-navy); font-size: 26px; line-height: 1.35; } .elora-story-grid, .elora-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; } .elora-story-grid>div>p:last-child, .elora-contact-grid p { color: var(--elora-dark-gray); line-height: 1.8; } .elora-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--elora-navy); color: #fff; } .elora-values div { min-height: 220px; padding: 42px; border-right: 1px solid rgba(255, 255, 255, 0.16); } .elora-values strong, .elora-values span { display: block; } .elora-values strong { margin-bottom: 18px; color: var(--elora-gold); font-size: 20px; } .elora-values span { color: #d9dee8; line-height: 1.7; } .elora-contact-grid a { color: var(--elora-gold); } .elora-contact-actions { display: grid; gap: 12px; } .elora-contact-actions a { display: grid; gap: 6px; padding: 22px 24px; border: 1px solid #e4ded8; border-radius: 6px; color: var(--elora-navy); } .elora-contact-actions span { color: var(--elora-dark-gray); font-size: 13px; } .elora-faq-list { max-width: 960px; } .elora-faq-list details { border-bottom: 1px solid #ded8d1; } .elora-faq-list summary { padding: 25px 4px; color: var(--elora-navy); font-size: 18px; font-weight: 600; cursor: pointer; } .elora-faq-list details p { max-width: 800px; margin: 0; padding: 0 4px 28px; color: var(--elora-dark-gray); line-height: 1.8; } @media (max-width: 900px) { .elora-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elora-media-grid, .elora-story-grid, .elora-contact-grid { grid-template-columns: 1fr; gap: 36px; } .elora-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .elora-page-hero { padding: 64px 20px; } .elora-page-section { width: calc(100% - 36px); padding-block: 56px; } .elora-brand-grid, .elora-values { grid-template-columns: 1fr; } } @media (max-width: 900px) { .people-store-home .store-hero, .people-store-home .store-promotion { grid-template-columns: 1fr; } .people-store-home .store-hero { min-height: 0; } .people-store-home .store-hero-media { min-height: 420px; } .people-store-home .store-benefits, .people-store-home .store-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .people-store-home .store-benefit:nth-child(2) { border-right: 0; } .people-store-home .store-footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .people-store-home .store-section { padding: 58px 18px; } .people-store-home .store-hero-copy { padding: 54px 22px; } .people-store-home .store-hero h1 { font-size: 44px; } .people-store-home .store-hero-media { min-height: 320px; padding: 22px; } .people-store-home .store-benefits, .people-store-home .store-category-grid, .people-store-home .store-brand-list, .people-store-footer-grid { grid-template-columns: 1fr; } .people-store-home .store-benefit { border-right: 0; border-bottom: 1px solid #e8e8e8; } .people-store-home .store-category { min-height: 320px; } .people-store-home .store-section-heading, .people-store-footer-meta { align-items: flex-start; flex-direction: column; } .people-store-home .store-section-heading h2, .people-store-home .store-promotion-copy h2 { font-size: 36px; } .people-store-home .store-promotion-media { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 14px !important; padding: 22px; overflow: visible !important; } .people-store-home .store-promotion-media img { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; } .people-store-footer { padding-inline: 18px; } } .woocommerce-shop .widget_product_search label, .tax-product_cat .widget_product_search label, .tax-product_tag .widget_product_search label { display: none; } .woocommerce-account .woocommerce-form-row input, .woocommerce-checkout .wc-block-components-text-input input { min-height: 48px; } .woocommerce-checkout .wc-block-components-checkout-step__title, .woocommerce-checkout .wc-block-components-text-input label { text-transform: none !important; } body.woocommerce-account #main-content { padding-bottom: 72px; } body.woocommerce-account main .woocommerce { width: 100%; } /* ── My Account Sidebar Layout ──────────────────────────────────────────────── */ /* * WooCommerce renders .woocommerce > .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content * Chuyển layout này thành dạng sidebar (nav trái / content phải). * NOTE: grid-column tường minh để tránh lá»—i khi notices wrapper chen vào giữa 2 phần tá»­. */ body.woocommerce-account main .woocommerce:not(#customer_login):not(.woocommerce-account-auth) { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto; gap: 32px; align-items: start; } /* Pinning nav luôn ở cá»™t 1, bất kể bao nhiêu phần tá»­ chen vào */ body.woocommerce-account main .woocommerce .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; } /* Pinning content luôn ở cá»™t 2 hàng 1 */ body.woocommerce-account main .woocommerce .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; min-width: 0; } /* Notices wrapper (và bất kỳ phần tá»­ lạ nào khác) chiếm cả 2 cá»™t ở hàng trên */ body.woocommerce-account main .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; grid-row: auto; } /* ── Sidebar Navigation ──────────────────────────────────────────────────────── */ body.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--elora-header-h, 80px) + 16px); background: #ffffff; border: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.08); border-radius: 16px; box-shadow: 0 4px 20px rgba(27, 42, 87, 0.06); overflow: hidden; } /* Gradient accent strip */ body.woocommerce-account .woocommerce-MyAccount-navigation::before { content: ''; display: block; height: 6px; background: linear-gradient(90deg, var(--mindy-primary-color, #1b2a57) 0%, var(--mindy-secondary-color, #d9975a) 100%); } /* ── User Greeting Strip ──────────────────────────────────────────────────────── */ body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.07); } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.10); object-fit: cover; flex-shrink: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__name { font-family: var(--mindy-header-font-family); font-size: 14px; font-weight: 700; color: var(--mindy-primary-color, #1b2a57); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__label { font-size: 11px; color: rgba(var(--mindy-header-rgb, 27 42 87), 0.50); text-transform: uppercase; letter-spacing: 0.05em; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li::before, body.woocommerce-account .woocommerce-MyAccount-navigation ul li::after, body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before, body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after { display: none !important; content: none !important; background: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none !important; list-style-type: none !important; margin: 0; padding: 8px 0 12px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li { list-style: none !important; list-style-type: none !important; margin: 0; padding: 0; padding-left: 0 !important; border: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: 10px; padding: 11px 20px; font-family: var(--mindy-header-font-family); font-size: 14px; font-weight: 500; color: rgba(var(--mindy-header-rgb, 27 42 87), 0.70); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; border-left: 3px solid transparent; line-height: 1.4; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(var(--mindy-header-rgb, 27 42 87), 0.04); color: var(--mindy-primary-color, #1b2a57); } /* Active menu item */ body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders.woocommerce-MyAccount-navigation-link--active a { background: rgba(var(--mindy-header-rgb, 27 42 87), 0.05); color: var(--mindy-primary-color, #1b2a57); font-weight: 700; border-left-color: var(--mindy-primary-color, #1b2a57); } /* Icon styling */ body.woocommerce-account .woocommerce-MyAccount-navigation .elora-nav-icon { display: inline-flex; align-items: center; flex-shrink: 0; width: 18px; height: 18px; opacity: 0.55; transition: opacity 0.2s; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover .elora-nav-icon, body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a .elora-nav-icon { opacity: 1; } /* Logout item – emphasize with different color */ body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 4px; border-top: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.07); } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #b03535; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(176, 53, 53, 0.06); color: #8b1a1a; } /* ── Account Content Area ────────────────────────────────────────────────────── */ body.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; /* prevent grid blowout */ background: #ffffff; border: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.08); border-radius: 16px; box-shadow: 0 4px 20px rgba(27, 42, 87, 0.06); padding: 32px; } /* Headings inside content */ body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--mindy-header-font-family); color: var(--mindy-primary-color, #1b2a57); margin-bottom: 20px; } /* Table orders styling – inherit from theme, add light treatment */ body.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; } body.woocommerce-account .woocommerce-orders-table th { font-family: var(--mindy-header-font-family); font-size: 12px; font-weight: 700; color: var(--mindy-primary-color, #1b2a57); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; border-bottom: 2px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.10); text-align: left; } body.woocommerce-account .woocommerce-orders-table td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.06); vertical-align: middle; } body.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: 0; } body.woocommerce-account .woocommerce-orders-table tr:hover td { background: rgba(var(--mindy-header-rgb, 27 42 87), 0.025); } /* Order status badges */ body.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark { background: rgba(var(--mindy-header-rgb, 27 42 87), 0.08); color: var(--mindy-primary-color, #1b2a57); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; } /* "Xem" button in orders table */ body.woocommerce-account .woocommerce-orders-table .woocommerce-button.button { padding: 7px 18px; font-size: 13px; border-radius: 50px; } /* ── Responsive: Sidebar stacks below content on mobile ─────────────────────── */ @media (max-width: 900px) { body.woocommerce-account main .woocommerce:not(#customer_login):not(.woocommerce-account-auth) { grid-template-columns: 1fr; gap: 20px; } body.woocommerce-account .woocommerce-MyAccount-navigation { position: static; border-radius: 12px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 8px 14px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { border-left-color: transparent; border-bottom-color: var(--mindy-primary-color, #1b2a57); } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; border-top: 0; margin-left: auto; } body.woocommerce-account .woocommerce-MyAccount-content { padding: 20px 16px; } } body.woocommerce-account #customer_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; height: auto; direction: ltr; } body.woocommerce-account #customer_login::before, body.woocommerce-account #customer_login::after { display: none !important; } body.woocommerce-account #customer_login>.u-column1, body.woocommerce-account #customer_login>.u-column2 { float: none; width: auto; direction: ltr; padding: 32px; border: 1px solid #e2e4e9; border-radius: 8px; background: #fff; box-shadow: 0 12px 34px rgba(27, 42, 87, 0.07); } body.woocommerce-account #customer_login h2 { margin: 0 0 24px; color: var(--elora-navy); font-size: 25px; line-height: 1.3; } body.woocommerce-account #customer_login .woocommerce-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; } body.woocommerce-account #customer_login .form-row { margin-bottom: 18px; } body.woocommerce-account #customer_login label { margin-bottom: 7px; color: var(--elora-navy); font-size: 14px; font-weight: 600; } body.woocommerce-account #customer_login input.input-text { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid #d8dbe3; border-radius: 4px; background: #fff; box-shadow: none; } body.woocommerce-account #customer_login input.input-text:focus { border-color: var(--elora-gold); outline: 2px solid rgba(217, 151, 82, 0.16); } body.woocommerce-account #customer_login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; } body.woocommerce-account #customer_login .woocommerce-form-login__rememberme input { width: 18px; height: 18px; margin: 0; } body.woocommerce-account #customer_login .woocommerce-form-login__submit, body.woocommerce-account #customer_login .woocommerce-form-register__submit { display: block; width: 100%; min-height: 50px; margin: 18px 0 0 !important; } body.woocommerce-account #customer_login .lost_password { margin: 2px 0 0; text-align: center; } body.woocommerce-account #customer_login .lost_password a { color: var(--elora-navy); font-size: 14px; font-weight: 600; } body.woocommerce-account #customer_login .woocommerce-privacy-policy-text { color: #626979; font-size: 14px; line-height: 1.7; } @media (max-width: 782px) { body.admin-bar:not(.home) .wgl-theme-header { top: 46px; } } @media (max-width: 768px) { body.woocommerce-account #customer_login { grid-template-columns: 1fr; gap: 20px; } body.woocommerce-account #customer_login>.u-column1, body.woocommerce-account #customer_login>.u-column2 { padding: 24px 20px; } } /* Compact page context: this is navigation, not a hero section. */ .page-header { min-height: 0 !important; margin: 16px 24px 36px !important; padding: 26px 36px !important; border-radius: 8px !important; } .page-header .page-header_wrapper, .page-header .page-header_content { width: 100%; height: auto !important; min-height: 0 !important; } .page-header .page-header_content { display: grid !important; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1170px; margin: 0 auto; } .page-header .page-header_title { color: var(--elora-navy) !important; font-size: 32px !important; font-weight: 600 !important; line-height: 1.25 !important; } .page-header .page-header_breadcrumbs { min-width: 0; padding: 0 !important; color: var(--elora-navy) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 24px !important; letter-spacing: 0 !important; text-align: right; text-transform: none; } .page-header .breadcrumbs { display: flex; min-width: 0; align-items: center; justify-content: flex-end; overflow: hidden; white-space: nowrap; } .page-header .breadcrumbs>a, .page-header .breadcrumbs>.divider { flex: 0 0 auto; } .page-header .breadcrumbs>.current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-header .breadcrumbs .divider { margin: 0 10px; } @media (max-width: 768px) { .page-header { margin: 12px 16px 28px !important; padding: 20px !important; } .page-header .page-header_content { display: block !important; } .page-header .page-header_title { font-size: 26px !important; } .page-header .page-header_breadcrumbs { padding-top: 8px !important; text-align: left; } .page-header .breadcrumbs { justify-content: flex-start; } } /* Mobile mini cart popup */ @media (max-width: 767px) { body .wgl-theme-header .woo_mini_cart, body .woo_mini_cart, body .wgl-mini-cart, body .wgl-cart-mini, body #wgl-mini-cart, body .woocommerce-mini-cart-wrapper { width: calc(100vw - 24px) !important; max-width: 360px !important; max-height: min(72vh, 560px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 16px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 18px 42px rgba(27, 42, 87, 0.18) !important; color: #1B2A57 !important; } body .woo_mini_cart { box-sizing: border-box !important; flex-direction: column !important; gap: 0 !important; } body .woo_mini_cart .woocommerce-mini-cart__empty-message { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 150px !important; margin: 0 !important; padding: 22px 14px !important; border: 1px dashed rgba(27, 42, 87, 0.14) !important; border-radius: 10px !important; background: #FFF8F4 !important; color: #586274 !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 600 !important; text-align: center !important; } body .woo_mini_cart .woocommerce-mini-cart__empty-message::before { content: "Giỏ hàng" !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; margin-bottom: 12px !important; border-radius: 50% !important; background: #1B2A57 !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; } body .woo_mini_cart ul.woocommerce-mini-cart, body .woo_mini_cart .woocommerce-mini-cart { display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body .woo_mini_cart .woocommerce-mini-cart-item, body .woo_mini_cart .wgl_mini-cart_flex { position: relative !important; display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; align-items: start !important; gap: 10px !important; min-height: 86px !important; height: auto !important; padding: 10px 34px 10px 10px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 10px !important; background: #fff !important; } body .woo_mini_cart .wgl_mini-cart_image, body .woo_mini_cart .wgl_mini-cart_image a { display: block !important; grid-column: 1 !important; grid-row: 1 !important; float: none !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; flex: 0 0 64px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body .woo_mini_cart .woocommerce-mini-cart-item img, body .woo_mini_cart .wgl_mini-cart_image img { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; float: none !important; box-sizing: border-box !important; object-fit: contain !important; border-radius: 8px !important; background: #FAF7F2 !important; } body .woo_mini_cart .wgl_mini-cart_contents { display: flex !important; grid-column: 2 !important; grid-row: 1 !important; flex-direction: column !important; gap: 7px !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; float: none !important; padding: 0 !important; margin: 0 !important; } body .woo_mini_cart .woocommerce-mini-cart-item a:not(.remove), body .woo_mini_cart .wgl_mini-cart_contents > a:not(.remove) { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; color: #1B2A57 !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 700 !important; text-decoration: none !important; } body .woo_mini_cart .woocommerce-mini-cart-item .quantity, body .woo_mini_cart .woocommerce-mini-cart-item .amount { color: #D4925D !important; font-size: 13px !important; font-weight: 800 !important; } body .woo_mini_cart .woocommerce-mini-cart-item a.remove, body .woo_mini_cart .wgl_mini-cart_contents a.remove { position: absolute !important; top: 8px !important; right: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #FFF3EF !important; color: #1B2A57 !important; font-size: 16px !important; line-height: 1 !important; } body .woo_mini_cart .woocommerce-mini-cart-item a.remove::before, body .woo_mini_cart .woocommerce-mini-cart-item a.remove::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 11px !important; height: 1.5px !important; border-radius: 999px !important; background: currentColor !important; } body .woo_mini_cart .woocommerce-mini-cart-item a.remove::before { transform: translate(-50%, -50%) rotate(45deg) !important; } body .woo_mini_cart .woocommerce-mini-cart-item a.remove::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } body .woo_mini_cart .woocommerce-mini-cart__total { display: flex !important; justify-content: space-between !important; gap: 12px !important; margin: 14px 0 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(27, 42, 87, 0.1) !important; color: #1B2A57 !important; font-size: 14px !important; font-weight: 800 !important; } body .woo_mini_cart .woocommerce-mini-cart__buttons { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin: 0 !important; } body .woo_mini_cart .woocommerce-mini-cart__buttons .button { width: 100% !important; min-height: 42px !important; padding: 0 14px !important; border-radius: 6px !important; font-size: 13px !important; line-height: 42px !important; text-align: center !important; } } /* Remove browser/theme blue focus ring on product cards after click/tap */ .woocommerce ul.products li.product:focus, .woocommerce ul.products li.product:active, .woocommerce ul.products li.product:focus-within, .wgl-products .product:focus, .wgl-products .product:active, .wgl-products .product:focus-within, .wgl-products .product .woo_product_inner_wrapper:focus, .wgl-products .product .woo_product_inner_wrapper:active, .wgl-products .product .woo_product_inner_wrapper:focus-within, .woocommerce ul.products li.product a:focus, .woocommerce ul.products li.product a:active, .wgl-products .product a:focus, .wgl-products .product a:active, .woocommerce ul.products li.product button:focus, .woocommerce ul.products li.product button:active, .wgl-products .product button:focus, .wgl-products .product button:active { outline: 0 !important; outline-offset: 0 !important; border-color: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important; } .woocommerce ul.products li.product a:focus-visible, .wgl-products .product a:focus-visible, .woocommerce ul.products li.product button:focus-visible, .wgl-products .product button:focus-visible { outline: 0 !important; box-shadow: none !important; } .woocommerce ul.products li.product .woo_product_inner_wrapper, .wgl-products .product .woo_product_inner_wrapper { border: 0 !important; position: relative !important; overflow: hidden !important; } .woocommerce ul.products li.product:hover .woo_product_inner_wrapper, .wgl-products .product:hover .woo_product_inner_wrapper { border-color: transparent !important; } .woocommerce ul.products li.product .woo_product_inner_wrapper::before, .wgl-products .product .woo_product_inner_wrapper::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; display: block !important; border: 0 !important; border-radius: inherit !important; box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.12) !important; opacity: 1 !important; pointer-events: none !important; } .woocommerce ul.products li.product:hover .woo_product_inner_wrapper::before, .wgl-products .product:hover .woo_product_inner_wrapper::before { box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.16) !important; } .woocommerce ul.products li.product .woo_product_inner_wrapper::after, .wgl-products .product .woo_product_inner_wrapper::after, .woocommerce ul.products li.product:hover .woo_product_inner_wrapper::after, .wgl-products .product:hover .woo_product_inner_wrapper::after { border: 0 !important; box-shadow: none !important; outline: 0 !important; } .woocommerce ul.products li.product .woo_product_content, .wgl-products .product .woo_product_content { border: 0 !important; border-radius: 0 !important; background: #fff !important; } .woocommerce ul.products li.product:hover .woo_product_content, .wgl-products .product:hover .woo_product_content { border-color: transparent !important; } /* Product breadcrumb header: compact navigation instead of large hero. */ body.single-product .page-header { min-height: 0 !important; margin: 12px 24px 28px !important; padding: 14px 22px !important; background: #FFF8F5 !important; border: 1px solid rgba(212, 146, 93, 0.16) !important; border-radius: 8px !important; box-shadow: none !important; } body.single-product .page-header .page-header_wrapper, body.single-product .page-header .page-header_content { width: min(1170px, 100%) !important; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } body.single-product .page-header .page-header_content { display: block !important; } body.single-product .page-header .page-header_title { display: none !important; } body.single-product .page-header .page-header_breadcrumbs { display: block !important; padding: 0 !important; color: #1B2A57 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; } body.single-product .page-header .breadcrumbs { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-transform: none !important; } body.single-product .page-header .breadcrumbs * { letter-spacing: 0 !important; text-transform: none !important; } body.single-product .page-header .breadcrumbs > a { color: #1B2A57 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; flex: 0 0 auto !important; } body.single-product .page-header .breadcrumbs > a:hover { color: #D4925D !important; } body.single-product .page-header .breadcrumbs > .divider { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 6px !important; margin: 0 !important; color: rgba(27, 42, 87, 0.34) !important; font-size: 0 !important; } body.single-product .page-header .breadcrumbs > .divider::before { content: "/" !important; font-size: 12px !important; line-height: 1 !important; } body.single-product .page-header .breadcrumbs > .divider svg { display: none !important; } body.single-product .page-header .breadcrumbs > .current { min-width: 0 !important; overflow: hidden !important; color: #5C6778 !important; font-size: 13px !important; font-weight: 600 !important; padding: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (max-width: 767px) { body.single-product .page-header { margin: 8px 14px 18px !important; padding: 10px 12px !important; border-radius: 8px !important; } body.single-product .page-header .page-header_breadcrumbs, body.single-product .page-header .breadcrumbs > a, body.single-product .page-header .breadcrumbs > .current { font-size: 11px !important; line-height: 1.35 !important; } body.single-product .page-header .breadcrumbs { gap: 5px !important; flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; } body.single-product .page-header .breadcrumbs > .current { flex: 1 1 100% !important; margin-top: 2px !important; display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; } } /* Related products: compact cards on product detail pages. */ body.single-product .related.products { margin-top: 34px !important; margin-bottom: 34px !important; } body.single-product .related.products > h2, body.single-product .related.products > h3, body.single-product .related.products > h4 { margin: 0 0 20px !important; color: #1B2A57 !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; text-align: left !important; } body.single-product .related.products .wgl-products-wrapper, body.single-product .related.products .wgl-products, body.single-product .related.products .wgl-carousel_wrapper, body.single-product .related.products .wgl-carousel, body.single-product .related.products .swiper-wrapper { min-height: 0 !important; } body.single-product .related.products .product { height: auto !important; } body.single-product .related.products .woo_product_inner_wrapper { height: auto !important; min-height: 0 !important; border-radius: 8px !important; overflow: hidden !important; background: #fff !important; } body.single-product .related.products .woo_product_image, body.single-product .related.products .picture, body.single-product .related.products .woo_post-link { aspect-ratio: 1 / 1 !important; min-height: 0 !important; } body.single-product .related.products .woo_product_image img, body.single-product .related.products .picture img { object-fit: contain !important; } body.single-product .related.products .woo_product_content { min-height: 128px !important; padding: 10px 9px 12px !important; } body.single-product .related.products .woocommerce-loop-product__title { min-height: calc(2 * 1.35em) !important; margin: 0 0 6px !important; font-size: 13px !important; line-height: 1.35 !important; order: 1 !important; } body.single-product .related.products .woocommerce-loop-product__title a { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; font-size: 13px !important; line-height: 1.35 !important; } body.single-product .related.products .star-rating { order: 2 !important; margin: 0 auto 6px !important; transform: scale(0.82); transform-origin: center; } body.single-product .related.products .price { order: 3 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: center !important; gap: 4px !important; margin: 0 0 7px !important; padding: 0 !important; font-size: 13px !important; line-height: 1.2 !important; text-align: center !important; } body.single-product .related.products .price del, body.single-product .related.products .price del .amount { font-size: 12px !important; opacity: 0.68 !important; } body.single-product .related.products .price ins, body.single-product .related.products .price > .amount, body.single-product .related.products .price ins .amount { font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; } body.single-product .related.products .wgl_woo_button_wrapper { position: static !important; inset: auto !important; order: 4 !important; display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; } body.single-product .related.products .add_to_cart_button { width: 100% !important; min-height: 32px !important; height: 32px !important; padding: 0 8px !important; border-radius: 4px !important; font-size: 12px !important; line-height: 32px !important; text-transform: none !important; } body.single-product .related.products .add_to_cart_button::before { content: none !important; display: none !important; } @media (min-width: 768px) { body.single-product .related.products .swiper-slide { width: 170px !important; max-width: none !important; margin-right: 30px !important; } body.single-product .related.products .woo_product_content { min-height: 184px !important; padding: 18px 16px 20px !important; } body.single-product .related.products .woocommerce-loop-product__title { min-height: calc(3 * 1.42em) !important; margin-bottom: 12px !important; font-size: 16px !important; line-height: 1.42 !important; text-align: left !important; } body.single-product .related.products .woocommerce-loop-product__title a { font-size: 16px !important; line-height: 1.42 !important; -webkit-line-clamp: 3 !important; text-align: left !important; } body.single-product .related.products .star-rating { margin: 0 0 10px !important; transform: scale(0.95); transform-origin: left center; } body.single-product .related.products .price { justify-content: flex-start !important; margin-bottom: 12px !important; font-size: 15px !important; text-align: left !important; } body.single-product .related.products .price del, body.single-product .related.products .price del .amount { font-size: 13px !important; } body.single-product .related.products .price ins, body.single-product .related.products .price > .amount, body.single-product .related.products .price ins .amount { font-size: 15px !important; } body.single-product .related.products .add_to_cart_button { min-height: 38px !important; height: 38px !important; font-size: 13px !important; line-height: 38px !important; } body.single-product .related.products > h2, body.single-product .related.products > h3, body.single-product .related.products > h4 { font-size: 26px !important; margin-bottom: 24px !important; } } @media (min-width: 1025px) { body.single-product .related.products .swiper-slide { width: 220px !important; max-width: 220px !important; } } @media (max-width: 767px) { body.single-product .related.products { margin-top: 28px !important; margin-bottom: 22px !important; } body.single-product .related.products > h2, body.single-product .related.products > h3, body.single-product .related.products > h4 { margin-bottom: 14px !important; font-size: 20px !important; text-align: center !important; } body.single-product .related.products .wgl-products, body.single-product .related.products .swiper-wrapper { gap: 12px !important; } body.single-product .related.products .wgl-products { display: block !important; grid-template-columns: none !important; } body.single-product .related.products .wgl-products-related, body.single-product .related.products .wgl-products, body.single-product .related.products .wgl-carousel_wrapper, body.single-product .related.products .wgl-carousel { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; } body.single-product .related.products .wgl-carousel { overflow-x: auto !important; overflow-y: hidden !important; padding-right: 0 !important; padding-left: 0 !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-y pinch-zoom !important; overscroll-behavior-x: contain; overscroll-behavior-y: auto; } body.single-product .related.products .wgl-carousel::-webkit-scrollbar { display: none; } body.single-product .related.products .wgl-carousel_wrapper .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; width: max-content !important; min-width: max-content !important; transform: none !important; } body.single-product .related.products .swiper-slide { flex: 0 0 calc((100vw - 87px) / 2) !important; width: calc((100vw - 87px) / 2) !important; max-width: 155px !important; min-width: 0 !important; margin-right: 0 !important; scroll-snap-align: start; } body.single-product .related.products .woo_product_content { height: auto !important; min-height: 166px !important; padding: 10px 8px 12px !important; overflow: visible !important; } body.single-product .related.products .price { min-height: 18px !important; } body.single-product .related.products .wgl_woo_button_wrapper { height: auto !important; min-height: 48px !important; } body.single-product .related.products .woocommerce-loop-product__title, body.single-product .related.products .woocommerce-loop-product__title a { font-size: 14px !important; line-height: 1.35 !important; } body.single-product .related.products .add_to_cart_button { min-height: 40px !important; height: 40px !important; margin-top: 8px !important; font-size: 13px !important; line-height: 40px !important; } } @media (min-width: 1201px) { .wgl-site-header .primary-nav { position: relative; } .wgl-site-header .primary-nav>ul>.elora-mega-root { position: static !important; } .wgl-site-header .elora-mega-root>.sub-menu { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px; top: 58px !important; left: 0 !important; width: 100% !important; min-width: 100% !important; padding: 30px max(32px, calc((100% - 1170px) / 2)) 36px !important; border: 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; border-radius: 0; background: #fff !important; box-shadow: 0 18px 36px rgba(27, 42, 87, 0.08); transform: translateY(8px) !important; } .wgl-site-header .elora-mega-root:hover>.sub-menu, .wgl-site-header .elora-mega-root:focus-within>.sub-menu, .wgl-site-header .elora-mega-root.is-mega-open>.sub-menu { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } .wgl-site-header .elora-mega-root>.sub-menu>li { width: auto !important; min-width: 0; } .wgl-site-header .elora-mega-root>.sub-menu>li>a { padding: 0 0 8px !important; color: var(--elora-navy) !important; font-size: 14px; font-weight: 700; line-height: 1.4; white-space: normal; } .wgl-site-header .elora-mega-root>.sub-menu>li>a:hover { background: transparent !important; color: var(--elora-gold) !important; } .wgl-site-header .elora-mega-group>a>.menu-item__plus { display: none !important; } .wgl-site-header .elora-mega-group>.sub-menu { position: static !important; display: block !important; visibility: inherit !important; width: 100% !important; min-width: 0 !important; padding: 4px 0 0 !important; border: 0; background: transparent !important; box-shadow: none; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .wgl-site-header .elora-mega-group>.sub-menu li a { padding: 5px 0 !important; color: #747b89 !important; font-size: 13px; font-weight: 500; line-height: 1.45; white-space: normal; } .wgl-site-header .elora-mega-group>.sub-menu li a:hover { background: transparent !important; color: var(--elora-gold) !important; } } .elora-sale-page { width: min(1170px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 88px; } .elora-sale-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); align-items: end; gap: 48px; margin-bottom: 42px; padding-bottom: 28px; border-bottom: 1px solid #dedfe4; } .elora-sale-heading p { margin: 0 0 8px; color: var(--elora-gold); font-size: 13px; font-weight: 700; text-transform: uppercase; } .elora-sale-heading h1 { margin: 0; color: var(--elora-navy); font-size: 38px; line-height: 1.2; } .elora-sale-heading>span { color: #626979; font-size: 15px; line-height: 1.7; } .elora-sale-products .woocommerce { width: 100%; } .single-product form.variations_form { margin-top: 24px; } .single-product form.variations_form .variations { width: 100%; margin-bottom: 18px; } .single-product form.variations_form .variations th, .single-product form.variations_form .variations td { display: block; width: 100%; padding: 0; text-align: left; } .single-product form.variations_form .variations label { display: block; margin-bottom: 8px; color: var(--elora-navy); font-size: 14px; font-weight: 700; } .single-product form.variations_form .variations select { width: 100%; height: 50px; padding: 0 42px 0 14px; border: 1px solid #d8dbe3; border-radius: 4px; background-color: #fff; color: var(--elora-navy); } .single-product form.variations_form .reset_variations { display: inline-block; margin-top: 8px; color: #697080; font-size: 13px; } .single-product .product_meta .title { display: inline-block; width: 120px !important; min-width: 120px; white-space: nowrap; } @media (max-width: 768px) { .elora-sale-page { width: min(100% - 32px, 620px); padding: 36px 0 64px; } .elora-sale-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; } .elora-sale-heading h1 { font-size: 30px; } } /* ══════════════════════════════════════════════════════════════ Sticky Product Tabs Navigation Dùng biến Mindy để hoàn toàn đồng bá»™ vá»›i thiết kế theme ══════════════════════════════════════════════════════════════ */ .woocommerce.single .woocommerce-tabs ul.tabs.elora-tabs--sticky { position: fixed; z-index: 990; left: 0; right: 0; width: 100%; display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; padding: 10px max(16px, calc((100% - 1290px) / 2)); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.10); box-shadow: 0 4px 24px rgba(27, 42, 87, 0.07); transition: box-shadow 0.3s; /* reset overflow của tabs gốc để không bị cắt ná»™i dung */ overflow: visible; } /* ══════════════════════════════════════════════════════════════ Sticky Bottom Purchase Bar ══════════════════════════════════════════════════════════════ */ .elora-sticky-buy-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 980; background: #fff; border-top: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.10); box-shadow: 0 -4px 24px rgba(27, 42, 87, 0.10); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } .elora-sticky-buy-bar--visible { transform: translateY(0); } .elora-sticky-buy-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1290px, 100%); margin-inline: auto; padding: 10px max(16px, calc((100% - 1290px) / 2)); } .elora-sticky-buy-bar__thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.10); background: var(--mindy-ivory, #f8f5f1); } .elora-sticky-buy-bar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; } .elora-sticky-buy-bar__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .elora-sticky-buy-bar__name { font-family: var(--mindy-header-font-family); font-weight: 700; font-size: 15px; color: var(--mindy-primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .elora-sticky-buy-bar__price { font-family: var(--mindy-price-font-family, var(--mindy-header-font-family)); font-weight: var(--mindy-price-font-weight, 700); font-size: 18px; color: var(--mindy-price-color); } .elora-sticky-buy-bar__action { flex: 0 0 auto; } /* Nút kế thừa hoàn toàn class .button của theme */ .elora-sticky-buy-bar__btn.button { min-width: 180px; padding: 13px 28px 14px; font-size: 14px; } @media (max-width: 767px) { .elora-sticky-buy-bar__inner { padding: 10px 16px; gap: 12px; } .elora-sticky-buy-bar__name { font-size: 13px; } .elora-sticky-buy-bar__price { font-size: 16px; } .elora-sticky-buy-bar__btn.button { min-width: 120px; padding: 11px 20px 12px; font-size: 13px; } .woocommerce.single .woocommerce-tabs ul.tabs.elora-tabs--sticky { gap: 6px; padding: 8px 10px; } .woocommerce.single .woocommerce-tabs ul.tabs.elora-tabs--sticky li a { padding: 8px 16px; font-size: 12px; } } /* ══════════════════════════════════════════════════════════════ Frontend Auth UI — WooCommerce /my-account/ (ELORA Beauty) ══════════════════════════════════════════════════════════════ */ .woocommerce-account .woocommerce { max-width: 1080px; margin: 0 auto; padding: 20px 0 60px; } .woocommerce-account .woocommerce-notices-wrapper { margin-bottom: 24px; } .woocommerce-account #customer_login { display: flex; gap: 40px; justify-content: center; align-items: stretch; } .woocommerce-account #customer_login > .col-1, .woocommerce-account #customer_login > .col-2 { flex: 1 1 480px; max-width: 500px; } .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { background: #ffffff; border: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.08); border-radius: 20px; box-shadow: 0 10px 32px rgba(27, 42, 87, 0.06); padding: 36px 32px 32px; height: 100%; display: flex; flex-direction: column; } .woocommerce-account .woocommerce-form-login h2, .woocommerce-account .woocommerce-form-register h2 { font-family: var(--mindy-header-font-family); font-size: 24px; font-weight: 700; color: var(--mindy-primary-color, #1b2a57); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.08); text-align: center; } .woocommerce-account .woocommerce-form-row { margin-bottom: 20px; } .woocommerce-account .woocommerce-form-row label { display: block; font-family: var(--mindy-header-font-family); font-weight: 600; font-size: 13px; color: var(--mindy-primary-color, #1b2a57); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .woocommerce-account .woocommerce-Input { width: 100%; padding: 12px 16px; font-size: 15px; border: 1px solid rgba(var(--mindy-header-rgb, 27 42 87), 0.15); border-radius: 10px; background: #faf9f7; transition: all 0.25s ease; } .woocommerce-account .woocommerce-Input:focus { outline: none; background: #ffffff; border-color: var(--mindy-primary-color, #1b2a57); box-shadow: 0 0 0 3px rgba(27, 42, 87, 0.10); } .woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #555; margin-bottom: 20px; } .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register__submit { width: 100%; padding: 14px 28px; font-size: 15px; font-weight: 700; border-radius: 50px; margin-top: 10px; cursor: pointer; text-align: center; } .woocommerce-account .woocommerce-LostPassword { text-align: center; margin-top: 16px; font-size: 13px; } .woocommerce-account .woocommerce-LostPassword a { color: var(--mindy-primary-color, #1b2a57); text-decoration: underline; transition: opacity 0.2s; } .woocommerce-account .woocommerce-LostPassword a:hover { opacity: 0.8; color: #d9975a; } @media (max-width: 767px) { .woocommerce-account #customer_login { flex-direction: column; gap: 24px; } .woocommerce-account #customer_login > .col-1, .woocommerce-account #customer_login > .col-2 { max-width: 100%; } .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { padding: 24px 20px 20px; } } /* ══════════════════════════════════════════════════════════════ My Account Dashboard – ELORA Welcome Card (Brand Guidelines) ══════════════════════════════════════════════════════════════ */ .elora-dashboard__welcome { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid rgba(27, 42, 87, 0.08); /* Navy #1B2A57 with opacity */ } .elora-dashboard__title { font-family: 'Montserrat', sans-serif !important; font-size: 24px; font-weight: 700; color: #1B2A57; /* Brand Navy */ margin: 0 0 8px; } .elora-dashboard__title strong { color: #D4925D; /* Brand Gold */ } .elora-dashboard__subtitle { font-family: 'Montserrat', sans-serif !important; font-size: 14px; color: #6B7F94; /* Brand Grey */ line-height: 1.6; margin: 0; } /* Shortcut grid (3 cards) */ .elora-dashboard__shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .elora-dashboard__shortcut { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; background: #F6F1EB; /* Brand Neutral/Beige */ border: 1px solid rgba(212, 146, 93, 0.15); /* Light Gold Border */ border-radius: 12px; text-decoration: none; color: #1B2A57; /* Brand Navy */ font-family: 'Montserrat', sans-serif !important; font-size: 13px; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(27, 42, 87, 0.03); } .elora-dashboard__shortcut:hover { background: #ffffff; border-color: #D4925D; /* Brand Gold */ box-shadow: 0 6px 20px rgba(212, 146, 93, 0.15); transform: translateY(-3px); color: #1B2A57; } .elora-dashboard__shortcut-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(27, 42, 87, 0.05); /* Very light Navy */ color: #1B2A57; /* Brand Navy */ transition: all 0.3s ease; } .elora-dashboard__shortcut:hover .elora-dashboard__shortcut-icon { background: #1B2A57; /* Brand Navy */ color: #ffffff; } @media (max-width: 600px) { .elora-dashboard__shortcuts { grid-template-columns: 1fr 1fr; } } /* ── Brand Overrides for Sidebar Nav ── */ body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { font-family: 'Montserrat', sans-serif !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders.woocommerce-MyAccount-navigation-link--active a { color: #1B2A57 !important; border-left-color: #1B2A57 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation::before { background: linear-gradient(90deg, #1B2A57 0%, #D4925D 100%) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__name { font-family: 'Montserrat', sans-serif !important; color: #1B2A57 !important; } /* ══════════════════════════════════════════════════════════════ ELORA Brand - Single Blog / Blog Detail Styling ══════════════════════════════════════════════════════════════ */ .single-post .wgl-container { max-width: 900px; } .single-post .post_featured_bg, .single-post .blog-post-image { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(27, 42, 87, 0.08); margin-bottom: 40px; } .single-post h1.blog-post-title { font-family: 'Montserrat', sans-serif !important; font-size: 40px; font-weight: 700; color: #1B2A57; line-height: 1.3; margin-bottom: 20px; text-align: center; } .single-post .blog-post-meta { display: flex; justify-content: center; gap: 20px; font-size: 14px; color: #6B7F94; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(212, 146, 93, 0.2); } .single-post .blog-post-content { font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 1.9; color: #435365; } .single-post .blog-post-content h2, .single-post .blog-post-content h3 { font-family: 'Montserrat', sans-serif !important; color: #1B2A57; margin-top: 40px; margin-bottom: 20px; } .single-post .blog-post-content h2 { font-size: 28px; } .single-post .blog-post-content h3 { font-size: 22px; } .single-post .blog-post-content blockquote { border-left: 4px solid #D4925D; background: #F6F1EB; padding: 30px; border-radius: 0 12px 12px 0; font-style: italic; font-size: 20px; color: #1B2A57; margin: 40px 0; } .single-post .blog-post-content a { color: #D4925D; text-decoration: underline; } .single-post .related_posts .mindy_module_title h3 { font-family: 'Montserrat', sans-serif !important; color: #1B2A57; font-size: 24px; border-bottom: 2px solid #D4925D; display: inline-block; padding-bottom: 10px; } /* ══════════════════════════════════════════════════════════════ ELORA Brand - Archive Page Styling ══════════════════════════════════════════════════════════════ */ .elora-brand-tabs { margin: -30px -30px 40px -30px; /* Offset WooCommerce container padding if needed */ padding: 20px 30px; background: #ffffff; border-bottom: 1px solid rgba(27, 42, 87, 0.08); } .elora-brand-tabs-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; } .elora-brand-tab { font-family: 'Montserrat', sans-serif !important; font-size: 15px; font-weight: 600; color: #6B7F94; text-transform: uppercase; text-decoration: none; padding: 10px 0; position: relative; transition: color 0.3s ease; } .elora-brand-tab:hover { color: #1B2A57; } .elora-brand-tab.is-active { color: #1B2A57; font-weight: 700; } .elora-brand-tab.is-active::after { content: ''; position: absolute; bottom: -1px; /* Align with border */ left: 0; width: 100%; height: 3px; background: #D4925D; /* Brand Gold/Pink accent */ } .elora-brand-banner { margin-bottom: 40px; text-align: center; } .elora-brand-banner img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(27, 42, 87, 0.05); } /* Adjust standard woocommerce layout for brand page */ .tax-product_brand .woocommerce-products-header__title.page-title { display: none; /* Hide default title, we use tabs */ } /* ══════════════════════════════════════════════════════════════ ELORA Brand - Media Video Page Styling ══════════════════════════════════════════════════════════════ */ .elora-media-container { display: flex; flex-wrap: wrap; background: #f8f8f8; /* Grey background matching reference */ margin: 40px 0 60px; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 25px rgba(27, 42, 87, 0.05); } .elora-media-video { flex: 0 0 100%; position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; background: #000; } .elora-media-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .elora-media-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 16px; text-align: center; } .elora-media-content { flex: 0 0 100%; padding: 40px 30px; font-family: 'Montserrat', sans-serif; } .elora-media-title { font-family: 'Montserrat', sans-serif !important; color: #1B2A57; font-size: 28px; font-weight: 700; margin-bottom: 25px; letter-spacing: 0.5px; } .elora-media-desc { color: #6B7F94; font-size: 16px; line-height: 1.8; } .elora-media-desc p { margin-bottom: 20px; } /* Desktop layout: 60/40 Split */ @media (min-width: 992px) { .elora-media-container { flex-wrap: nowrap; } .elora-media-video { flex: 0 0 60%; padding-bottom: 0; height: auto; min-height: 450px; } .elora-media-content { flex: 0 0 40%; padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; } } /* ========================================================================== ELORA My Account Orders & View Order UI Refinements ========================================================================== */ .elora-order-header-bar { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 25px; } .elora-back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #d81b60; text-decoration: none; margin-bottom: 15px; transition: color 0.2s ease; } .elora-back-link:hover { color: #ad1457; } .elora-order-title-wrap { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 8px; } .elora-order-heading { font-size: 22px; font-weight: 600; margin: 0 !important; color: #222; } .elora-status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; background: #e0e0e0; color: #424242; } .elora-status-badge.status-completed { background: #e8f5e9; color: #2e7d32; } .elora-status-badge.status-processing, .elora-status-badge.status-on-hold { background: #fff8e1; color: #f57f17; } .elora-status-badge.status-pending { background: #e3f2fd; color: #1565c0; } .elora-status-badge.status-cancelled, .elora-status-badge.status-failed { background: #ffebee; color: #c62828; } .elora-order-date-meta { font-size: 13px; color: #777; margin: 0; } .elora-orders-header { margin-bottom: 20px; } .elora-orders-header h2 { font-size: 22px; font-weight: 600; margin-bottom: 5px; } .elora-orders-header p { font-size: 14px; color: #666; margin: 0; } .elora-orders-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-bottom: 20px; } .elora-orders-table th { background: transparent; border: none; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #888; padding: 10px 15px; } .elora-orders-table td { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 15px; vertical-align: middle; } .elora-orders-table tr td:first-child { border-left: 1px solid #eee; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .elora-orders-table tr td:last-child { border-right: 1px solid #eee; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .elora-order-num-link { font-weight: 600; color: #333; text-decoration: none; } .elora-order-num-link:hover { color: #d81b60; } .elora-order-btn { background: #333 !important; color: #fff !important; font-size: 13px !important; padding: 8px 16px !important; border-radius: 4px !important; transition: background 0.2s ease !important; } .elora-order-btn:hover { background: #d81b60 !important; } /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== Product Gallery - Safe Square 1:1 & Strictly Clipped Thumbnails Scroll ========================================================================== */ /* 1. Ensure the entire gallery column NEVER spills over, BUT keep its original column width! */ .woocommerce div.product div.images.woocommerce-product-gallery, .woocommerce div.product div.images { position: relative !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; /* Force clip everything to this column */ } /* 2. Main Image Individual Slides - Fixed Square 1:1 container, safe image */ .woocommerce div.product div.images .woocommerce-product-gallery__image { aspect-ratio: 1 / 1 !important; overflow: hidden !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fdfdfd !important; } /* Let the image sit inside the square naturally so WooCommerce Zoom calculates correctly */ .woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: auto !important; } /* 3. Thumbnails Container - Horizontal Scroll, STRICTLY 100% of the Left Column */ .woocommerce div.product div.images ol.flex-control-thumbs, .woocommerce-product-gallery ol.flex-control-thumbs, ol.flex-control-nav.flex-control-thumbs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; /* ENABLE SCROLL */ overflow-y: hidden !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: 10px !important; padding: 5px 2px 10px 2px !important; margin: 15px 0 0 0 !important; list-style: none !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; } /* 4. Thumbnail Item - 4 Visible Per Row, Square 1:1 */ .woocommerce div.product div.images ol.flex-control-thumbs li, .woocommerce-product-gallery ol.flex-control-thumbs li, ol.flex-control-nav.flex-control-thumbs li { flex: 0 0 calc(25% - 7.5px) !important; width: calc(25% - 7.5px) !important; min-width: calc(25% - 7.5px) !important; max-width: calc(25% - 7.5px) !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; float: none !important; box-sizing: border-box !important; } .woocommerce div.product div.images ol.flex-control-thumbs li img, .woocommerce-product-gallery ol.flex-control-thumbs li img { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 8px !important; border: 2px solid transparent !important; transition: border-color 0.2s ease !important; cursor: pointer !important; display: block !important; } .woocommerce div.product div.images ol.flex-control-thumbs li img.flex-active, .woocommerce-product-gallery ol.flex-control-thumbs li img:hover { border-color: #d81b60 !important; } /* Show Custom Scrollbar for Desktop Mouse Users */ ol.flex-control-thumbs::-webkit-scrollbar { height: 6px !important; display: block !important; } ol.flex-control-thumbs::-webkit-scrollbar-track { background: #f1f1f1 !important; border-radius: 4px !important; } ol.flex-control-thumbs::-webkit-scrollbar-thumb { background: #d81b60 !important; border-radius: 4px !important; } /* Tối ưu Page Header (Tiêu đề trang & Breadcrumbs) */ .page-header_content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 8px !important; text-align: left !important; } .page-header_title { font-size: 32px !important; line-height: 1.2 !important; margin: 0 !important; color: #1B2A57 !important; } .page-header_breadcrumbs { font-size: 13px !important; justify-content: flex-start !important; opacity: 0.7; } .page-header_breadcrumbs .breadcrumbs { justify-content: flex-start !important; } /* FORCE 4 COLUMNS ON WOOCOMMERCE SHOP PAGE (OVERRIDE THEME DEFAULTS) */ .woocommerce ul.products, .woocommerce-page ul.products, .wgl-products .products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products .wgl_col-4 { width: 100% !important; max-width: 100% !important; margin: 0 !important; flex: unset !important; } @media (max-width: 1024px) { .woocommerce ul.products, .wgl-products .products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .woocommerce ul.products, .wgl-products .products { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .woocommerce ul.products, .wgl-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* FIX MINDY THEME COLUMNS TO 4 */ .wgl-products-wrapper .wgl-products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; } .wgl-products-wrapper .wgl-products .product { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; } @media (max-width: 1024px) { .wgl-products-wrapper .wgl-products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .wgl-products-wrapper .wgl-products { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; } } @media (max-width: 480px) { .wgl-products-wrapper .wgl-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================== MOBILE RESPONSIVE TWEAKS ========================================== */ @media (max-width: 767px) { /* 1. Sản phẩm: 2 cột trên Mobile */ ul.products { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; padding: 0 10px !important; } ul.products li.product { width: 100% !important; margin: 0 !important; } /* Chỉnh sửa font chữ sản phẩm trên mobile cho gọn */ ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; line-height: 1.4 !important; } ul.products li.product .price { font-size: 14px !important; } /* 2. Giỏ hàng & Thanh toán trên Mobile */ .woocommerce table.shop_table_responsive tr { display: block; margin-bottom: 20px; border: 1px solid #ddd; } .woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; text-align: right !important; padding: 10px !important; } .woocommerce table.shop_table_responsive td::before { content: attr(data-title) ': '; font-weight: bold; float: left; } /* Thu gọn banner Category/Shop */ .elora-shop-categories { gap: 8px; } .elora-shop-categories a { padding: 6px 16px; font-size: 12px; } /* Header Mobile: Giảm padding */ .page-header_content { padding: 20px 10px !important; } .page-header_title { font-size: 24px !important; } } @media (max-width: 767px) { /* Tối ưu trang Thanh toán (Checkout) trên Mobile */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; padding: 0 !important; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { width: 100% !important; float: none !important; margin-top: 30px !important; padding: 0 !important; } .woocommerce form .form-row { width: 100% !important; float: none !important; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 5px !important; font-size: 13px !important; } /* Thu gọn lề 2 bên của toàn bộ website trên đt */ .wgl-container { padding-left: 15px !important; padding-right: 15px !important; } } /* ========================================== MOBILE RESPONSIVE CHO TOÀN BỘ WEB (HEADER, FOOTER, CUSTOM PAGES) ========================================== */ /* HEADER RESPONSIVE */ @media (max-width: 991px) { .people-store-promo, .people-store-utility { display: none !important; /* Ẩn topbar trên đt cho gọn */ } .people-store-brand-row { grid-template-columns: 1fr !important; gap: 15px !important; padding-block: 15px !important; text-align: center; } .people-store-wordmark { order: 1; margin: 0 auto; width: 180px !important; } .people-store-actions { order: 2; justify-content: center !important; gap: 30px !important; } .people-store-product-search { order: 3; margin-top: 10px; } } /* FOOTER RESPONSIVE */ @media (max-width: 991px) { .people-store-footer { padding: 52px 20px 0 !important; } .people-store-footer-grid { grid-template-columns: 1.2fr 1fr 1fr !important; gap: 34px 24px !important; padding-bottom: 38px !important; } .people-store-footer-grid > section { grid-column: 1 / -1; max-width: 620px; } .people-store-footer-nav { grid-template-columns: 1fr !important; gap: 40px !important; padding: 40px 15px !important; text-align: center; } .people-store-footer-meta { flex-direction: column; gap: 10px; text-align: center !important; padding: 18px 0 !important; } .people-store-footer-meta span:last-child { padding-right: 0 !important; } .people-store-footer-nav img { margin: 0 auto 20px auto !important; } } @media (max-width: 767px) { .people-store-footer { padding: 42px 18px 0 !important; text-align: center; } .people-store-footer-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding-bottom: 26px !important; } .people-store-footer-grid > section, .people-store-footer-grid > nav { max-width: none; padding: 0 0 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .people-store-footer-grid > nav { padding-top: 22px !important; } .people-store-footer-grid > nav:last-child { border-bottom: 0; padding-bottom: 0 !important; } .people-store-footer-logo { width: min(180px, 72vw) !important; margin: 0 auto 18px !important; } .people-store-footer h3 { margin-bottom: 12px !important; font-size: 15px !important; } .people-store-footer p { max-width: 320px; margin-right: auto !important; margin-left: auto !important; font-size: 14px; line-height: 1.65; } .people-store-footer li { margin-bottom: 0 !important; } .people-store-footer ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; max-width: 330px; margin-inline: auto !important; } .people-store-footer a { display: inline-flex; justify-content: center; min-height: 34px; align-items: center; padding: 2px 0; font-size: 14px; line-height: 1.35; } .people-store-footer-meta { gap: 8px !important; padding: 18px 0 22px !important; font-size: 11px !important; line-height: 1.55; } .people-store-footer-meta span { display: block; max-width: calc(100% - 68px); margin-inline: auto; } } /* CUSTOM PAGES (BRANDS, CATEGORIES, ABOUT, MEDIA) RESPONSIVE */ @media (max-width: 991px) { .elora-brands-grid { grid-template-columns: 1fr !important; } .elora-category-grid { grid-template-columns: repeat(2, 1fr) !important; } .elora-page-hero { padding: 40px 15px !important; } .elora-page-hero h1 { font-size: 28px !important; } .elora-content-page { padding: 0 15px 40px !important; } } @media (max-width: 480px) { .elora-category-grid { grid-template-columns: 1fr !important; } } /* ========================================== MOBILE HEADER FIX (NATIVE + CUSTOM) ========================================== */ @media (max-width: 1200px) { /* 1200px = breakpoint mobile-header THẬT của theme (mindy_set header_mobile_queris). Trước đây để 991px nên trong dải 992-1200px header mobile hiện với nền tối gốc của theme. */ /* 1. Đổi màu Header gốc của Theme thành Trắng/Navy */ .wgl-mobile-header { background-color: #ffffff !important; border-bottom: 1px solid #ececec !important; } .wgl-mobile-header a { color: #1B2A57 !important; } .wgl-mobile-header .hamburger-inner, .wgl-mobile-header .hamburger-inner::before, .wgl-mobile-header .hamburger-inner::after { background-color: #1B2A57 !important; } /* 2. Đổi chữ People & Store thành ELORA */ .wgl-mobile-header .logo-name, .wgl-mobile-header .logo { visibility: hidden !important; position: relative !important; display: flex !important; align-items: center !important; } .wgl-mobile-header .logo-name::after, .wgl-mobile-header .logo::after { content: 'ELORA' !important; visibility: visible !important; position: absolute !important; left: 0 !important; color: #1B2A57 !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* 3. Chỉnh lại thanh Header Tùy chỉnh (Masthead) */ .people-store-wordmark, .people-store-actions { display: none !important; /* Ẩn Logo và Giỏ hàng trùng lặp */ } .people-store-brand-row { min-height: auto !important; padding: 10px 15px !important; } .people-store-product-search { order: 1 !important; margin: 0 !important; } } /* ========================================== MOBILE SIDEBAR MENU & CATEGORY SCROLL ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* 1. Sửa Sidebar Menu (Ba gạch) thành màu sáng */ .wgl-menu_outer, .wgl-mobile-nav, .mobile_nav_wrapper, .header_side_panel { background-color: #ffffff !important; } .wgl-menu_outer a, .wgl-menu_outer span, .wgl-menu_outer .menu-item a { color: #1B2A57 !important; font-weight: 600 !important; } .wgl-menu_outer .search-form input, .wgl-menu_outer .search-field { border-bottom-color: #1B2A57 !important; color: #1B2A57 !important; } .wgl-menu_outer .search-form input::placeholder { color: #6b7f94 !important; } .wgl-menu_outer .close-menu, .wgl-menu_outer .close_side_panel { background-color: #F6F1EB !important; color: #1B2A57 !important; } /* 2. Thanh Category (Bộ lọc Sản phẩm) nằm 1 hàng, có thể lướt ngang */ .elora-shop-categories { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; padding-bottom: 12px !important; /* Tạo khoảng trống cho thanh cuộn */ -webkit-overflow-scrolling: touch; /* Lướt mượt trên iOS */ gap: 10px !important; } /* Tùy chỉnh thanh cuộn ngang cho đẹp */ .elora-shop-categories::-webkit-scrollbar { height: 3px; } .elora-shop-categories::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .elora-shop-categories::-webkit-scrollbar-thumb { background: #d9cbc2; border-radius: 10px; } .elora-shop-categories a { white-space: nowrap !important; flex-shrink: 0 !important; } } /* ========================================== MOBILE MENU HOVER & SUBMENU FIX ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* Sửa lỗi hover bị dính nền xanh đen che chữ */ .wgl-menu_outer ul li a:hover, .wgl-menu_outer ul li a:focus, .wgl-menu_outer ul li a:active, .wgl-menu_outer ul li.current-menu-item > a, .wgl-menu_outer ul li.current-menu-ancestor > a { background-color: #f6f1eb !important; /* Màu Be nhạt chuẩn ELORA */ color: #1b2a57 !important; } /* Sửa lỗi background xanh đen khi xổ menu con (sub-menu) ra */ .wgl-menu_outer ul.sub-menu, .wgl-menu_outer ul.sub-menu > li, .wgl-menu_outer .mobile-menu-wrapper { background-color: #ffffff !important; } /* Chỉnh sửa hiển thị menu con cho dễ nhìn */ .wgl-menu_outer ul.sub-menu { border-left: 3px solid #f6f1eb !important; margin-left: 10px !important; padding-left: 10px !important; } .wgl-menu_outer ul.sub-menu li a { background-color: transparent !important; color: #1b2a57 !important; font-weight: 500 !important; opacity: 0.9 !important; } .wgl-menu_outer ul.sub-menu li a:hover { background-color: #f6f1eb !important; opacity: 1 !important; } /* Xóa nền của thẻ span mũi tên xổ xuống nếu bị dính nền */ .wgl-menu_outer .menu-item-has-children > span, .wgl-menu_outer .menu-item-has-children > a::after { background-color: transparent !important; color: #1b2a57 !important; } } /* ========================================== MOBILE MENU ELEGANT RE-STYLE (ELORA GUIDELINE) ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* Ép Font chữ chuẩn theo Guideline cho Menu */ .wgl-menu_outer, .wgl-menu_outer *, .mobile_nav_wrapper * { font-family: 'Montserrat', Arial, sans-serif !important; } /* Ghi đè triệt để tất cả các trạng thái hover / active của Theme để không bao giờ hiện cục màu tối */ .wgl-menu_outer ul li, .wgl-menu_outer ul li a, .wgl-menu_outer ul li a:hover, .wgl-menu_outer ul li a:focus, .wgl-menu_outer ul li a:active, .wgl-menu_outer ul li.current-menu-item > a, .wgl-menu_outer ul li.current-menu-ancestor > a { background: transparent !important; background-color: transparent !important; } /* Khi hover hoặc đang chọn, chữ chuyển sang Vàng Champagne tinh tế thay vì đổi màu nền */ .wgl-menu_outer ul li a:hover, .wgl-menu_outer ul li.current-menu-item > a { color: #d4925d !important; } /* Menu con (Sub-menu) */ .wgl-menu_outer ul.sub-menu { background-color: transparent !important; border-left: 1px solid #d4925d !important; /* Viền dọc màu vàng mỏng thanh lịch */ margin-left: 15px !important; padding-left: 15px !important; } .wgl-menu_outer ul.sub-menu li a { font-size: 14px !important; font-weight: 400 !important; color: #1b2a57 !important; padding-top: 8px !important; padding-bottom: 8px !important; } .wgl-menu_outer ul.sub-menu li a:hover { color: #d4925d !important; } /* Nút mũi tên xổ xuống */ .wgl-menu_outer .menu-item-has-children > span { color: #1b2a57 !important; background: transparent !important; } .wgl-menu_outer .menu-item-has-children > span:hover { color: #d4925d !important; } } /* ========================================== FIX CLOSE BUTTON ICON FONT ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* Khôi phục lại icon font cho nút Tắt (X) và các icon mũi tên */ .wgl-menu_outer .close_side_panel, .wgl-menu_outer .close_side_panel *, .wgl-menu_outer .close-menu, .wgl-menu_outer .close-menu *, .wgl-menu_outer i, .mobile_nav_wrapper i { font-family: unset !important; } /* Chỉnh màu cho rõ nút Tắt (dấu X) */ .wgl-menu_outer .close_side_panel, .wgl-menu_outer .close-menu { background-color: #1b2a57 !important; color: #ffffff !important; } .wgl-menu_outer .close_side_panel *, .wgl-menu_outer .close-menu * { color: #ffffff !important; background-color: transparent !important; } /* Nếu theme vẽ dấu X bằng 2 cái span gạch ngang nhau */ .wgl-menu_outer .close_side_panel span, .wgl-menu_outer .close-menu span { background-color: #ffffff !important; } } /* ========================================== FIX HAMBURGER CLOSE ICON (X) ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* Đảm bảo khung ngoài của nút Tắt/Mở luôn là màu Navy */ .wgl-menu_outer .hamburger-box, .wgl-mobile-header .hamburger-box, .wgl-menu_outer .hamburger, .wgl-mobile-header .hamburger { background-color: #1b2a57 !important; padding: 5px; /* Tạo thành khối vuông nếu cần */ border-radius: 4px; } /* Các thanh ngang (span) tạo thành dấu X phải là màu Trắng */ .wgl-menu_outer .hamburger-inner, .wgl-menu_outer .hamburger-inner::before, .wgl-menu_outer .hamburger-inner::after, .wgl-menu_outer .hamburger-inner span, .wgl-mobile-header .hamburger.is-active .hamburger-inner, .wgl-mobile-header .hamburger.is-active .hamburger-inner::before, .wgl-mobile-header .hamburger.is-active .hamburger-inner::after, .wgl-mobile-header .hamburger.is-active .hamburger-inner span { background-color: #ffffff !important; color: #ffffff !important; display: block !important; } } /* ========================================== FIX CLOSE BUTTON WHITE BLOCK ISSUE ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ .wgl-menu_outer .close_side_panel .hamburger-box, .wgl-menu_outer .close_side_panel .hamburger-inner, .wgl-menu_outer .close-menu .hamburger-box, .wgl-menu_outer .close-menu .hamburger-inner { background-color: transparent !important; } } /* ========================================== FIX EXACT MOBILE HAMBURGER CLOSE ICON ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ /* Đảm bảo phần chứa nút đóng nền phải khác màu trắng (Navy) để dấu X trắng hiện ra */ .wgl-menu-outer_header { background-color: transparent !important; } .wgl-menu-outer_header .mobile-hamburger-close { background-color: #1b2a57 !important; border-radius: 4px; padding: 5px; } .wgl-menu-outer_header .mobile-hamburger-close .hamburger-box, .wgl-menu-outer_header .mobile-hamburger-close .hamburger-inner { background-color: transparent !important; /* Xóa mọi nền trắng cản trở */ } .wgl-menu-outer_header .mobile-hamburger-close .hamburger-inner span, .wgl-menu-outer_header .mobile-hamburger-close .hamburger-inner::before, .wgl-menu-outer_header .mobile-hamburger-close .hamburger-inner::after { background-color: #ffffff !important; /* Dấu X phải là màu trắng */ } } /* ========================================== MOBILE OPTIMIZATION (SHOPEE / TIKI STYLE) ========================================== */ @media (max-width: 767px) { body .woocommerce .products .product, body div.wgl-products .product, body div.wgl-products .product .woo_product_inner_wrapper { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 8px 0 !important; box-sizing: border-box !important; } body .woocommerce .products .product .woo_product_image, body div.wgl-products .product .woo_product_image, body .woocommerce .products .product .woo_product_image img, body div.wgl-products .product .woo_product_image img { aspect-ratio: 1 / 1 !important; object-fit: contain !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } body .woocommerce .products .product .woo_product_content, body div.wgl-products .product .woo_product_content { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 10px 8px 12px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; flex-grow: 0 !important; box-sizing: border-box !important; } body .woocommerce .products .product .woocommerce-loop-product__title, body div.wgl-products .product .woocommerce-loop-product__title { order: 1 !important; min-height: calc(2 * 1.35em) !important; margin: 0 0 6px 0 !important; padding: 0 !important; overflow: hidden !important; font-size: 14px !important; line-height: 1.35 !important; text-align: left !important; } body .woocommerce .products .product .woocommerce-loop-product__title a, body div.wgl-products .product .woocommerce-loop-product__title a { font-size: 14px !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; height: auto !important; white-space: normal !important; word-break: break-word !important; text-align: left !important; } body .woocommerce .products .product .star-rating, body div.wgl-products .product .star-rating { order: 2 !important; margin: 0 auto 7px !important; padding: 0 !important; height: auto !important; min-height: 0 !important; float: none !important; } body .woocommerce .products .product .price, body div.wgl-products .product .price { order: 3 !important; margin: 0 0 8px 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1.2 !important; display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 4px !important; justify-content: center !important; text-align: center !important; } body .wgl-products .product .price del, body .wgl-products .product .price del .amount { font-size: 11px !important; opacity: 0.7 !important; } body .wgl-products .product .price ins, body .wgl-products .product .price > .amount, body .wgl-products .product .price ins .amount { font-size: 14px !important; font-weight: bold !important; color: #d4925d !important; text-decoration: none !important; } body .woocommerce .products .product .wgl_woo_button_wrapper, body div.wgl-products .product .wgl_woo_button_wrapper { order: 4 !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; position: static !important; inset: auto !important; pointer-events: auto !important; width: 100% !important; justify-content: center !important; } body .woocommerce .products .product .add_to_cart_button, body div.wgl-products .product .add_to_cart_button { height: 40px !important; line-height: 40px !important; min-height: 40px !important; margin: 8px 0 0 0 !important; padding: 0 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; border-radius: 4px !important; font-size: 13px !important; text-transform: none !important; } body .woocommerce .products .product .add_to_cart_button::before, body div.wgl-products .product .add_to_cart_button::before { content: none !important; display: none !important; } body .wgl-products .product .screen-reader-text { display: none !important; } } /* Home featured products spacing */ .people-store-home .store-products .wgl-products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 28px !important; row-gap: 34px !important; align-items: stretch !important; } .people-store-home .store-products .woocommerce ul.products, .people-store-home .store-products ul.products { gap: 28px !important; row-gap: 34px !important; } .people-store-home .store-products ul.products li.product, .people-store-home .store-products .wgl-products .product { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; flex: unset !important; } .people-store-home .store-products .woo_product_inner_wrapper { height: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(27, 42, 87, 0.06); } .people-store-home .store-products .woo_product_content { min-height: 178px !important; height: auto !important; padding: 12px 10px 14px !important; overflow: visible !important; } .people-store-home .store-products .price, .people-store-home .store-products .wgl_woo_button_wrapper { height: auto !important; min-height: 1px !important; overflow: visible !important; } .people-store-home .store-products .price .amount, .people-store-home .store-products .price del, .people-store-home .store-products .price ins { display: inline-flex !important; align-items: baseline !important; min-height: 1.2em !important; } body .people-store-home .store-products .wgl-products .product .woo_product_content { min-height: 178px !important; height: auto !important; overflow: visible !important; } body .people-store-home .store-products .wgl-products .product .price, body .people-store-home .store-products .wgl-products .product .wgl_woo_button_wrapper { height: auto !important; min-height: 1px !important; overflow: visible !important; } .people-store-home .store-products .woo_product_image, .people-store-home .store-products .picture, .people-store-home .store-products .woo_post-link, .people-store-home .store-products .woo_product_image img, .people-store-home .store-products .picture img { border-radius: 8px 8px 0 0 !important; } @media (max-width: 767px) { .people-store-home .store-products .wgl-products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; row-gap: 16px !important; } .people-store-home .store-products .woocommerce ul.products, .people-store-home .store-products ul.products { gap: 12px !important; row-gap: 16px !important; padding: 0 4px !important; } .people-store-home .store-products .woo_product_inner_wrapper { border-radius: 6px; box-shadow: 0 5px 16px rgba(27, 42, 87, 0.08); } .people-store-home .store-products .woo_product_content { min-height: 158px !important; padding: 10px 8px 12px !important; } body .people-store-home .store-products .wgl-products .product .woo_product_content { min-height: 158px !important; } .people-store-home .store-products .woo_product_image, .people-store-home .store-products .picture, .people-store-home .store-products .woo_post-link, .people-store-home .store-products .woo_product_image img, .people-store-home .store-products .picture img { border-radius: 6px 6px 0 0 !important; } } /* Unified WooCommerce product card shape across listing pages. */ .woocommerce ul.products li.product .woo_product_inner_wrapper, .wgl-products .product .woo_product_inner_wrapper { border-radius: 8px !important; overflow: hidden !important; } .woocommerce ul.products li.product .woo_product_image, .woocommerce ul.products li.product .picture, .woocommerce ul.products li.product .woo_post-link, .woocommerce ul.products li.product .woo_product_image img, .woocommerce ul.products li.product .picture img, .wgl-products .product .woo_product_image, .wgl-products .product .picture, .wgl-products .product .woo_post-link, .wgl-products .product .woo_product_image img, .wgl-products .product .picture img { border-radius: 8px 8px 0 0 !important; } @media (max-width: 767px) { .woocommerce ul.products li.product .woo_product_inner_wrapper, .wgl-products .product .woo_product_inner_wrapper { border-radius: 6px !important; } .woocommerce ul.products li.product .woo_product_image, .woocommerce ul.products li.product .picture, .woocommerce ul.products li.product .woo_post-link, .woocommerce ul.products li.product .woo_product_image img, .woocommerce ul.products li.product .picture img, .wgl-products .product .woo_product_image, .wgl-products .product .picture, .wgl-products .product .woo_post-link, .wgl-products .product .woo_product_image img, .wgl-products .product .picture img { border-radius: 6px 6px 0 0 !important; } } /* ========================================== MOBILE CONTAINER SPACING REFINEMENT ========================================== */ @media (max-width: 767px) { body.single-post #main.site-main, body.single-product #main.site-main { padding-top: 24px !important; padding-bottom: 24px !important; } body.single-post .post_featured_bg { min-height: 0 !important; margin-top: -24px !important; margin-bottom: 16px !important; padding-top: 64px !important; padding-bottom: 18px !important; border-radius: 0 0 12px 12px !important; } body.single-post .post_featured_bg .blog-post { padding-top: 0 !important; padding-bottom: 0 !important; } body.single-post .post_featured_bg .blog-post_content, body.single-post article.blog-post { margin-bottom: 24px !important; } body.single-post .row.sidebar_none.single_type-3 { padding-top: 0 !important; } body.single-post .blog-post_content { margin-bottom: 24px !important; } body.single-post h1.blog-post-title { font-size: 28px !important; line-height: 1.28 !important; margin-bottom: 14px !important; } body.single-post .blog-post-meta { flex-wrap: wrap; gap: 8px 14px !important; margin-bottom: 22px !important; padding-bottom: 14px !important; line-height: 1.45 !important; } body.single-post .blog-post-content { font-size: 15px !important; line-height: 1.75 !important; } body.single-post .blog-post-content h2, body.single-post .blog-post-content h3 { margin-top: 26px !important; margin-bottom: 12px !important; } body.single-post .blog-post-content h2 { font-size: 23px !important; } body.single-post .blog-post-content h3 { font-size: 19px !important; } body.single-post .blog-post-content blockquote { margin: 24px 0 !important; padding: 20px !important; font-size: 17px !important; } body.single-post .mindy-post-navigation { margin-top: 22px !important; margin-bottom: 0 !important; } body.single-post .single.related_posts { margin-top: 34px !important; margin-bottom: 0 !important; } body.single-post .related_posts .mindy_module_title { margin-bottom: 18px !important; } body.single-post .related_posts .mindy_module_title h3 { font-size: 20px !important; padding-bottom: 8px !important; } body.single-post .related_posts .blog-post_content { margin-bottom: 20px !important; padding-top: 20px !important; padding-bottom: 20px !important; } body.single-post .comment-respond { margin-top: 18px !important; padding: 24px 18px 28px !important; } body.single-post #comments { margin-top: 30px !important; margin-bottom: 24px !important; } body.single-product .related.products { margin-top: 30px !important; margin-bottom: 10px !important; } body.single-product #main.site-main { padding-bottom: 16px !important; } .elora-media-hero { padding: 46px 18px 34px !important; } .elora-media-hero p { margin-bottom: 8px !important; font-size: 12px !important; letter-spacing: 1px !important; } .elora-media-hero h1 { font-size: 32px !important; line-height: 1.15 !important; margin-bottom: 12px !important; } .elora-media-hero span { font-size: 14px !important; line-height: 1.6 !important; } .elora-media-split-container { gap: 22px !important; padding: 30px 18px 24px !important; } .elora-media-split-title { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 12px !important; } .elora-media-split-content p { font-size: 14px !important; line-height: 1.65 !important; } .elementor-section, .elementor-top-section { margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-section > .elementor-container, .elementor-top-section > .elementor-container { min-height: 0 !important; } } /* ========================================== MOBILE SHOP CATEGORY PILLS COMPACT ========================================== */ @media (max-width: 767px) { body .elora-shop-categories { gap: 8px !important; margin: 0 0 18px !important; padding: 0 2px 8px !important; flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; } body .elora-shop-categories a { flex: 0 0 auto !important; min-height: 30px !important; padding: 6px 12px !important; border-width: 1px !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.2 !important; letter-spacing: 0 !important; white-space: nowrap !important; } } /* ========================================== MOBILE SIDEBAR MENU POLISH ========================================== */ @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ body .wgl-menu_outer, body .mobile_nav_wrapper, body .wgl-mobile-nav, body .header_side_panel { background: #ffffff !important; color: #1B2A57 !important; } body .wgl-menu_outer .primary-nav, body .mobile_nav_wrapper .primary-nav { padding: 10px 18px 24px !important; } body .wgl-menu_outer .logo-menu, body .mobile_nav_wrapper .logo-menu { padding: 16px 0 18px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(27, 42, 87, 0.08) !important; } body .wgl-menu_outer .logo-name, body .mobile_nav_wrapper .logo-name { color: #1B2A57 !important; font-size: 28px !important; letter-spacing: 2px !important; } body .wgl-menu_outer ul.menu, body .mobile_nav_wrapper ul.menu { display: block !important; padding: 8px 0 0 !important; margin: 0 !important; } body .wgl-menu_outer ul li, body .mobile_nav_wrapper ul li { margin: 0 !important; border: 0 !important; background: transparent !important; } body .wgl-menu_outer ul li > a, body .mobile_nav_wrapper ul li > a { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 46px !important; padding: 12px 12px !important; margin: 3px 0 !important; border-radius: 8px !important; background: transparent !important; color: #1B2A57 !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0 !important; } body .wgl-menu_outer ul li > a span, body .mobile_nav_wrapper ul li > a span, body .wgl-menu_outer .item_text, body .mobile_nav_wrapper .item_text { color: inherit !important; background: transparent !important; } body .wgl-menu_outer ul li > a:hover, body .wgl-menu_outer ul li > a:focus, body .wgl-menu_outer ul li > a:active, body .wgl-menu_outer ul li.current-menu-item > a, body .wgl-menu_outer ul li.current-menu-ancestor > a, body .mobile_nav_wrapper ul li > a:hover, body .mobile_nav_wrapper ul li > a:focus, body .mobile_nav_wrapper ul li > a:active, body .mobile_nav_wrapper ul li.current-menu-item > a, body .mobile_nav_wrapper ul li.current-menu-ancestor > a { background: #F6F1EB !important; color: #1B2A57 !important; box-shadow: inset 3px 0 0 #D4925D !important; } body .wgl-menu_outer ul.sub-menu, body .wgl-menu_outer ul.sub-menu > li, body .mobile_nav_wrapper ul.sub-menu, body .mobile_nav_wrapper ul.sub-menu > li { background: #FAF7F2 !important; color: #1B2A57 !important; } body .wgl-menu_outer ul.sub-menu, body .mobile_nav_wrapper ul.sub-menu { margin: 4px 0 8px 10px !important; padding: 6px 0 6px 10px !important; border-left: 1px solid rgba(212, 146, 93, 0.45) !important; border-radius: 0 8px 8px 0 !important; } body .wgl-menu_outer ul.sub-menu li > a, body .mobile_nav_wrapper ul.sub-menu li > a { min-height: 38px !important; padding: 9px 10px !important; margin: 2px 0 !important; color: #40516A !important; font-size: 14px !important; font-weight: 500 !important; background: transparent !important; box-shadow: none !important; } body .wgl-menu_outer ul.sub-menu li > a:hover, body .wgl-menu_outer ul.sub-menu li.current-menu-item > a, body .mobile_nav_wrapper ul.sub-menu li > a:hover, body .mobile_nav_wrapper ul.sub-menu li.current-menu-item > a { background: #ffffff !important; color: #1B2A57 !important; box-shadow: inset 2px 0 0 #D4925D !important; } body .wgl-menu_outer .menu-item__plus, body .wgl-menu_outer .button_switcher, body .mobile_nav_wrapper .menu-item__plus, body .mobile_nav_wrapper .button_switcher { color: #D4925D !important; background: transparent !important; opacity: 1 !important; } } /* ========================================== MOBILE ABOUT PAGE COMPACT ========================================== */ @media (max-width: 767px) { body.page-id-681 .elora-about-wrapper, body.page-id-681 .elora-about, body.page-id-681 .elementor { font-size: 14px !important; } body.page-id-681 .elora-hero { min-height: 220px !important; margin-bottom: 28px !important; border-radius: 10px !important; } body.page-id-681 .elora-hero-content { padding: 28px 18px !important; } body.page-id-681 .elora-hero-content h1, body.page-id-681 .elora-about-hero h1 { font-size: 28px !important; line-height: 1.18 !important; margin-bottom: 10px !important; } body.page-id-681 .elora-hero-content p, body.page-id-681 .elora-about-hero p { font-size: 14px !important; line-height: 1.6 !important; } body.page-id-681 .elora-about-hero { padding: 42px 18px 34px !important; } body.page-id-681 .elora-vision, body.page-id-681 .elora-about-section { grid-template-columns: 1fr !important; gap: 22px !important; margin: 28px auto 0 !important; padding: 0 16px !important; text-align: left !important; } body.page-id-681 .elora-vision-img, body.page-id-681 .elora-vision-img img { border-radius: 10px !important; } body.page-id-681 .elora-vision-text h2, body.page-id-681 .elora-about-content h2 { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 14px !important; } body.page-id-681 .elora-vision-text .content p, body.page-id-681 .elora-about-content p { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 12px !important; } body.page-id-681 .elora-pillars { margin-top: 30px !important; padding: 26px 14px !important; border-radius: 10px !important; } body.page-id-681 .elora-pillars h2 { font-size: 23px !important; line-height: 1.25 !important; margin-bottom: 18px !important; } body.page-id-681 .elora-pillars-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.page-id-681 .elora-pillar-card, body.page-id-681 .elora-feature { min-width: 0 !important; padding: 16px 10px !important; border-radius: 8px !important; box-shadow: 0 6px 18px rgba(27, 42, 87, 0.05) !important; } body.page-id-681 .elora-pillar-icon, body.page-id-681 .elora-feature-icon { font-size: 24px !important; line-height: 1 !important; margin-bottom: 8px !important; } body.page-id-681 .elora-pillar-card h3, body.page-id-681 .elora-feature h3 { font-size: 14px !important; line-height: 1.25 !important; margin-bottom: 6px !important; } body.page-id-681 .elora-pillar-card p, body.page-id-681 .elora-feature p { font-size: 12px !important; line-height: 1.45 !important; } } /* ========================================== MOBILE ELEMENTOR CATEGORY TABS ========================================== */ @media (max-width: 767px) { body .elementor-widget-n-tabs .e-n-tabs-mobile .e-n-tabs-heading, body .elementor-widget-n-tabs .e-n-tabs-heading, body .e-n-tabs-mobile .e-n-tabs-heading { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; border-radius: 8px 8px 0 0 !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } body .elementor-widget-n-tabs .e-n-tabs-heading::-webkit-scrollbar, body .e-n-tabs-mobile .e-n-tabs-heading::-webkit-scrollbar { height: 3px; } body .elementor-widget-n-tabs .e-n-tabs-heading::-webkit-scrollbar-thumb, body .e-n-tabs-mobile .e-n-tabs-heading::-webkit-scrollbar-thumb { background: rgba(27, 42, 87, 0.24); border-radius: 999px; } body .elementor-widget-n-tabs .e-n-tab-title, body .e-n-tabs-mobile .e-n-tab-title { flex: 0 0 auto !important; align-self: stretch !important; min-width: max-content !important; max-width: none !important; width: auto !important; min-height: 44px !important; padding: 12px 16px !important; margin: 0 !important; transform: none !important; border-radius: 0 !important; white-space: nowrap !important; scroll-snap-align: start; } body .elementor-widget-n-tabs .e-n-tab-title-text, body .e-n-tabs-mobile .e-n-tab-title-text { white-space: nowrap !important; font-size: 13px !important; line-height: 1.25 !important; } body .elementor-widget-n-tabs .e-n-tabs-content > [role="tabpanel"], body .e-n-tabs-mobile .e-n-tabs-content > [role="tabpanel"] { display: none !important; } body .elementor-widget-n-tabs .e-n-tabs-content > [role="tabpanel"].e-active, body .e-n-tabs-mobile .e-n-tabs-content > [role="tabpanel"].e-active { display: flex !important; } body .elementor-widget-n-tabs .e-n-tabs-content img, body .e-n-tabs-mobile .e-n-tabs-content img { width: 100% !important; height: auto !important; object-fit: contain !important; } body .elementor-widget-n-tabs .e-n-tabs-heading:has(> .e-n-tab-title:nth-child(3):last-child) .e-n-tab-title, body .e-n-tabs-mobile .e-n-tabs-heading:has(> .e-n-tab-title:nth-child(3):last-child) .e-n-tab-title { flex: 1 1 0 !important; min-width: 0 !important; padding: 11px 6px !important; justify-content: center !important; text-align: center !important; } body .elementor-widget-n-tabs .e-n-tabs-heading:has(> .e-n-tab-title:nth-child(3):last-child) .e-n-tab-title-text, body .e-n-tabs-mobile .e-n-tabs-heading:has(> .e-n-tab-title:nth-child(3):last-child) .e-n-tab-title-text { font-size: 11px !important; line-height: 1.2 !important; overflow: visible !important; text-overflow: clip !important; } } /* Product detail tabs: mobile responsive layout. */ @media (max-width: 767px) { body.single-product .woocommerce-tabs.wc-tabs-wrapper { margin-top: 26px !important; padding: 0 14px !important; overflow: visible !important; } body.single-product .woocommerce-tabs.wc-tabs-wrapper > .swiper, body.single-product .woocommerce-tabs.wc-tabs-wrapper .swiper { width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.single-product .woocommerce-tabs.wc-tabs-wrapper > .swiper::-webkit-scrollbar, body.single-product .woocommerce-tabs.wc-tabs-wrapper .swiper::-webkit-scrollbar { display: none; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: max-content !important; min-width: 100% !important; margin: 0 !important; padding: 4px 0 8px !important; border: 0 !important; background: transparent !important; transform: none !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs .lavalamp-object { display: none !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs li { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; padding: 8px 14px !important; border: 1px solid rgba(27, 42, 87, 0.12) !important; border-radius: 999px !important; background: #fff !important; color: #1B2A57 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-transform: none !important; box-shadow: none !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a { border-color: #D4925D !important; background: #FFF3EF !important; color: #1B2A57 !important; } body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a .count { margin-left: 4px !important; font-size: 11px !important; line-height: 1 !important; } body.single-product .woocommerce-tabs .woocommerce-Tabs-panel { margin: 0 !important; padding: 18px 0 0 !important; font-size: 14px !important; line-height: 1.7 !important; overflow: visible !important; } body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2, body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h3, body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h4, body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h5 { margin: 0 0 14px !important; font-size: 20px !important; line-height: 1.3 !important; } body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p { margin-bottom: 12px !important; } body.single-product .woocommerce-product-attributes.shop_attributes, body.single-product .woocommerce-product-attributes.shop_attributes tbody, body.single-product .woocommerce-product-attributes.shop_attributes tr, body.single-product .woocommerce-product-attributes.shop_attributes th, body.single-product .woocommerce-product-attributes.shop_attributes td { display: block !important; width: 100% !important; box-sizing: border-box !important; } body.single-product .woocommerce-product-attributes.shop_attributes { margin: 0 !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; overflow: hidden !important; } body.single-product .woocommerce-product-attributes.shop_attributes tr { padding: 12px 14px !important; border-bottom: 1px solid rgba(27, 42, 87, 0.08) !important; } body.single-product .woocommerce-product-attributes.shop_attributes tr:last-child { border-bottom: 0 !important; } body.single-product .woocommerce-product-attributes.shop_attributes th, body.single-product .woocommerce-product-attributes.shop_attributes td { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; } body.single-product .woocommerce-product-attributes.shop_attributes th { margin-bottom: 4px !important; color: #1B2A57 !important; font-size: 12px !important; font-weight: 700 !important; } body.single-product .woocommerce-product-attributes.shop_attributes td, body.single-product .woocommerce-product-attributes.shop_attributes td p { color: #5C6778 !important; font-size: 13px !important; line-height: 1.55 !important; } body.single-product #reviews, body.single-product #comments, body.single-product #review_form_wrapper, body.single-product #review_form { width: 100% !important; margin: 0 !important; padding: 0 !important; } body.single-product .woocommerce-Reviews-title { font-size: 18px !important; line-height: 1.35 !important; } body.single-product #reviews ol.commentlist, body.single-product #reviews ol.commentlist li { margin: 0 !important; padding: 0 !important; } body.single-product #reviews .stand_comment, body.single-product #reviews .thiscommentbody { width: 100% !important; margin: 0 0 14px !important; padding: 14px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fff !important; } body.single-product #reviews .thiscommentbody { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; gap: 10px 12px !important; } body.single-product #reviews .commentava { width: 42px !important; height: 42px !important; margin: 0 !important; } body.single-product #reviews .commentava img { width: 42px !important; height: 42px !important; border-radius: 50% !important; object-fit: cover !important; } body.single-product #reviews .comment_info { min-width: 0 !important; } body.single-product #reviews .comment_author_says, body.single-product #reviews .meta-data { font-size: 12px !important; line-height: 1.45 !important; } body.single-product #reviews .comment_content { grid-column: 1 / -1 !important; font-size: 13px !important; line-height: 1.65 !important; } body.single-product #review_form_wrapper { margin-top: 22px !important; } body.single-product #review_form #respond { padding: 18px 14px !important; border-radius: 8px !important; } body.single-product #review_form .comment-form textarea, body.single-product #review_form .comment-form input:not([type="hidden"]):not([type="submit"]) { width: 100% !important; min-height: 44px !important; padding: 11px 12px !important; font-size: 14px !important; } body.single-product #review_form .comment-form textarea { min-height: 118px !important; } body.single-product #review_form .form-submit .submit, body.single-product #review_form button.submit { width: 100% !important; min-height: 42px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 42px !important; } } /* Global compact page header, shared by cart/shop/category/product pages. */ body .page-header { min-height: 0 !important; margin: 12px 24px 28px !important; padding: 14px 22px !important; background: #FFF8F5 !important; border: 1px solid rgba(212, 146, 93, 0.16) !important; border-radius: 8px !important; box-shadow: none !important; } body .page-header .page-header_wrapper, body .page-header .page-header_content { width: min(1170px, 100%) !important; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; text-align: left !important; } body .page-header .page-header_content { display: block !important; } body .page-header .page-header_wrapper .page-header_title, body .page-header .page-header_title { display: none !important; } body .page-header .page-header_wrapper .page-header_breadcrumbs, body .page-header .page-header_breadcrumbs { display: block !important; padding: 0 !important; color: #1B2A57 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; opacity: 1 !important; } body .page-header .breadcrumbs { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-transform: none !important; } body .page-header .breadcrumbs * { letter-spacing: 0 !important; text-transform: none !important; } body .page-header .breadcrumbs > a { flex: 0 0 auto !important; color: #1B2A57 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; } body .page-header .breadcrumbs > a:hover { color: #D4925D !important; } body .page-header .breadcrumbs > .divider { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 6px !important; margin: 0 !important; color: rgba(27, 42, 87, 0.34) !important; font-size: 0 !important; } body .page-header .breadcrumbs > .divider::before { content: "/" !important; font-size: 12px !important; line-height: 1 !important; } body .page-header .breadcrumbs > .divider svg { display: none !important; } body .page-header .breadcrumbs > .current { min-width: 0 !important; overflow: hidden !important; color: #5C6778 !important; font-size: 13px !important; font-weight: 600 !important; padding: 0 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (max-width: 767px) { body .page-header { margin: 8px 14px 18px !important; padding: 10px 12px !important; border-radius: 8px !important; } body .page-header .page-header_breadcrumbs, body .page-header .breadcrumbs > a, body .page-header .breadcrumbs > .current { font-size: 11px !important; line-height: 1.35 !important; } body .page-header .breadcrumbs { gap: 5px !important; flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; } body .page-header .breadcrumbs > .current { flex: 0 1 auto !important; margin-top: 0 !important; display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; } } /* Cart page: compact mobile checkout flow. */ @media (max-width: 767px) { body.woocommerce-cart #main.site-main, body.woocommerce-cart #main > .wgl-container { padding-top: 12px !important; padding-bottom: 28px !important; } body.woocommerce-cart .woocommerce { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 14px !important; box-sizing: border-box !important; } body.woocommerce-cart .woocommerce-cart-form, body.woocommerce-cart .cart-collaterals, body.woocommerce-cart .cart_totals, body.woocommerce-cart .cross-sells { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-cart table.shop_table.cart, body.woocommerce-cart table.shop_table_responsive.cart, body.woocommerce-cart .woocommerce-cart-form__contents { display: block !important; width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; } body.woocommerce-cart table.shop_table.cart thead, body.woocommerce-cart .woocommerce-cart-form__contents thead { display: none !important; } body.woocommerce-cart table.shop_table.cart tbody, body.woocommerce-cart .woocommerce-cart-form__contents tbody { display: block !important; width: 100% !important; } body.woocommerce-cart table.shop_table.cart tr.cart_item, body.woocommerce-cart .woocommerce-cart-form__cart-item { position: relative !important; display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px 12px !important; width: 100% !important; margin: 0 0 12px !important; padding: 12px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 8px 20px rgba(27, 42, 87, 0.04) !important; box-sizing: border-box !important; } body.woocommerce-cart table.shop_table.cart tr.cart_item td, body.woocommerce-cart .woocommerce-cart-form__cart-item td { display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; } body.woocommerce-cart table.shop_table.cart tr.cart_item td::before, body.woocommerce-cart .woocommerce-cart-form__cart-item td::before { content: none !important; display: none !important; } body.woocommerce-cart td.product-remove { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 2 !important; width: 28px !important; height: 28px !important; } body.woocommerce-cart td.product-remove a.remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #FFF3EF !important; } body.woocommerce-cart td.product-thumbnail { grid-row: 1 / span 4 !important; width: 76px !important; } body.woocommerce-cart td.product-thumbnail img { width: 76px !important; height: 76px !important; object-fit: contain !important; border-radius: 8px !important; background: #FAF7F2 !important; } body.woocommerce-cart td.product-name { padding-right: 30px !important; } body.woocommerce-cart td.product-name a { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; color: #1B2A57 !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; text-decoration: none !important; } body.woocommerce-cart td.product-price, body.woocommerce-cart td.product-subtotal { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; color: #5C6778 !important; font-size: 12px !important; line-height: 1.35 !important; } body.woocommerce-cart td.product-price::before { content: "Giá" !important; display: inline !important; color: #7A8494 !important; font-weight: 600 !important; } body.woocommerce-cart td.product-subtotal::before { content: "Tạm tính" !important; display: inline !important; color: #7A8494 !important; font-weight: 600 !important; } body.woocommerce-cart td.product-price .amount, body.woocommerce-cart td.product-subtotal .amount { color: #D4925D !important; font-size: 14px !important; font-weight: 800 !important; } body.woocommerce-cart td.product-quantity { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } body.woocommerce-cart td.product-quantity::before { content: "Số lượng" !important; display: inline !important; color: #7A8494 !important; font-size: 12px !important; font-weight: 600 !important; } body.woocommerce-cart .quantity, body.woocommerce-cart .quantity .quantity-wrapper { margin: 0 !important; height: 34px !important; min-height: 34px !important; } body.woocommerce-cart .quantity .qty, body.woocommerce-cart input.qty { width: 42px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; font-size: 13px !important; text-align: center !important; } body.woocommerce-cart td.actions { display: block !important; width: 100% !important; padding: 4px 0 18px !important; border: 0 !important; } body.woocommerce-cart td.actions .coupon { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; width: 100% !important; margin: 0 0 10px !important; } body.woocommerce-cart td.actions .coupon label { display: none !important; } body.woocommerce-cart #coupon_code, body.woocommerce-cart td.actions .coupon .input-text { width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 13px !important; } body.woocommerce-cart td.actions .button, body.woocommerce-cart td.actions button.button { width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 6px !important; font-size: 13px !important; line-height: 40px !important; } body.woocommerce-cart .cart-collaterals { margin-top: 6px !important; } body.woocommerce-cart .cart_totals { padding: 18px 14px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 8px 20px rgba(27, 42, 87, 0.04) !important; } body.woocommerce-cart .cart_totals h2 { margin: 0 0 14px !important; font-size: 20px !important; line-height: 1.25 !important; } body.woocommerce-cart .cart_totals table, body.woocommerce-cart .cart_totals tbody, body.woocommerce-cart .cart_totals tr, body.woocommerce-cart .cart_totals th, body.woocommerce-cart .cart_totals td { display: block !important; width: 100% !important; box-sizing: border-box !important; } body.woocommerce-cart .cart_totals tr { padding: 10px 0 !important; border-bottom: 1px solid rgba(27, 42, 87, 0.08) !important; } body.woocommerce-cart .cart_totals tr:last-child { border-bottom: 0 !important; } body.woocommerce-cart .cart_totals th, body.woocommerce-cart .cart_totals td { padding: 0 !important; border: 0 !important; text-align: left !important; } body.woocommerce-cart .cart_totals th { margin-bottom: 4px !important; color: #7A8494 !important; font-size: 12px !important; font-weight: 700 !important; } body.woocommerce-cart .cart_totals td, body.woocommerce-cart .cart_totals td p { color: #1B2A57 !important; font-size: 14px !important; line-height: 1.55 !important; } body.woocommerce-cart .cart_totals .order-total td .amount { color: #D4925D !important; font-size: 20px !important; font-weight: 800 !important; } body.woocommerce-cart .wc-proceed-to-checkout { margin: 16px 0 0 !important; padding: 0 !important; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100% !important; min-height: 46px !important; padding: 0 16px !important; border-radius: 6px !important; font-size: 14px !important; line-height: 46px !important; } body.woocommerce-cart .cart-empty, body.woocommerce-cart .wgl_cart_empty_wrapper { max-width: 100% !important; margin: 0 14px 14px !important; padding: 24px 16px !important; border-radius: 8px !important; font-size: 14px !important; line-height: 1.6 !important; text-align: center !important; } body.woocommerce-cart .return-to-shop { margin: 0 14px 24px !important; text-align: center !important; } body.woocommerce-cart .return-to-shop .button { width: 100% !important; max-width: 320px !important; min-height: 42px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 42px !important; } body.woocommerce-cart .wp-block-woocommerce-cart, body.woocommerce-cart .wc-block-cart, body.woocommerce-cart .wc-block-components-sidebar-layout, body.woocommerce-cart .wc-block-cart__main, body.woocommerce-cart .wc-block-cart__sidebar, body.woocommerce-cart .wc-block-components-main, body.woocommerce-cart .wc-block-components-sidebar { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-cart .wc-block-components-sidebar-layout { display: block !important; } body.woocommerce-cart .wc-block-cart-items__row { position: relative !important; display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px 12px !important; margin-bottom: 12px !important; padding: 12px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 8px 20px rgba(27, 42, 87, 0.04) !important; } body.woocommerce-cart .wc-block-cart-item__image { display: block !important; width: 76px !important; grid-row: 1 / span 4 !important; } body.woocommerce-cart .wc-block-cart-item__image img { width: 76px !important; height: 76px !important; object-fit: contain !important; border-radius: 8px !important; background: #FAF7F2 !important; } body.woocommerce-cart .wc-block-cart-item__product { display: block !important; min-width: 0 !important; padding: 0 !important; grid-column: 2 !important; } body.woocommerce-cart .wc-block-cart-item__wrap { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; padding-right: 28px !important; } body.woocommerce-cart .wc-block-cart-item__prices { order: 2 !important; display: block !important; width: 100% !important; margin: 0 !important; } body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price, body.woocommerce-cart .wc-block-cart-item__prices .wc-block-formatted-money-amount { color: #D4925D !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 800 !important; text-align: left !important; } body.woocommerce-cart .wc-block-components-product-metadata { order: 3 !important; margin: 0 !important; } body.woocommerce-cart .wc-block-components-product-metadata, body.woocommerce-cart .wc-block-components-product-metadata p { color: #6C7482 !important; font-size: 11px !important; line-height: 1.45 !important; } body.woocommerce-cart .wc-block-components-product-metadata__description { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } body.woocommerce-cart .wc-block-cart-item__quantity { order: 4 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 4px 0 0 !important; } body.woocommerce-cart .wc-block-components-quantity-selector { --quantity-height: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; } body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { width: 34px !important; height: 34px !important; font-size: 13px !important; } body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { width: 28px !important; height: 34px !important; } body.woocommerce-cart .wc-block-cart-item__remove-link { position: absolute !important; top: 8px !important; right: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #FFF3EF !important; color: #1B2A57 !important; } body.woocommerce-cart .wc-block-cart-item__remove-link::before, body.woocommerce-cart .wc-block-cart-item__remove-link::after { content: none !important; display: none !important; } body.woocommerce-cart .wc-block-cart-item__remove-link svg { display: block !important; width: 16px !important; height: 16px !important; fill: currentColor !important; } body.woocommerce-cart .wc-block-cart-item__total { display: none !important; grid-column: 1 / -1 !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 2px 0 0 !important; padding: 10px 0 0 !important; border-top: 1px solid rgba(27, 42, 87, 0.08) !important; text-align: left !important; } body.woocommerce-cart .wc-block-cart-item__total::before { content: "Tạm tính" !important; color: #7A8494 !important; font-size: 12px !important; font-weight: 700 !important; } body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: block !important; text-align: right !important; } body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price, body.woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount { color: #D4925D !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 800 !important; } body.woocommerce-cart .wc-block-components-product-name { order: 1 !important; display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; margin: 0 !important; padding: 0 !important; padding-right: 0 !important; color: #1B2A57 !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; text-decoration: none !important; } body.woocommerce-cart .wc-block-cart__totals-title, body.woocommerce-cart .wc-block-components-totals-wrapper { padding-right: 0 !important; padding-left: 0 !important; } } /* My Account mobile refinement and header sidebar account shortcuts. */ .elora-mobile-account-actions { display: none; } @media (max-width: 1200px) { /* khớp breakpoint mobile-header của theme, xem chú thích ở block đầu */ body .wgl-menu_outer .elora-mobile-account-actions, body .mobile_nav_wrapper .elora-mobile-account-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 18px 6px; padding: 14px 0 0; border-top: 1px solid rgba(27, 42, 87, 0.10); } body .wgl-menu_outer .elora-mobile-account-link, body .mobile_nav_wrapper .elora-mobile-account-link { display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 10px !important; border: 1px solid rgba(27, 42, 87, 0.12) !important; border-radius: 8px; background: #fff7f3 !important; color: #1b2a57 !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: center; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; } body .wgl-menu_outer .elora-mobile-account-link:hover, body .wgl-menu_outer .elora-mobile-account-link:focus, body .mobile_nav_wrapper .elora-mobile-account-link:hover, body .mobile_nav_wrapper .elora-mobile-account-link:focus { background: #fff3ef !important; border-color: rgba(212, 146, 93, 0.45) !important; color: #1b2a57 !important; } body .wgl-menu_outer .elora-mobile-account-link--logout, body .mobile_nav_wrapper .elora-mobile-account-link--logout { background: #ffffff !important; color: #a33b36 !important; } body .wgl-menu_outer .elora-mobile-account-link--logout:hover, body .wgl-menu_outer .elora-mobile-account-link--logout:focus, body .mobile_nav_wrapper .elora-mobile-account-link--logout:hover, body .mobile_nav_wrapper .elora-mobile-account-link--logout:focus { background: #fff3ef !important; border-color: rgba(163, 59, 54, 0.28) !important; color: #a33b36 !important; } body .wgl-menu_outer .elora-mobile-account-link span, body .mobile_nav_wrapper .elora-mobile-account-link span { color: inherit !important; } body .wgl-menu_outer .elora-mobile-account-icon, body .mobile_nav_wrapper .elora-mobile-account-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(27, 42, 87, 0.08); font-size: 10px; font-weight: 900; line-height: 1; } body .wgl-menu_outer .elora-mobile-account-link:hover .elora-mobile-account-icon, body .wgl-menu_outer .elora-mobile-account-link:focus .elora-mobile-account-icon, body .mobile_nav_wrapper .elora-mobile-account-link:hover .elora-mobile-account-icon, body .mobile_nav_wrapper .elora-mobile-account-link:focus .elora-mobile-account-icon { background: rgba(212, 146, 93, 0.16); color: inherit !important; } } @media (max-width: 767px) { body.woocommerce-account #main-content, body.woocommerce-account .wgl-container, body.woocommerce-account .container, body.woocommerce-account .row { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 12px !important; padding-left: 12px !important; } body.woocommerce-account #main-content { padding-top: 14px !important; padding-bottom: 42px !important; } body.woocommerce-account main .woocommerce:not(#customer_login):not(.woocommerce-account-auth) { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.woocommerce-account .woocommerce-notices-wrapper, body.woocommerce-account .woocommerce-error, body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message { width: 100% !important; max-width: 100% !important; margin: 0 0 12px !important; padding: 12px 14px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 1.55 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation { position: static !important; width: 100% !important; margin: 0 0 14px !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 8px 24px rgba(27, 42, 87, 0.06) !important; } body.woocommerce-account .woocommerce-MyAccount-navigation::before { height: 4px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user { gap: 10px !important; padding: 12px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-avatar { width: 38px !important; height: 38px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__name { font-size: 13px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-account-user__label { font-size: 10px !important; letter-spacing: 0.03em !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 10px !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li, body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { width: auto !important; margin: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li a { justify-content: flex-start !important; min-height: 40px !important; padding: 8px 10px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fffaf7 !important; color: #1b2a57 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a { border-color: #1b2a57 !important; background: #1b2a57 !important; color: #ffffff !important; } body.woocommerce-account .woocommerce-MyAccount-navigation .elora-nav-icon { width: 16px !important; height: 16px !important; opacity: 0.9 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { border-color: rgba(163, 59, 54, 0.18) !important; background: #ffffff !important; color: #a33b36 !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 16px 14px !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(27, 42, 87, 0.06) !important; overflow: hidden !important; } body.woocommerce-account .woocommerce-MyAccount-content, body.woocommerce-account .woocommerce-MyAccount-content p, body.woocommerce-account .woocommerce-MyAccount-content address, body.woocommerce-account .woocommerce-MyAccount-content li { font-size: 13px !important; line-height: 1.65 !important; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3 { margin: 0 0 12px !important; font-size: 18px !important; line-height: 1.35 !important; } body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-MyAccount-content button, body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] { min-height: 40px !important; padding: 0 14px !important; border-radius: 6px !important; font-size: 12px !important; line-height: 40px !important; } body.woocommerce-account .woocommerce-MyAccount-content fieldset, body.woocommerce-account .woocommerce-MyAccount-content form { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-account .woocommerce-MyAccount-content .form-row, body.woocommerce-account .woocommerce-MyAccount-content .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content .form-row-last { float: none !important; width: 100% !important; margin: 0 0 12px !important; } body.woocommerce-account .woocommerce-MyAccount-content input.input-text, body.woocommerce-account .woocommerce-MyAccount-content textarea, body.woocommerce-account .woocommerce-MyAccount-content select { width: 100% !important; min-height: 44px !important; border-radius: 6px !important; font-size: 14px !important; } body.woocommerce-account .woocommerce-orders-table, body.woocommerce-account .woocommerce-table { display: block !important; width: 100% !important; border: 0 !important; overflow: visible !important; } body.woocommerce-account .woocommerce-orders-table thead, body.woocommerce-account .woocommerce-table thead { display: none !important; } body.woocommerce-account .woocommerce-orders-table tbody, body.woocommerce-account .woocommerce-orders-table tr, body.woocommerce-account .woocommerce-orders-table td, body.woocommerce-account .woocommerce-table tbody, body.woocommerce-account .woocommerce-table tr, body.woocommerce-account .woocommerce-table td { display: block !important; width: 100% !important; } body.woocommerce-account .woocommerce-orders-table tr, body.woocommerce-account .woocommerce-table tr { margin: 0 0 10px !important; padding: 12px !important; border: 1px solid rgba(27, 42, 87, 0.08) !important; border-radius: 8px !important; background: #fffaf7 !important; } body.woocommerce-account .woocommerce-orders-table td, body.woocommerce-account .woocommerce-table td { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding: 7px 0 !important; border: 0 !important; font-size: 13px !important; line-height: 1.45 !important; text-align: right !important; } body.woocommerce-account .woocommerce-orders-table td::before, body.woocommerce-account .woocommerce-table td::before { content: attr(data-title); flex: 0 0 38%; color: #1b2a57; font-size: 11px; font-weight: 800; line-height: 1.45; text-align: left; text-transform: uppercase; } body.woocommerce-account #customer_login { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.woocommerce-account #customer_login > .u-column1, body.woocommerce-account #customer_login > .u-column2, body.woocommerce-account #customer_login > .col-1, body.woocommerce-account #customer_login > .col-2 { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 14px !important; padding: 18px 14px !important; border-radius: 10px !important; } body.woocommerce-account #customer_login h2 { margin-bottom: 14px !important; font-size: 20px !important; line-height: 1.3 !important; } body.woocommerce-account #customer_login .woocommerce-form { padding: 0 !important; } body.woocommerce-account #customer_login .form-row { margin-bottom: 12px !important; } body.woocommerce-account #customer_login input.input-text, body.woocommerce-account #customer_login .woocommerce-Input { min-height: 44px !important; padding: 0 12px !important; border-radius: 6px !important; font-size: 14px !important; } body.woocommerce-account #customer_login .woocommerce-form-login__submit, body.woocommerce-account #customer_login .woocommerce-form-register__submit { min-height: 44px !important; margin-top: 12px !important; border-radius: 6px !important; font-size: 13px !important; line-height: 44px !important; } } body.woocommerce-account .elora-account-address-note { margin: 0 0 18px !important; color: #435365 !important; font-size: 14px !important; line-height: 1.65 !important; } body.woocommerce-account .elora-account-addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } body.woocommerce-account .elora-account-address-card { float: none !important; width: 100% !important; max-width: 100% !important; padding: 18px !important; border: 1px solid rgba(27, 42, 87, 0.09) !important; border-radius: 10px !important; background: #fffaf7 !important; } body.woocommerce-account .elora-account-address-card .woocommerce-Address-title { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 12px !important; } body.woocommerce-account .elora-account-address-card h2 { margin: 0 !important; color: #1b2a57 !important; font-size: 18px !important; line-height: 1.3 !important; } body.woocommerce-account .elora-account-address-card .edit { flex-shrink: 0 !important; padding: 7px 10px !important; border-radius: 6px !important; background: #1b2a57 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; text-decoration: none !important; } body.woocommerce-account .elora-account-address-card address { margin: 0 !important; color: #435365 !important; font-size: 14px !important; font-style: normal !important; line-height: 1.75 !important; } /* Account addresses: reset WooCommerce's legacy col-1/col-2 layout and keep * both desktop cards aligned regardless of address length. */ @media (min-width: 768px) { body.woocommerce-account .woocommerce-MyAccount-content .elora-account-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important; align-items: stretch !important; gap: 24px !important; width: 100% !important; margin: 22px 0 0 !important; } /* WooCommerce adds clearfix pseudo-elements to .col2-set. In a grid they * become real grid items and push the two address cards onto separate rows. */ body.woocommerce-account .woocommerce-MyAccount-content .elora-account-addresses::before, body.woocommerce-account .woocommerce-MyAccount-content .elora-account-addresses::after { content: none !important; display: none !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card, body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card.col-1, body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card.col-2 { position: relative !important; display: flex !important; float: none !important; flex-direction: column !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 24px !important; overflow: hidden !important; border: 1px solid rgba(27, 42, 87, 0.12) !important; border-radius: 16px !important; box-sizing: border-box !important; background: #ffffff !important; box-shadow: 0 10px 28px rgba(27, 42, 87, 0.08) !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card::before { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; height: 4px !important; background: linear-gradient(90deg, #1b2a57, #d4925d) !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card .woocommerce-Address-title { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 18px !important; width: 100% !important; min-height: 44px !important; margin: 0 0 18px !important; padding: 0 0 16px !important; border-bottom: 1px solid rgba(27, 42, 87, 0.1) !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card h2 { min-width: 0 !important; margin: 0 !important; font-size: 20px !important; line-height: 1.35 !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card .edit { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 176px !important; min-height: 38px !important; padding: 8px 14px !important; border: 1px solid #1b2a57 !important; border-radius: 999px !important; box-sizing: border-box !important; background: #1b2a57 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card .edit:hover, body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card .edit:focus { background: #d4925d !important; border-color: #d4925d !important; color: #ffffff !important; } body.woocommerce-account .woocommerce-MyAccount-content .elora-account-address-card address { display: block !important; flex: 1 1 auto !important; width: 100% !important; margin: 0 !important; padding: 18px 20px !important; border-radius: 12px !important; box-sizing: border-box !important; background: #fff8f4 !important; color: #435365 !important; font-size: 15px !important; line-height: 1.8 !important; } } @media (max-width: 767px) { body.woocommerce-account .elora-account-address-note { margin-bottom: 12px !important; font-size: 13px !important; } body.woocommerce-account .elora-account-addresses { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } body.woocommerce-account .elora-account-address-card { padding: 14px !important; border-radius: 8px !important; } body.woocommerce-account .elora-account-address-card .woocommerce-Address-title { align-items: flex-start !important; margin-bottom: 10px !important; } body.woocommerce-account .elora-account-address-card h2 { font-size: 16px !important; } body.woocommerce-account .elora-account-address-card .edit { max-width: 46%; padding: 6px 8px !important; font-size: 11px !important; text-align: center !important; } body.woocommerce-account .elora-account-address-card address { font-size: 13px !important; line-height: 1.65 !important; } } /* Cart count only: disable mini cart popup/dropdown and keep a clear badge. */ body .woo_mini_cart, body .wgl-theme-header .woo_mini_cart, body .wgl-mini-cart, body .wgl-cart-mini, body #wgl-mini-cart, body .woocommerce-mini-cart-wrapper, body .elementor-menu-cart__container, body .elementor-menu-cart__main, body .widget_shopping_cart, body .widget_shopping_cart_content { display: none !important; visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; transform: none !important; } body .wgl-cart, body .elementor-cart, body .people-store-actions a[href*="cart"], body .elora-cart-count-target { position: relative !important; } body .elora-cart-badge { position: absolute !important; top: -5px !important; right: -7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border: 2px solid #ffffff !important; border-radius: 999px !important; background: #d4925d !important; color: #ffffff !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; box-shadow: 0 4px 10px rgba(27, 42, 87, 0.18) !important; z-index: 4 !important; } body .elora-cart-badge.is-empty { display: none !important; } body .people-store-actions .elora-cart-badge { top: 8px !important; right: 8px !important; } body .people-store-actions .elora-cart-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; margin-left: 5px !important; padding: 0 6px !important; border-radius: 999px !important; background: #d4925d !important; color: #ffffff !important; font-size: 11px !important; font-style: normal !important; font-weight: 800 !important; line-height: 1 !important; } /* Desktop cart: use the SVG supplied by WooCommerce Blocks, not the * additional delete mask from the parent theme. Keep the mobile rules above * unchanged. */ @media (min-width: 768px) { body.woocommerce-cart .wc-block-cart-item__remove-link::before, body.woocommerce-cart .wc-block-cart-item__remove-link::after { content: none !important; display: none !important; } body.woocommerce-cart .wc-block-cart-item__remove-link svg { display: block !important; } /* The desktop store header already prints the count inside . * Suppress only the second badge injected for icon-style cart links. */ body .people-store-actions .elora-cart-badge { display: none !important; } } @media (max-width: 767px) { body .elora-cart-badge { top: -4px !important; right: -5px !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; font-size: 9px !important; } } /* Cart empty state: present the WooCommerce "New in store" block with the * same card language used by the shop instead of leaving the products as a * bare block grid. This is scoped to the cart page only. */ body.woocommerce-cart .wp-block-woocommerce-product-new { margin-top: 24px !important; } body.woocommerce-cart .wp-block-woocommerce-product-new ul.wc-block-grid__products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 28px !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product { display: flex !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wgl-block-grid_product_inner_wrapper { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; border: 1px solid rgba(27, 42, 87, 0.12) !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 8px 24px rgba(27, 42, 87, 0.08) !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wgl-block-grid_product_inner_wrapper:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 32px rgba(27, 42, 87, 0.14) !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .woo_product_image, body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-image { width: 100% !important; margin: 0 !important; background: #f8f7f5 !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-image img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wgl-block-grid_product_content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: stretch !important; padding: 16px 18px 18px !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-title, body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-title_link { display: -webkit-box !important; min-height: 2.8em !important; margin: 0 0 8px !important; overflow: hidden !important; color: #1b2a57 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-price { margin: 0 0 14px !important; color: #d4925d !important; font-size: 15px !important; font-weight: 800 !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wgl_woo_button_wrapper { position: static !important; display: flex !important; width: 100% !important; margin: auto 0 0 !important; opacity: 1 !important; visibility: visible !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-add-to-cart, body.woocommerce-cart .wp-block-woocommerce-product-new .add_to_cart_button { width: 100% !important; margin: 0 !important; } @media (max-width: 991px) { body.woocommerce-cart .wp-block-woocommerce-product-new ul.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } } @media (max-width: 480px) { body.woocommerce-cart .wp-block-woocommerce-product-new ul.wc-block-grid__products { gap: 10px !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wgl-block-grid_product_content { padding: 12px 10px 14px !important; } body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-title, body.woocommerce-cart .wp-block-woocommerce-product-new .wc-block-grid__product-title_link { font-size: 13px !important; } }