/* ========================================================= Thienha WooCommerce — giao diện khớp thương hiệu Palette: navy #234992 (tiêu đề) · coral #ff516f→#ef3958 (CTA/giá/badge) Nền hồng nhạt #fff4f6 · viền #f4d5db · font Konde (display) + Roboto (body) Scope: body.thienha-woo (thêm ở inc/woocommerce.php) ========================================================= */ :root { --th-navy: #234992; --th-navy-soft: #8199ca; --th-coral: #ff516f; --th-coral-dark:#ef3958; --th-coral-deep:#eb3152; --th-rose: #fff4f6; --th-rose-2: #fff8fa; --th-border: #f4d5db; --th-ink: #33384a; --th-muted: #8a90a2; --th-radius: 18px; --th-shadow: 0 6px 20px rgba(35,73,146,.07); --th-shadow-hi: 0 14px 30px rgba(239,57,88,.18); --th-grad: linear-gradient(135deg, var(--th-coral) 0%, var(--th-coral-dark) 100%); } .thienha-woo { color: var(--th-ink); } /* Chỉ bóp container của KHỐI NỘI DUNG Woo (#content do inc/woocommerce.php mở). Không dùng body.thienha-woo .container vì sẽ bóp cả header/footer, lệch với trang chủ. */ #content.thienha-woo { background-color: #f0f6ff; } #content.thienha-woo .container { max-width: 1200px; } /* ---- Nút dùng chung (mọi nút WooCommerce) ---- */ .thienha-woo .button, .thienha-woo button.button, .thienha-woo a.button, .thienha-woo .single_add_to_cart_button, .thienha-woo .checkout-button, .thienha-woo .wc-proceed-to-checkout .button, .thienha-woo #place_order, .thienha-woo .product-card__actions .add_to_cart_button { background: var(--th-grad) !important; color: #fff !important; border: none !important; border-radius: 999px !important; padding: .7em 1.5em !important; font-weight: 600 !important; letter-spacing: .2px; box-shadow: 0 6px 16px rgba(239,57,88,.22); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; text-transform: none; text-shadow: none; } .thienha-woo .button:hover, .thienha-woo button.button:hover, .thienha-woo a.button:hover, .thienha-woo .single_add_to_cart_button:hover, .thienha-woo .checkout-button:hover, .thienha-woo #place_order:hover, .thienha-woo .product-card__actions .add_to_cart_button:hover { filter: brightness(1.03); transform: translateY(-2px); box-shadow: var(--th-shadow-hi); } .thienha-woo .button:focus-visible, .thienha-woo #place_order:focus-visible, .thienha-woo .single_add_to_cart_button:focus-visible { outline: 3px solid rgba(35,73,146,.35); outline-offset: 2px; } /* Nút phụ dạng viền (Xem chi tiết, Liên hệ tư vấn) */ .thienha-woo .btn-outline-primary, .thienha-woo .btn-consult { background: #fff !important; color: var(--th-coral-dark) !important; border: 1.5px solid var(--th-coral) !important; border-radius: 999px !important; font-weight: 600; transition: all .18s ease; } .thienha-woo .btn-outline-primary:hover, .thienha-woo .btn-consult:hover { background: var(--th-rose) !important; color: var(--th-coral-deep) !important; border-color: var(--th-coral-dark) !important; } /* ---- Thông báo / breadcrumb ---- */ .thienha-woo .woocommerce-message, .thienha-woo .woocommerce-info, .thienha-woo .woocommerce-error { background: var(--th-rose); border-top: 3px solid var(--th-coral); border-radius: 12px; color: var(--th-ink); } .thienha-woo .woocommerce-breadcrumb { color: var(--th-muted); font-size: 13px; margin-bottom: 24px; } .thienha-woo .woocommerce-breadcrumb a { color: var(--th-navy-soft); text-decoration: none; } .thienha-woo .woocommerce-breadcrumb a:hover { color: var(--th-coral); } /* ---- Trung hoà CSS bảng toàn cục của style.css (hàng đầu đỏ, viền đỏ) trong khu vực WooCommerce — từng bảng tự style lại bên dưới ---- */ .thienha-woo table { border: none; } .thienha-woo table tr:nth-child(1) { background: transparent; color: inherit; text-align: inherit; } .thienha-woo table tr:nth-child(1) td { color: inherit; } .thienha-woo table td { border: none; } /* ---- Tiêu đề trang (Thanh toán / Đơn hàng đã nhận) khớp brand ---- */ body.thienha-woo .module-title { font-family: 'Konde', 'Roboto', sans-serif; color: var(--th-navy); font-size: 30px; margin-bottom: 28px; } @media (max-width: 575.98px) { body.thienha-woo .module-title { font-size: 24px; margin-bottom: 20px; } } /* ========================================================= 0) GRID DANH MỤC (dưới breadcrumb, thay cho sidebar cũ) ========================================================= */ .thienha-woo .thienha-cat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; margin: 0 0 32px; } .thienha-woo .thienha-cat-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; text-decoration: none; color: var(--th-navy); background: #fff; border-radius: 16px; padding: 14px 10px; box-shadow: var(--th-shadow); transition: transform .2s ease, box-shadow .2s ease; } .thienha-woo .thienha-cat-card:hover { transform: translateY(-4px); box-shadow: var(--th-shadow-hi); } .thienha-woo .thienha-cat-card__img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--th-rose-2); } .thienha-woo .thienha-cat-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .thienha-woo .thienha-cat-card__name { font-weight: 600; font-size: 14px; line-height: 1.35; } @media (max-width: 575.98px){ .thienha-woo .thienha-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } .thienha-woo .thienha-cat-card__name { font-size: 13px; } } /* ========================================================= 1) DANH SÁCH SẢN PHẨM (shop / archive) ========================================================= */ .thienha-woo ul.products { display: grid; gap: 24px; list-style: none; margin: 0; padding: 0; } .thienha-woo ul.products { grid-template-columns: repeat(4, 1fr); } /* Reset kích thước/float mặc định của WooCommerce để card lấp đầy ô lưới */ .thienha-woo ul.products li.product, .thienha-woo ul.products li.product-card-col { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; } .thienha-woo ul.products li.product::before { display: none; } /* Tắt clearfix ::before/::after của ul.products (nếu không sẽ thành grid item rỗng chiếm ô đầu) */ .thienha-woo ul.products::before, .thienha-woo ul.products::after { display: none !important; content: none !important; } @media (max-width: 991.98px){ .thienha-woo ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px){ .thienha-woo ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .thienha-woo .product-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--th-radius); overflow: hidden; box-shadow: var(--th-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .thienha-woo .product-card:hover { transform: translateY(-4px); border-color: var(--th-coral); } .thienha-woo .product-card__thumb { position: relative; background: var(--th-rose-2); aspect-ratio: 1 / 1; overflow: hidden; /* Tạo stacking context riêng để badge-sale (z-index:2) không leo lên trên các thanh cố định (header/nav dưới) khi cuộn trên mobile. */ isolation: isolate; } .thienha-woo .product-card__thumb a { display: block; height: 100%; } .thienha-woo .product-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .thienha-woo .product-card:hover .product-card__thumb img { transform: scale(1.05); } .thienha-woo .badge-sale { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--th-grad); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(239,57,88,.3); } .thienha-woo .product-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .thienha-woo .product-card__title { font-size: 15px; line-height: 1.45; margin: 0; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; } .thienha-woo .product-card__title a { color: var(--th-navy); text-decoration: none; transition: color .15s; } .thienha-woo .product-card__title a:hover { color: var(--th-coral); } .thienha-woo .product-card__price { color: var(--th-coral-dark); font-weight: 700; font-size: 17px; } .thienha-woo .product-card__price del { color: var(--th-muted); font-weight: 400; font-size: 14px; margin-right: 6px; } .thienha-woo .product-card__price ins { text-decoration: none; } .thienha-woo .product-card__actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .thienha-woo .product-card__actions .button, .thienha-woo .product-card__actions .btn { flex: 1 1 auto; text-align: center; font-size: 13px; padding: .55em 1em !important; } /* Thanh công cụ trên lưới */ .thienha-woo .shop-toolbar, .thienha-woo .woocommerce-result-count, .thienha-woo .woocommerce-ordering { margin-bottom: 4px; } .thienha-woo .woocommerce-result-count { color: var(--th-muted); font-size: 14px; } .thienha-woo .woocommerce-ordering select, .thienha-woo select.orderby { border: 1px solid var(--th-border); border-radius: 999px; padding: 8px 16px; color: var(--th-navy); background: #fff; font-size: 14px; } /* Sidebar lọc */ .thienha-woo .thienha-shop-sidebar { background-color: #fff; border-radius: 25px; padding: 24px 12px; } .thienha-woo .thienha-shop-sidebar .widget { margin-bottom: 28px; } .thienha-woo .thienha-shop-sidebar .widget-title { font-family: 'Konde', 'Roboto', sans-serif; font-size: 18px; font-weight: 700; color: var(--th-navy); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--th-rose); position: relative; } .thienha-woo .thienha-shop-sidebar .widget-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 42px; height: 2px; background: var(--th-grad); } .thienha-woo .thienha-shop-sidebar .cat-list { margin: 0; padding: 0; } .thienha-woo .thienha-shop-sidebar .cat-list li { list-style: none; padding: 8px 0; border-bottom: 1px solid #f3f3f6; } .thienha-woo .thienha-shop-sidebar .cat-list a { color: var(--th-ink); text-decoration: none; display: flex; justify-content: space-between; transition: color .15s, padding .15s; } .thienha-woo .thienha-shop-sidebar .cat-list a span { color: var(--th-muted); font-size: 13px; } .thienha-woo .thienha-shop-sidebar .cat-list a:hover { color: var(--th-coral); padding-left: 4px; } /* Slider lọc giá */ .thienha-woo .price_slider_wrapper .ui-slider { background: var(--th-border); border-radius: 999px; height: 5px; } .thienha-woo .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--th-grad); } .thienha-woo .price_slider_wrapper .ui-slider .ui-slider-handle { background: #fff; border: 3px solid var(--th-coral); border-radius: 50%; width: 16px; height: 16px; top: -6px; } .thienha-woo .price_slider_amount .button { font-size: 13px; } .thienha-woo .price_slider_amount .price_label { color: var(--th-ink); font-size: 13px; } /* Widget lọc theo thuộc tính (layered nav) */ .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list { margin: 0; padding: 0; list-style: none; border: none; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item { list-style: none; padding: 7px 0; border-bottom: 1px solid #f3f3f6; margin: 0; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item a { color: var(--th-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .15s, padding .15s; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item a::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--th-border); border-radius: 5px; flex: 0 0 auto; transition: all .15s; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item a:hover { color: var(--th-coral); } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item a:hover::before { border-color: var(--th-coral); } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item .count { color: var(--th-muted); font-size: 13px; margin-left: auto; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a { color: var(--th-coral-dark); font-weight: 600; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before { background: var(--th-grad); border-color: var(--th-coral-dark); box-shadow: inset 0 0 0 2px #fff; } /* Khối "Bộ lọc đang chọn" */ .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-filters { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-filters li { list-style: none; margin: 0; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-filters a { display: inline-flex; align-items: center; gap: 6px; background: var(--th-rose); color: var(--th-coral-dark); border: 1px solid var(--th-border); border-radius: 999px; padding: 4px 12px; font-size: 13px; text-decoration: none; } .thienha-woo .thienha-shop-sidebar .woocommerce-widget-layered-nav-filters a:hover { background: var(--th-coral); color: #fff; border-color: var(--th-coral); } /* Bố cục 2 cột: bộ lọc trái · lưới phải (desktop) */ .thienha-woo .thienha-shop-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; } .thienha-woo .thienha-shop-main { min-width: 0; } .thienha-woo .thienha-shop-aside { position: sticky; top: 20px; order: -1; } /* Có cột lọc chiếm 280px -> lưới còn 3 cột trên desktop cho khỏi tràn */ @media (min-width: 992px) { .thienha-woo .thienha-shop-main ul.products { grid-template-columns: repeat(3, 1fr); } } /* Đầu bộ lọc + nút đóng (nút đóng chỉ dùng ở panel mobile) */ .thienha-woo .thienha-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .thienha-woo .thienha-filters__heading { font-family: 'Konde', 'Roboto', sans-serif; font-size: 18px; font-weight: 700; color: var(--th-navy); margin: 0; display: inline-flex; align-items: center; gap: 8px; } .thienha-woo .thienha-filters__heading i { color: var(--th-coral); font-size: 16px; } .thienha-woo .thienha-filters__close { display: none; background: none; border: none; font-size: 26px; line-height: 1; color: var(--th-muted); cursor: pointer; padding: 0 4px; } .thienha-woo .thienha-filters__close:hover { color: var(--th-coral); } /* Chip "đang chọn" + xóa lọc */ .thienha-woo .thienha-filters__active { margin-bottom: 18px; } .thienha-woo .thienha-filters__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .thienha-woo .thienha-filters__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--th-rose); color: var(--th-coral-dark); border: 1px solid var(--th-border); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; transition: all .15s; } .thienha-woo .thienha-filters__chip:hover { background: var(--th-coral); color: #fff; border-color: var(--th-coral); } .thienha-woo .thienha-filters__clear { background: none; border: none; color: var(--th-muted); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; } .thienha-woo .thienha-filters__clear:hover { color: var(--th-coral); } /* Nhóm + danh sách lựa chọn */ .thienha-woo .thienha-filters__group { margin-bottom: 22px; } .thienha-woo .thienha-filters__list { list-style: none; margin: 0; padding: 0; } .thienha-woo .thienha-filters__item { list-style: none; margin: 0; padding: 5px 0; } .thienha-woo .thienha-filters__label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--th-ink); } .thienha-woo .thienha-filters__check, .thienha-woo .thienha-filters__price { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--th-coral); cursor: pointer; margin: 0; } .thienha-woo .thienha-filters__label:hover .thienha-filters__text { color: var(--th-coral); } .thienha-woo .thienha-filters__check:checked ~ .thienha-filters__text, .thienha-woo .thienha-filters__price:checked ~ .thienha-filters__text { color: var(--th-coral-dark); font-weight: 600; } /* Nút "Bộ lọc sản phẩm" — chỉ hiện ≤991px */ .thienha-woo .thienha-filter-toggle { display: none; width: 100%; align-items: center; justify-content: space-between; gap: 10px; background: #fff; color: var(--th-coral-dark); border: 1.5px solid var(--th-coral); border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 15px; margin-bottom: 16px; transition: background .15s ease; } .thienha-woo .thienha-filter-toggle:hover { background: var(--th-rose); } .thienha-woo .thienha-filter-toggle .tft-caret { transition: transform .2s ease; } /* Backdrop panel mobile (được JS tạo) */ .thienha-filters-backdrop { position: fixed; inset: 0; background: rgba(20, 25, 40, .45); z-index: 1049; opacity: 0; visibility: hidden; transition: opacity .28s ease; } .thienha-filters-backdrop.is-open { opacity: 1; visibility: visible; } body.thienha-filters-open { overflow: hidden; } @media (max-width: 991.98px) { .thienha-woo .thienha-shop-layout { display: block; } .thienha-woo .thienha-filter-toggle { display: flex; } /* Cột lọc -> panel trượt từ phải */ .thienha-woo .thienha-shop-aside { position: fixed; top: 0; right: 0; z-index: 1050; width: min(88vw, 360px); height: 100%; background: #fff; box-shadow: -8px 0 30px rgba(0, 0, 0, .15); padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .28s ease; visibility: hidden; } .thienha-woo .thienha-shop-aside.is-open { transform: translateX(0); visibility: visible; } .thienha-woo .thienha-shop-aside .thienha-filters { padding: 0; border-radius: 0; background: transparent; } .thienha-woo .thienha-filters__close { display: inline-flex; } } /* Toolbar kết quả + sắp xếp: xuống hàng gọn trên màn hẹp */ .thienha-woo .shop-toolbar { flex-wrap: wrap; gap: 10px; } /* ========================================================= 2) CHI TIẾT SẢN PHẨM (single product) ========================================================= */ .thienha-woo div.product { display: flex; flex-wrap: wrap; gap: 40px; } .thienha-woo div.product .woocommerce-product-gallery { flex: 1 1 46%; min-width: 300px; } .thienha-woo div.product .woocommerce-product-gallery img { border-radius: 14px; } .thienha-woo div.product .summary { flex: 1 1 44%; min-width: 300px; } /* Dòng thương hiệu */ .thienha-woo div.product .thienha-brand-line { font-size: 14px; color: var(--th-muted); margin-bottom: 6px; } .thienha-woo div.product .thienha-brand-line a { color: var(--th-coral-dark); font-weight: 600; text-decoration: none; } .thienha-woo div.product .thienha-brand-line a:hover { color: var(--th-coral); } .thienha-woo div.product .product_title { font-family: 'Konde', 'Roboto', sans-serif; color: var(--th-navy); font-size: 30px; line-height: 1.25; margin: 0 0 10px; } /* Dòng mã SP + sao + số đánh giá */ .thienha-woo div.product .thienha-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; font-size: 14px; color: var(--th-muted); } .thienha-woo div.product .thienha-meta-line .thienha-sku b { color: var(--th-navy); } .thienha-woo div.product .thienha-meta-line .star-rating { color: #f5a623; margin: 0; } .thienha-woo div.product .thienha-meta-line .thienha-review-count { color: var(--th-navy-soft); text-decoration: none; } .thienha-woo div.product .thienha-meta-line .thienha-review-count:hover { color: var(--th-coral); } /* Giá + badge % giảm trên cùng một hàng */ .thienha-woo div.product .price { display: inline-block; color: var(--th-coral-dark); font-size: 28px; font-weight: 700; margin: 0 12px 0 0; vertical-align: middle; } .thienha-woo div.product .price del { color: var(--th-muted); font-weight: 400; font-size: 18px; margin-right: 8px; } .thienha-woo div.product .price ins { text-decoration: none; } .thienha-woo div.product .thienha-discount { display: inline-block; vertical-align: middle; background: var(--th-grad); color: #fff; font-weight: 700; font-size: 14px; padding: 3px 12px; border-radius: 999px; box-shadow: 0 4px 10px rgba(239,57,88,.25); } /* Thanh Flash Deal + đồng hồ đếm ngược */ .thienha-woo .thienha-flash-deal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0; padding: 10px 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #ff8a3d 0%, #ff5a2c 100%); box-shadow: 0 6px 16px rgba(255,90,44,.25); } .thienha-woo .thienha-flash-deal .fd-label { font-weight: 800; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; } .thienha-woo .thienha-flash-deal .fd-timer { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .thienha-woo .thienha-flash-deal .fd-timer b { background: rgba(0,0,0,.35); border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; } .thienha-woo .thienha-flash-deal .fd-timer i { font-style: normal; opacity: .8; } .thienha-woo .onsale { background: var(--th-grad) !important; color: #fff !important; border: none !important; border-radius: 999px; padding: 6px 16px; font-weight: 700; min-height: 0; min-width: 0; box-shadow: 0 4px 12px rgba(239,57,88,.3); } .thienha-woo .woocommerce-product-details__short-description { color: var(--th-ink); line-height: 1.7; margin-bottom: 18px; } .thienha-woo div.product form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .thienha-woo div.product form.cart .quantity { flex: 0 0 100%; } .thienha-woo div.product form.cart .quantity input.qty { width: 90px; padding: 12px; border: 1px solid var(--th-border); border-radius: 12px; text-align: center; color: var(--th-navy); font-weight: 600; } .thienha-woo div.product form.cart .single_add_to_cart_button { flex: 1 1 40%; padding: .95em 1.5em !important; order: 3; } /* Nút "Mua ngay" = chính (solid), bên trái */ .thienha-woo div.product form.cart .thienha-buy-now { order: 2; } /* Nút "Thêm giỏ hàng" (nút mặc định, không phải buy-now) = phụ (viền coral) */ .thienha-woo div.product form.cart .single_add_to_cart_button:not(.thienha-buy-now) { background: #fff !important; color: var(--th-coral-dark) !important; border: 1.5px solid var(--th-coral) !important; box-shadow: none; } .thienha-woo div.product form.cart .single_add_to_cart_button:not(.thienha-buy-now):hover { background: var(--th-rose) !important; color: var(--th-coral-deep) !important; } .thienha-woo div.product .btn-consult { flex: 0 0 100%; justify-content: center; } .thienha-woo .btn-consult { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: .7em 1.4em; } .thienha-woo .product_meta { margin-top: 18px; color: var(--th-muted); font-size: 14px; } .thienha-woo .product_meta a { color: var(--th-navy-soft); text-decoration: none; } .thienha-woo .product_meta a:hover { color: var(--th-coral); } /* Tabs — selector kèm div.product để thắng CSS mặc định của WooCommerce */ .thienha-woo .woocommerce-tabs { flex: 1 1 100%; margin-top: 40px; } .thienha-woo div.product .woocommerce-tabs ul.tabs { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 20px; padding: 0; border-bottom: 2px solid var(--th-rose); } .thienha-woo div.product .woocommerce-tabs ul.tabs::before, .thienha-woo div.product .woocommerce-tabs ul.tabs::after { display: none; } .thienha-woo div.product .woocommerce-tabs ul.tabs li { background: transparent; border: none; border-radius: 0; margin: 0; padding: 0; } .thienha-woo div.product .woocommerce-tabs ul.tabs li::before, .thienha-woo div.product .woocommerce-tabs ul.tabs li::after { display: none; } .thienha-woo div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 18px; color: var(--th-muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .thienha-woo div.product .woocommerce-tabs ul.tabs li.active { background: transparent; } .thienha-woo div.product .woocommerce-tabs ul.tabs li.active a, .thienha-woo div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--th-navy); border-bottom-color: var(--th-coral); } .thienha-woo .woocommerce-tabs .panel h2 { color: var(--th-navy); font-size: 20px; } /* Bảng "Thông tin bổ sung" (thuộc tính SP) — nhẹ nhàng, khớp brand */ .thienha-woo table.woocommerce-product-attributes { border: 1px solid var(--th-border); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; } .thienha-woo table.woocommerce-product-attributes tr:nth-child(1) { background: transparent; } .thienha-woo table.woocommerce-product-attributes tr:nth-child(even) { background: var(--th-rose-2); } .thienha-woo table.woocommerce-product-attributes th { width: 220px; background: var(--th-rose); color: var(--th-navy); font-weight: 600; font-style: normal; text-align: left; padding: 12px 16px; border: none; border-bottom: 1px solid #f6e3e8; } .thienha-woo table.woocommerce-product-attributes td { padding: 12px 16px; border: none; border-bottom: 1px solid #f6e3e8; font-style: normal; text-align: left; color: var(--th-ink); } .thienha-woo table.woocommerce-product-attributes tr:last-child th, .thienha-woo table.woocommerce-product-attributes tr:last-child td { border-bottom: none; } .thienha-woo table.woocommerce-product-attributes td p { margin: 0; } @media (max-width: 575.98px) { .thienha-woo table.woocommerce-product-attributes th { width: 120px; padding: 10px 12px; } .thienha-woo table.woocommerce-product-attributes td { padding: 10px 12px; } } /* Đánh giá của khách */ .thienha-woo #reviews .comment-form-rating .stars a { color: #f5a623; } .thienha-woo #reviews .commentlist { margin: 0; padding: 0; list-style: none; } .thienha-woo #reviews .commentlist li.review { list-style: none; border: 1px solid var(--th-border); border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; background: #fff; } .thienha-woo #reviews .commentlist .comment_container { display: block; } .thienha-woo #reviews .commentlist .meta { color: var(--th-navy); font-weight: 600; margin-bottom: 6px; } .thienha-woo #reviews .commentlist .meta .woocommerce-review__dash, .thienha-woo #reviews .commentlist .meta time { color: var(--th-muted); font-weight: 400; } .thienha-woo #reviews .commentlist .star-rating { color: #f5a623; margin-bottom: 6px; } .thienha-woo #reviews .commentlist .description { color: var(--th-ink); line-height: 1.6; } .thienha-woo #reviews .woocommerce-Reviews-title { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); } .thienha-woo #reviews #respond .comment-reply-title { color: var(--th-navy); font-weight: 700; } .thienha-woo #reviews #respond textarea, .thienha-woo #reviews #respond input[type=text], .thienha-woo #reviews #respond input[type=email] { width: 100%; padding: 10px 12px; border: 1px solid var(--th-border); border-radius: 10px; } .thienha-woo #reviews .verified { color: var(--th-coral-dark); font-weight: 600; } /* Thuộc tính SP đưa vào .product_meta (thay cho tab "Thông tin bổ sung") */ .thienha-woo .product_meta .thienha-meta-attributes { margin: 0 0 16px; } .thienha-woo .product_meta .thienha-meta-attributes__title { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 16px; margin: 0 0 10px; } .thienha-woo .product_meta table.woocommerce-product-attributes { font-size: 14px; } .thienha-woo .product_meta table.woocommerce-product-attributes th { width: 160px; } /* Mục lục (TOC) trong tab "Thông tin chi tiết" */ .thienha-woo .thienha-toc { background: var(--th-rose-2); border: 1px solid var(--th-border); border-radius: 14px; padding: 16px 20px; margin: 0 0 24px; } .thienha-woo .thienha-toc__title { font-weight: 700; color: var(--th-navy); margin: 0 0 8px; font-size: 15px; } .thienha-woo .thienha-toc__list { list-style: none; margin: 0; padding: 0; } .thienha-woo .thienha-toc__item { margin: 0; } .thienha-woo .thienha-toc__item a { display: inline-block; padding: 4px 0; line-height: 1.5; color: var(--th-navy-soft); text-decoration: none; } .thienha-woo .thienha-toc__item a:hover { color: var(--th-coral); text-decoration: underline; } .thienha-woo .thienha-toc__item--h2 a { font-weight: 600; } .thienha-woo .thienha-toc__item--h3 { padding-left: 18px; } .thienha-woo .thienha-toc__item--h3 a { font-size: 14px; color: var(--th-muted); } /* Card "Cố vấn chuyên môn" dưới mô tả */ .thienha-woo .thienha-advisor { flex: 1 1 100%; display: flex; gap: 20px; align-items: center; margin: 28px 0 8px; padding: 20px 22px; background: linear-gradient(135deg, #eef4ff, #ffffff); border: 1px solid #e4ecfb; border-radius: 18px; } .thienha-woo .thienha-advisor__photo { flex: 0 0 96px; width: 96px; height: 120px; border-radius: 12px; overflow: hidden; background: #fff; } .thienha-woo .thienha-advisor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .thienha-woo .thienha-advisor__label { color: #4a73c4; font-size: 14px; font-weight: 600; margin: 0 0 2px; } .thienha-woo .thienha-advisor__name { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 20px; margin: 0 0 8px; } .thienha-woo .thienha-advisor__bio { color: var(--th-ink); font-size: 14px; line-height: 1.6; margin: 0 0 12px; } .thienha-woo .thienha-advisor__link { display: inline-flex; align-items: center; gap: 8px; color: var(--th-coral-dark); font-weight: 700; text-decoration: none; } .thienha-woo .thienha-advisor__link:hover { color: var(--th-coral); } .thienha-woo .thienha-advisor__link i { transition: transform .15s; } .thienha-woo .thienha-advisor__link:hover i { transform: translateX(3px); } @media (max-width: 575.98px) { .thienha-woo .thienha-advisor { flex-direction: column; text-align: center; } .thienha-woo .thienha-advisor__photo { width: 90px; height: 112px; } } /* Đánh giá đưa xuống cuối trang */ .thienha-woo .thienha-product-reviews { flex: 1 1 100%; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--th-border); } /* Section "Sản phẩm cùng nhãn hàng" + Sản phẩm liên quan */ .thienha-woo .thienha-same-brand { margin-top: 40px; } /* Sản phẩm liên quan */ .thienha-woo .related.products, .thienha-woo .upsells.products { flex: 1 1 100%; margin-top: 48px; } .thienha-woo .related.products > h2, .thienha-woo .upsells.products > h2 { font-family: 'Konde', 'Roboto', sans-serif; color: var(--th-navy); font-size: 24px; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .thienha-woo .related.products > h2::after { content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--th-grad); border-radius:3px; } /* Chi tiết SP trên mobile: chữ vừa màn hình, nút bấm to dễ chạm, bớt khoảng trắng */ @media (max-width: 767.98px) { .thienha-woo div.product { gap: 24px; } .thienha-woo div.product .product_title { font-size: 22px; } .thienha-woo div.product .price { font-size: 22px; } .thienha-woo div.product .price del { font-size: 15px; } .thienha-woo div.product form.cart .thienha-buy-now, .thienha-woo div.product form.cart .single_add_to_cart_button { flex: 1 1 100%; } .thienha-woo .woocommerce-tabs { margin-top: 12px; } .thienha-woo .related.products, .thienha-woo .upsells.products { margin-top: 20px; } .thienha-woo .thienha-same-brand { margin-top: 0; } .thienha-woo .related.products > h2, .thienha-woo .upsells.products > h2 { font-size: 20px; margin-bottom: 14px; } .thienha-woo .thienha-flash-deal { padding: 10px 14px; } .thienha-woo .thienha-flash-deal .fd-label { font-size: 14px; } } /* ========================================================= 3) GIỎ HÀNG (cart) ========================================================= */ .thienha-woo .cart-collaterals::after { content:""; display:block; clear:both; } .thienha-woo .woocommerce-cart-form table.cart { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--th-border); border-radius: var(--th-radius); overflow: hidden; background: #fff; } .thienha-woo table.cart thead th { background: var(--th-rose); color: var(--th-navy); font-weight: 700; padding: 16px; text-align: left; border: none; text-transform: none; } .thienha-woo table.cart td { padding: 16px; border: none; border-bottom: 1px solid #f3f3f6; vertical-align: middle; background: #fff; color: var(--th-ink); } .thienha-woo table.cart td .amount { color: var(--th-ink); } .thienha-woo table.cart td.product-subtotal .amount { color: var(--th-coral-dark); font-weight: 700; } .thienha-woo table.cart tr:last-child td { border-bottom: none; } .thienha-woo table.cart img { max-width: 72px; height: auto; border-radius: 12px; border: 1px solid var(--th-border); } .thienha-woo table.cart a.remove { color: var(--th-coral-dark) !important; font-weight: 700; border: 1px solid var(--th-border); background: #fff !important; line-height: 24px; } .thienha-woo table.cart a.remove:hover { background: var(--th-coral-dark) !important; color: #fff !important; } .thienha-woo table.cart .product-name a { color: var(--th-navy); font-weight: 600; text-decoration: none; } .thienha-woo table.cart .product-name a:hover { color: var(--th-coral); } .thienha-woo table.cart .quantity input.qty { width: 64px; padding: 8px; border: 1px solid var(--th-border); border-radius: 10px; text-align: center; } .thienha-woo .coupon input#coupon_code { padding: 10px 14px; border: 1px solid var(--th-border); border-radius: 999px; margin-right: 8px; } .thienha-woo .cart_totals { border: 1px solid var(--th-border); border-radius: var(--th-radius); padding: 24px; background: var(--th-rose-2); box-shadow: var(--th-shadow); } .thienha-woo .cart_totals h2 { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); margin-top: 0; } .thienha-woo .cart_totals table { width: 100%; } .thienha-woo .cart_totals th, .thienha-woo .cart_totals td { padding: 10px 0; border-bottom: 1px solid var(--th-border); color: var(--th-ink); } .thienha-woo .cart_totals .order-total .amount { color: var(--th-coral-dark); font-size: 20px; } .thienha-woo .wc-proceed-to-checkout .button { display: block; width: 100%; text-align: center; margin-top: 12px; } @media (max-width: 767.98px){ .thienha-woo table.cart thead { display: none; } .thienha-woo table.cart tr { display: block; border: 1px solid var(--th-border); border-radius: 12px; margin-bottom: 14px; padding: 6px 10px; } .thienha-woo table.cart td { display: flex; justify-content: space-between; align-items: center; border: none; padding: 10px 4px; } .thienha-woo table.cart td::before { content: attr(data-title); font-weight: 600; color: var(--th-navy); } } /* ========================================================= 4) ĐẶT HÀNG (checkout) + trang cảm ơn ========================================================= */ .thienha-woo form.checkout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px 40px; align-items: start; grid-template-areas: "cust review-head" "cust review"; } /* LƯU Ý: KHÔNG gán grid-area cho #customer_details / #order_review ở đây. Checkout gộp dùng .thienha-checkout-side (grid xếp dọc) làm layout; nếu gán grid-area "cust"/"review" (line ảo không tồn tại trong grid đó) sẽ khiến #customer_details và #order_review đè chồng lên nhau -> mất phần nhập thông tin. */ .thienha-woo form.checkout #order_review_heading { margin-bottom: 0; } /* #customer_details CHÍNH LÀ .col2-set; con là .col-1 (billing) + .col-2 (ghi chú). Xếp dọc để cột trái chỉ là 1 cột (form), tránh layout 3 cột. */ .thienha-woo form.checkout #customer_details { display: block; } .thienha-woo form.checkout #customer_details::after { content: ""; display: block; clear: both; } .thienha-woo form.checkout #customer_details .col-1, .thienha-woo form.checkout #customer_details .col-2 { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 0 4px !important; } @media (max-width: 767.98px){ .thienha-woo form.checkout { grid-template-columns: 1fr; grid-template-areas: "cust" "review-head" "review"; } } .thienha-woo .woocommerce-checkout h3, .thienha-woo #order_review_heading { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 20px; margin-bottom: 16px; } .thienha-woo .checkout .form-row label { color: var(--th-navy); font-weight: 600; margin-bottom: 6px; } .thienha-woo .checkout .form-row input.input-text, .thienha-woo .checkout .form-row textarea, .thienha-woo .checkout .form-row select, .thienha-woo .select2-container .select2-selection { width: 100%; padding: 12px 14px; border: 1px solid var(--th-border); border-radius: 12px; background: #fff; color: var(--th-ink); transition: border-color .15s, box-shadow .15s; } .thienha-woo .checkout .form-row input.input-text:focus, .thienha-woo .checkout .form-row textarea:focus { border-color: var(--th-coral); box-shadow: 0 0 0 3px rgba(255,81,111,.15); outline: none; } .thienha-woo form.checkout #customer_details, .thienha-woo form.checkout #order_review { min-width: 0; } .thienha-woo #order_review { background: var(--th-rose-2); border: 1px solid var(--th-border); border-radius: var(--th-radius); padding: 24px; box-shadow: var(--th-shadow); position: sticky; top: 20px; } .thienha-woo #order_review table.shop_table { width: 100%; background: transparent; border: none; } .thienha-woo #order_review table.shop_table tr { background: transparent; } .thienha-woo #order_review th, .thienha-woo #order_review td { padding: 11px 0; border: none; border-bottom: 1px solid var(--th-border); background: transparent; color: var(--th-ink); font-style: normal; text-align: left; } .thienha-woo #order_review th:last-child, .thienha-woo #order_review td:last-child { text-align: right; } .thienha-woo #order_review thead th { color: var(--th-navy); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; } .thienha-woo #order_review .product-name { color: var(--th-ink); } .thienha-woo #order_review .product-quantity { color: var(--th-muted); font-weight: 400; white-space: nowrap; } .thienha-woo #order_review .amount { color: var(--th-ink); } .thienha-woo #order_review tfoot th { color: var(--th-navy); font-weight: 600; } .thienha-woo #order_review .order-total th { font-size: 16px; } .thienha-woo #order_review .order-total td, .thienha-woo #order_review .order-total .amount { color: var(--th-coral-dark); font-size: 20px; font-weight: 700; } .thienha-woo #order_review .order-total th, .thienha-woo #order_review .order-total td { border-bottom: none; } /* Khối thanh toán + nút đặt hàng: bỏ nền xám mặc định của WooCommerce */ .thienha-woo #payment, .thienha-woo .woocommerce-checkout #payment { background: transparent; border-radius: 0; } .thienha-woo #payment div.form-row, .thienha-woo #payment .place-order { padding: 0; margin: 0; } .thienha-woo .woocommerce-privacy-policy-text { margin: 14px 0 4px; } .thienha-woo .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--th-muted); line-height: 1.6; } .thienha-woo .woocommerce-privacy-policy-text a { color: var(--th-navy-soft); } .thienha-woo .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; } .thienha-woo .wc_payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--th-border); } .thienha-woo .wc_payment_methods label { color: var(--th-navy); font-weight: 600; } .thienha-woo #place_order { display: block; width: 100%; padding: 14px !important; font-size: 16px; margin-top: 12px; } /* Form nhập mã ưu đãi (mở từ dòng "Bạn có mã ưu đãi?") */ .thienha-woo form.checkout_coupon { border: 1px solid var(--th-border); border-radius: 14px; background: #fff; padding: 18px; margin-bottom: 24px; } .thienha-woo form.checkout_coupon .form-row { margin-bottom: 0; } .thienha-woo form.checkout_coupon input[name="coupon_code"] { width: 100%; padding: 11px 14px; border: 1px solid var(--th-border); border-radius: 999px; } @media (max-width: 767.98px) { .thienha-woo #order_review { position: static; padding: 18px 14px; } .thienha-woo form.checkout { gap: 20px; } } /* Ẩn tùy chọn giao hàng địa chỉ khác (form VN rút gọn chỉ 1 địa chỉ) */ .thienha-woo .woocommerce-shipping-fields { display: none; } /* Trang đặt hàng thành công */ .thienha-woo .thienha-order-success { max-width: 600px; margin: 24px auto; text-align: center; background: #fff; border: 1px solid var(--th-border); border-radius: 20px; padding: 40px 28px; box-shadow: var(--th-shadow); } .thienha-woo .thienha-order-success .tos-icon { font-size: 64px; color: #2ecc71; line-height: 1; margin-bottom: 14px; } .thienha-woo .thienha-order-success .tos-icon.tos-failed { color: var(--th-coral-dark); } .thienha-woo .thienha-order-success .tos-title { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 26px; margin: 0 0 12px; } .thienha-woo .thienha-order-success .tos-msg { color: var(--th-ink); line-height: 1.7; margin: 0 auto 20px; max-width: 460px; } .thienha-woo .thienha-order-success .tos-meta { list-style: none; margin: 0 auto 24px; padding: 16px 20px; max-width: 380px; text-align: left; background: var(--th-rose); border-radius: 14px; } .thienha-woo .thienha-order-success .tos-meta li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--th-border); } .thienha-woo .thienha-order-success .tos-meta li:last-child { border-bottom: none; } .thienha-woo .thienha-order-success .tos-meta span { color: var(--th-muted); } .thienha-woo .thienha-order-success .tos-meta b { color: var(--th-navy); } .thienha-woo .thienha-order-success .tos-meta .tos-total { color: var(--th-coral-dark); font-size: 18px; } .thienha-woo .thienha-order-success .button { display: inline-block; } @media (max-width: 575.98px) { .thienha-woo .thienha-order-success { padding: 28px 16px; margin: 8px auto; } .thienha-woo .thienha-order-success .tos-icon { font-size: 52px; } .thienha-woo .thienha-order-success .tos-title { font-size: 22px; } } /* Trang cảm ơn (chi tiết đơn — vẫn giữ style nếu WooCommerce hiển thị) */ .thienha-woo .woocommerce-order { max-width: 760px; margin: 0 auto; } .thienha-woo .woocommerce-order .woocommerce-thankyou-order-received { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 20px; } .thienha-woo .woocommerce-order ul.order_details { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 20px; margin: 0 0 24px; background: var(--th-rose); border-radius: var(--th-radius); } .thienha-woo .woocommerce-order ul.order_details li { border: none; color: var(--th-muted); font-size: 13px; padding-right: 20px; } .thienha-woo .woocommerce-order ul.order_details li strong { display: block; color: var(--th-navy); font-size: 16px; } /* ---- ẩn field country (form VN rút gọn) — chỉ trong khối WC, KHÔNG dùng .d-none global vì sẽ đè utility .d-none.d-lg-block của Bootstrap ở header ---- */ .thienha-woo #billing_country_field, .thienha-woo .form-row.d-none { display: none !important; } /* ---- Popup "Mua ngay" (đặt hàng nhanh) ---- */ .thienha-quickorder-modal .modal-content { border: none; border-radius: 18px; overflow: hidden; padding: 0; } .thienha-quickorder-modal .tqo-close { position: absolute; top: 14px; right: 14px; z-index: 3; } .thienha-quickorder-modal .tqo-body { padding: 28px 26px 26px; } .thienha-quickorder-modal .tqo-title { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 22px; margin: 0 0 4px; } .thienha-quickorder-modal .tqo-section-label { color: var(--th-navy); font-weight: 700; font-size: 15px; margin: 0 0 10px; } .thienha-quickorder-modal .tqo-product { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--th-border); } .thienha-quickorder-modal .tqo-product__thumb { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; border: 1px solid var(--th-border); background: #fff; } .thienha-quickorder-modal .tqo-product__img { width: 100%; height: 100%; object-fit: cover; display: block; } .thienha-quickorder-modal .tqo-product__name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--th-ink); } .thienha-quickorder-modal .tqo-product__aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .thienha-quickorder-modal .tqo-product__pricing { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .thienha-quickorder-modal .tqo-product__price { color: var(--th-coral-dark); font-weight: 700; font-size: 15px; } .thienha-quickorder-modal .tqo-product__regular { color: var(--th-muted); text-decoration: line-through; font-size: 12px; } .thienha-quickorder-modal .tqo-qty { display: inline-flex; align-items: center; border: 1px solid var(--th-border); border-radius: 999px; overflow: hidden; background: #fff; } .thienha-quickorder-modal .tqo-qty__btn { width: 30px; height: 30px; border: none; background: transparent; color: var(--th-navy); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .thienha-quickorder-modal .tqo-qty__btn:hover { background: var(--th-rose); } .thienha-quickorder-modal .tqo-qty__input { width: 38px; height: 30px; border: none; text-align: center; font-weight: 700; color: var(--th-ink); background: transparent; -moz-appearance: textfield; } .thienha-quickorder-modal .tqo-qty__input:focus { outline: none; } .thienha-quickorder-modal .tqo-summary { margin: 0 0 18px; } .thienha-quickorder-modal .tqo-summary__row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; color: var(--th-ink); font-size: 14px; } .thienha-quickorder-modal .tqo-summary__row b { font-weight: 700; color: var(--th-navy); } .thienha-quickorder-modal .tqo-summary__save b { color: #168055; } .thienha-quickorder-modal .tqo-summary__row--final { border-top: 1px solid var(--th-border); margin-top: 6px; padding-top: 10px; } .thienha-quickorder-modal .tqo-summary__row--final b { color: var(--th-coral-dark); font-size: 18px; } .thienha-quickorder-modal .tqo-field { margin-bottom: 12px; } .thienha-quickorder-modal .tqo-field input, .thienha-quickorder-modal .tqo-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--th-border); border-radius: 12px; background: #fff; color: var(--th-ink); font-size: 15px; } .thienha-quickorder-modal .tqo-field input:focus, .thienha-quickorder-modal .tqo-field textarea:focus { outline: none; border-color: var(--th-coral); box-shadow: 0 0 0 3px rgba(255,81,111,.15); } .thienha-quickorder-modal .tqo-error { color: var(--th-coral-deep); font-size: 14px; min-height: 18px; margin-bottom: 6px; } .thienha-quickorder-modal .tqo-submit { width: 100%; padding: 14px; border: none; border-radius: 999px; color: #fff; font-weight: 700; font-size: 16px; background: var(--th-grad); box-shadow: 0 6px 16px rgba(239,57,88,.25); cursor: pointer; transition: transform .15s, box-shadow .15s; } .thienha-quickorder-modal .tqo-submit:hover { transform: translateY(-2px); box-shadow: var(--th-shadow-hi); } .thienha-quickorder-modal .tqo-submit:disabled { opacity: .7; cursor: default; transform: none; } .thienha-quickorder-modal .tqo-success { padding: 36px 26px; text-align: center; } .thienha-quickorder-modal .tqo-success-icon { font-size: 60px; color: #2ecc71; margin-bottom: 12px; } .thienha-quickorder-modal .tqo-success h3 { font-family: 'Konde','Roboto',sans-serif; color: var(--th-navy); font-size: 22px; margin: 0 0 10px; } .thienha-quickorder-modal .tqo-success p { color: var(--th-ink); line-height: 1.7; margin: 0 auto 20px; max-width: 360px; } .thienha-quickorder-modal .tqo-continue { background: #fff; color: var(--th-coral-dark); border: 1.5px solid var(--th-coral); border-radius: 999px; padding: 10px 22px; font-weight: 600; cursor: pointer; } .thienha-quickorder-modal .tqo-continue:hover { background: var(--th-rose); } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .thienha-woo * { transition: none !important; } .thienha-woo .product-card:hover { transform: none; } .thienha-woo .product-card:hover .product-card__thumb img { transform: none; } } /* ========================================================= POPUP (desktop) + TOAST (mobile) KHI THÊM VÀO GIỎ ========================================================= */ .thienha-cart-popup { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding-top: 90px; background: rgba(20, 20, 40, .45); opacity: 0; transition: opacity .25s ease; } .thienha-cart-popup.is-open { opacity: 1; } .thienha-cart-popup__box { position: relative; width: 380px; max-width: calc(100% - 32px); background: #fff; border-radius: 18px; padding: 30px 26px 26px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); transform: translateY(-16px); transition: transform .25s ease; } .thienha-cart-popup.is-open .thienha-cart-popup__box { transform: translateY(0); } .thienha-cart-popup__close { position: absolute; top: 8px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: #9aa0aa; cursor: pointer; } .thienha-cart-popup__icon { color: #22a06b; font-size: 46px; margin-bottom: 8px; } .thienha-cart-popup__title { font-family: 'Konde','Roboto',sans-serif; font-size: 20px; font-weight: 700; color: #1f2540; margin: 0 0 6px; } .thienha-cart-popup__name { color: #6b7280; font-size: 14px; margin: 0 0 20px; min-height: 1em; } .thienha-cart-popup__actions { display: flex; gap: 10px; } /* Popup in ở