/* ==========================================================================
   ỚT. Beauty — cửa hàng, danh mục, chi tiết sản phẩm, giỏ, thanh toán, tài khoản, tra đơn.
   Chỉ nạp ở các trang này.
   ========================================================================== */

/* ---------- Đầu danh mục: nền đổi theo dòng son ---------- */
.ot-cathero { background: var(--ot-accent); color: var(--ot-accent-fg); border-bottom: var(--ot-border); padding: var(--ot-sp-5) 0 var(--ot-sp-4); }
.ot-cathero:not(.ot-cathero--line) { background: var(--ot-lime); color: var(--ot-ink); }
.ot-cathero__grid { display: grid; gap: var(--ot-sp-4); align-items: end; }
.ot-cathero__title { font-size: var(--ot-fs-h1); font-weight: 900; text-transform: uppercase; line-height: .95; margin: 0 0 var(--ot-sp-3); }
.ot-cathero__page { font-size: .45em; }
.ot-cathero__intro { font-size: var(--ot-fs-lead); max-width: 56ch; font-weight: 500; }
.ot-cathero__count { display: none; margin: 0; align-items: center; gap: 10px; font-family: var(--ot-font-display); text-transform: uppercase; font-size: .8rem; font-weight: 700; line-height: 1.1; }
.ot-cathero__count b { font-size: clamp(4rem, 9vw, 8rem); font-weight: 900; line-height: .8; }
.ot-cathero .ot-btn--ink { --b-sh: var(--ot-white); }
.ot-cathero .ot-cattabs { margin-top: var(--ot-sp-4); }
.ot-cathero .ot-chip { color: var(--ot-ink); }
.ot-cathero .ot-chip.is-on { color: var(--ot-cream); }
@media (min-width: 900px) { .ot-cathero__grid { grid-template-columns: 1fr auto; } .ot-cathero__count { display: flex; } }

/* ---------- Bố cục cửa hàng ---------- */
.ot-shop { padding-block: var(--ot-sp-5) var(--ot-section); }
.ot-shop__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--ot-sp-5); }
.ot-shop__count { margin: 0 auto 0 0; font-weight: 700; }
.ot-sort { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--ot-fs-sm); }
.ot-sort select { min-height: var(--ot-tap); border: var(--ot-border); border-radius: var(--ot-r-pill); padding: 0 36px 0 14px; background: var(--ot-white); font-weight: 700; }
.ot-shop__layout { display: grid; gap: var(--ot-sp-6); }
.ot-shop__main { min-width: 0; }

/* Bộ lọc: mobile = ngăn kéo trái; desktop = cột trái cố định */
.ot-filters {
    position: fixed; inset: 0 auto 0 0; z-index: var(--ot-z-drawer); width: min(360px, 90vw);
    background: var(--ot-cream); border-right: var(--ot-border); overflow-y: auto; padding: 12px var(--ot-sp-5) var(--ot-sp-6);
    transform: translateX(-105%); visibility: hidden; transition: transform var(--ot-dur-slow) var(--ot-ease), visibility 0s linear var(--ot-dur-slow);
}
.ot-filters.is-open { transform: none; visibility: visible; transition: transform var(--ot-dur-slow) var(--ot-ease); }
.ot-filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ot-filters__title { font-size: 1.1rem; text-transform: uppercase; margin: 0; }
@media (min-width: 1024px) {
    .ot-shop__layout { grid-template-columns: 260px minmax(0, 1fr); }
    .ot-shop__filterbtn, .ot-filters__close { display: none !important; }
    .ot-filters { position: sticky; top: calc(var(--ot-header-h) + 16px); inset: auto; z-index: auto; width: auto; transform: none; visibility: visible; border: var(--ot-border); border-radius: var(--ot-r-lg); background: var(--ot-paper); box-shadow: var(--ot-shadow); align-self: start; max-height: calc(100vh - var(--ot-header-h) - 32px); padding: 16px 18px; }
}
.ot-fgroup { padding: 14px 0; border-bottom: 2px dashed var(--ot-grey-300); }
.ot-fgroup:last-of-type { border-bottom: 0; }
.ot-fgroup__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.ot-fgroup__hint { font-size: var(--ot-fs-xs); margin: 10px 0 0; }
.ot-fgroup .ot-chip { min-height: 40px; padding: 0 12px; font-size: var(--ot-fs-xs); }
.ot-swatchboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
.ot-swatchboard__item { display: grid; justify-items: center; gap: 4px; text-decoration: none; font-size: .72rem; font-weight: 700; padding: 4px 0; border-radius: 12px; min-height: var(--ot-tap); }
.ot-swatchboard__chip { width: 38px; height: 38px; border-radius: 50%; background: var(--sw); border: var(--ot-border); box-shadow: 2px 2px 0 var(--ot-ink); }
.ot-swatchboard__item.is-on .ot-swatchboard__chip { outline: 3px solid var(--ot-ink); outline-offset: 3px; }
.ot-swatchboard__item.is-on { text-decoration: underline; }
.ot-tonepick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ot-tonepick__item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: 12px; text-decoration: none; font-size: var(--ot-fs-xs); font-weight: 700; border: 2px solid transparent; }
.ot-tonepick__item .ot-tone-dot { width: 22px; height: 22px; }
.ot-tonepick__item.is-on { border-color: var(--ot-ink); background: var(--ot-white); }
.ot-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ot-seoblock { margin-top: var(--ot-sp-8); display: grid; gap: var(--ot-sp-6); padding-top: var(--ot-sp-6); border-top: var(--ot-border); }
@media (min-width: 1024px) { .ot-seoblock { grid-template-columns: 1.2fr 1fr; } }
.ot-seoblock h2 { margin-top: 0; }

/* ---------- Chi tiết sản phẩm ---------- */
.ot-pdp { padding: var(--ot-sp-4) 0 var(--ot-sp-7); background: linear-gradient(180deg, color-mix(in srgb, var(--ot-accent) 16%, var(--ot-cream)) 0, var(--ot-cream) 70%); border-bottom: var(--ot-border); }
.ot-pdp__grid { display: grid; gap: var(--ot-sp-5); }
@media (min-width: 960px) { .ot-pdp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--ot-sp-7); align-items: start; } .ot-pdp__gallery { position: sticky; top: calc(var(--ot-header-h) + 16px); } }
.ot-pdp__main { position: relative; aspect-ratio: 1; border: var(--ot-border); border-radius: var(--ot-r-xl); overflow: hidden; background: color-mix(in srgb, var(--ot-accent) 28%, var(--ot-cream)); box-shadow: var(--ot-shadow-lg); }
.ot-pdp__img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ot-dur) var(--ot-ease); }
.ot-pdp__img.is-swapping { opacity: .3; }
.ot-pdp__badge { position: absolute; top: 16px; left: 14px; font-size: 1rem; }
.ot-pdp__finish { position: absolute; right: 14px; bottom: 14px; font-family: var(--ot-font-display); font-weight: 800; text-transform: uppercase; font-size: .8rem; background: var(--ot-ink); color: var(--ot-lime); padding: 6px 12px; border-radius: 99px; }
.ot-pdp__thumbs { display: flex; gap: 10px; margin-top: 14px; list-style: none; }
.ot-pdp__thumb { padding: 0; border: var(--ot-border); border-radius: 14px; overflow: hidden; width: 72px; height: 72px; background: var(--ot-white); }
.ot-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ot-pdp__thumb.is-on { outline: 3px solid var(--ot-red); outline-offset: 2px; }
.ot-pdp__line { margin: 0 0 6px; font-weight: 700; font-size: var(--ot-fs-sm); text-transform: uppercase; letter-spacing: .04em; }
.ot-pdp__line a { color: inherit; }
.ot-pdp__title { font-size: clamp(1.8rem, 4.2vw, 3.2rem); font-weight: 900; text-transform: uppercase; line-height: 1; margin-bottom: 10px; }
.ot-pdp__rating { margin: 0 0 10px; }
.ot-pdp__rating a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--ot-fs-sm); font-weight: 600; min-height: var(--ot-tap); }
.ot-pdp__tagline { font-size: var(--ot-fs-lead); font-weight: 600; }
.ot-pdp__price { margin: 6px 0 18px; }
.ot-pdp__price .ot-price ins { font-size: 1.8rem; }
.ot-pdp__from { font-size: var(--ot-fs-sm); color: var(--ot-muted); }

.ot-shades { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.ot-shades__legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.ot-shades__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
@media (min-width: 560px) { .ot-shades__list { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } }
.ot-shade { display: grid; justify-items: center; gap: 6px; text-decoration: none; padding: 4px 2px; border-radius: 14px; text-align: center; }
.ot-shade__chip { width: 52px; height: 52px; border-radius: 50%; background: var(--sw); border: var(--ot-border); box-shadow: 3px 3px 0 var(--ot-ink); position: relative; }
.ot-shade__name { font-size: .72rem; font-weight: 700; line-height: 1.2; }
.ot-shade.is-on .ot-shade__chip { outline: 3px solid var(--ot-ink); outline-offset: 4px; }
.ot-shade.is-on .ot-shade__name { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; }
.ot-shade.is-out .ot-shade__chip::after { content: ""; position: absolute; inset: 45% -4px auto; height: 3px; background: var(--ot-ink); transform: rotate(-45deg); }
.ot-pdp__shadeinfo { background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-r-md); padding: 12px 14px; margin-bottom: 16px; font-size: var(--ot-fs-sm); }
.ot-pdp__shadeinfo p { margin: 0 0 4px; }
.ot-pdp__tones span:first-child { font-weight: 800; }
.ot-pdp__includes { background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-r-md); padding: 12px 16px; margin-bottom: 16px; }
.ot-pdp__includes ul { display: grid; gap: 4px; }
.ot-pdp__includes li { display: flex; align-items: center; gap: 8px; }
.ot-pdp__includes a { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; font-weight: 700; }

.ot-buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 16px; }
.ot-buy__add { grid-column: 2; }
.ot-buy__now { grid-column: 1 / -1; }
.ot-buy__stock { grid-column: 1 / -1; margin: 0; font-size: var(--ot-fs-sm); font-weight: 700; }
.ot-qty--lg .ot-qty__btn { width: 48px; height: 52px; }
@media (min-width: 560px) { .ot-buy { grid-template-columns: auto 1fr 1fr; } .ot-buy__now { grid-column: 3; } }
.ot-buy.is-shake { animation: ot-shake .4s; }
@keyframes ot-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .ot-buy.is-shake { animation: none; } }
.ot-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin-bottom: 14px; }
.ot-trust li { display: flex; gap: 8px; align-items: center; font-size: var(--ot-fs-xs); background: var(--ot-white); border: 2px solid var(--ot-ink); border-radius: 12px; padding: 8px 10px; line-height: 1.3; }
.ot-trust .ot-ico { width: 20px; height: 20px; color: var(--ot-red); }
.ot-pdp__tools { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.ot-pdp__tools a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ot-tap); font-weight: 800; }

/* Swatch trên tông da */
.ot-tonegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
@media (min-width: 768px) { .ot-tonegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ot-tonegrid:not(.ot-tonegrid--line) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ot-tonegrid--line { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ot-tonegrid__item { background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-r-md); overflow: hidden; }
.ot-tonegrid__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 2px solid var(--ot-ink); }
.ot-tonegrid__item p, .ot-tonegrid__item span { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; font-size: var(--ot-fs-xs); font-weight: 700; flex-wrap: wrap; }
.ot-tonegrid__item a { display: block; text-decoration: none; }
.ot-tonegrid__item.is-match { box-shadow: 4px 4px 0 var(--ot-red); }
.ot-match { background: var(--ot-lime); border: 2px solid var(--ot-ink); border-radius: 6px; padding: 0 6px; font-size: .68rem; }

/* Thông số + video */
.ot-pdp-specs__grid { display: grid; gap: var(--ot-sp-6); }
@media (min-width: 900px) { .ot-pdp-specs__grid { grid-template-columns: 360px 1fr; gap: var(--ot-sp-8); align-items: start; } }
.ot-specs { display: grid; gap: 8px; margin: var(--ot-sp-4) 0 var(--ot-sp-5); }
.ot-specs__row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; background: var(--ot-white); border: 2px solid var(--ot-ink); border-radius: 12px; padding: 10px 12px; }
.ot-specs dt { font-weight: 800; font-size: var(--ot-fs-sm); }
.ot-specs dd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--ot-fs-sm); }
.ot-meter--seg { display: inline-flex; gap: 3px; }
.ot-meter--seg i { width: 18px; height: 12px; border: 2px solid var(--ot-ink); border-radius: 3px; background: var(--ot-white); }
.ot-meter--seg i.on { background: var(--ot-red); }
.ot-ings { display: grid; gap: 8px; margin-bottom: 12px; }
.ot-ings li { display: grid; gap: 2px; background: var(--ot-white); border-left: 6px solid var(--ot-pink); border-radius: 8px; padding: 8px 12px; }
.ot-inci { font-size: var(--ot-fs-xs); color: var(--ot-grey-700); }
.ot-info { display: grid; gap: 6px; }
.ot-info > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--ot-grey-300); padding: 6px 0; font-size: var(--ot-fs-sm); }
.ot-info dt { font-weight: 800; }

/* Mua kèm */
.ot-buywith__box { display: grid; gap: var(--ot-sp-4); background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-4); box-shadow: var(--ot-shadow); }
.ot-buywith__list { display: grid; gap: 10px; list-style: none; }
@media (min-width: 900px) { .ot-buywith__box { grid-template-columns: 1fr 260px; align-items: center; } .ot-buywith__list { grid-template-columns: repeat(3, 1fr); } }
.ot-buywith__item { position: relative; }
.ot-buywith__item input { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; accent-color: var(--ot-red); z-index: 1; }
.ot-buywith__item label { display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; align-items: center; padding: 10px 10px 10px 40px; border: 2px solid var(--ot-ink); border-radius: var(--ot-r-md); cursor: pointer; background: var(--ot-white); min-height: 84px; }
.ot-buywith__item img { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ot-ink); }
.ot-buywith__name { font-weight: 800; font-size: var(--ot-fs-sm); line-height: 1.25; }
.ot-buywith__name small { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.ot-buywith__price { font-weight: 800; color: var(--ot-red-ink); }
.ot-buywith__item input:not(:checked) + label { opacity: .55; }
.ot-buywith__sum p { font-size: 1.1rem; }
.ot-buywith__sum strong { font-family: var(--ot-font-display); font-size: 1.6rem; display: block; }

/* Đánh giá */
.ot-revsec__grid { display: grid; gap: var(--ot-sp-6); }
@media (min-width: 1000px) { .ot-revsec__grid { grid-template-columns: 320px minmax(0, 1fr); } .ot-revsum { position: sticky; top: calc(var(--ot-header-h) + 16px); align-self: start; } }
.ot-revsum { background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: var(--ot-shadow); }
.ot-revsum__avg { margin: 0; font-family: var(--ot-font-display); font-size: 1.3rem; }
.ot-revsum__avg b { font-size: 3.6rem; }
.ot-revsum__bars { display: grid; gap: 6px; margin: 12px 0 16px; }
.ot-revsum__bars li { display: grid; grid-template-columns: 34px 1fr 28px; gap: 8px; align-items: center; font-size: var(--ot-fs-xs); font-weight: 700; }
.ot-bar { height: 12px; border: 2px solid var(--ot-ink); border-radius: 99px; overflow: hidden; background: var(--ot-white); }
.ot-bar i { display: block; height: 100%; background: var(--ot-red); }
.ot-revsum__write summary { list-style: none; width: 100%; }
.ot-revsum__write summary::-webkit-details-marker { display: none; }
.ot-revsum__write[open] summary { margin-bottom: 16px; }
.ot-revfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ot-revlist__items { display: grid; gap: 14px; list-style: none; }
.ot-rating-input { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.ot-rating-input legend { width: 100%; font-weight: 700; margin-bottom: 4px; float: left; }
.ot-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ot-rating-input label { width: var(--ot-tap); height: var(--ot-tap); display: grid; place-items: center; font-size: 1.8rem; color: var(--ot-grey-300); cursor: pointer; }
.ot-rating-input input:checked ~ label, .ot-rating-input label:hover, .ot-rating-input label:hover ~ label { color: var(--ot-red); }
.ot-rating-input input:focus-visible + label { outline: 3px solid var(--ot-ink); border-radius: 8px; }
.ot-review-form .ot-btn { justify-self: start; }

/* ---------- Woo: giỏ, thanh toán, tài khoản ---------- */
.ot-page--woo { padding-top: var(--ot-sp-5); }
.ot-woo { width: 100%; }
.ot-woo .woocommerce-notices-wrapper:empty { display: none; }
.ot-woo .woocommerce-message, .ot-woo .woocommerce-info, .ot-woo .woocommerce-error, .ot-pdp .woocommerce-message, .ot-pdp .woocommerce-error {
    list-style: none; border: var(--ot-border); border-radius: var(--ot-r-md); padding: 12px 16px; margin: 0 0 16px; background: var(--ot-lime); font-weight: 600; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ot-woo .woocommerce-error, .ot-pdp .woocommerce-error { background: #FFE0E3; color: var(--ot-error); }
.ot-woo .button, .ot-woo button[type="submit"], .ot-woo .checkout-button, .ot-woo #place_order {
    display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: var(--ot-border); border-radius: var(--ot-r-pill);
    background: var(--ot-ink); color: var(--ot-cream); font-family: var(--ot-font-display); font-weight: 700; font-size: .85rem; text-transform: uppercase; text-decoration: none; box-shadow: 4px 4px 0 var(--ot-red); cursor: pointer;
}
.ot-woo .checkout-button, .ot-woo #place_order { background: var(--ot-red); color: var(--ot-white); box-shadow: 4px 4px 0 var(--ot-ink); width: 100%; min-height: 58px; font-size: 1rem; }
.ot-woo table.shop_table { border: var(--ot-border); border-radius: var(--ot-r-md); background: var(--ot-white); border-collapse: separate; overflow: hidden; margin-bottom: 20px; }
.ot-woo table.shop_table th, .ot-woo table.shop_table td { padding: 12px; border-bottom: 1px solid var(--ot-grey-300); text-align: left; vertical-align: middle; }
.ot-woo .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ot-ink); }
.ot-woo .product-remove a { display: grid; place-items: center; width: var(--ot-tap); height: var(--ot-tap); text-decoration: none; font-size: 1.4rem; }
.ot-woo .quantity { display: inline-flex; align-items: center; border: var(--ot-border); border-radius: 99px; background: var(--ot-white); }
.ot-woo .quantity input.qty { width: 48px; min-height: 44px; border: 0; text-align: center; font-weight: 800; padding: 0; }
.ot-woo .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.ot-woo .coupon input { flex: 1 1 160px; }
.ot-woo .cart-collaterals .cart_totals { max-width: 480px; margin-left: auto; }
@media (max-width: 767px) {
    .ot-woo table.shop_table_responsive thead { display: none; }
    .ot-woo table.shop_table_responsive tr { display: block; border-bottom: 2px solid var(--ot-ink); }
    .ot-woo table.shop_table_responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; }
    .ot-woo table.shop_table_responsive td::before { content: attr(data-title); font-weight: 800; }
    .ot-woo table.shop_table_responsive td.product-remove::before, .ot-woo table.shop_table_responsive td.product-thumbnail::before, .ot-woo table.shop_table_responsive td.actions::before { content: none; }
    .ot-woo td.actions { flex-direction: column; }
}
/* Thanh toán 1 trang: 2 cột desktop */
.ot-woo form.checkout { display: grid; gap: var(--ot-sp-6); }
@media (min-width: 1024px) {
    .ot-woo form.checkout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
    .ot-woo form.checkout > #customer_details { grid-column: 1; }
    .ot-woo form.checkout > #order_review_heading, .ot-woo form.checkout > #order_review { grid-column: 2; }
    .ot-woo form.checkout > #order_review_heading { grid-row: 1; margin: 0; }
    .ot-woo form.checkout > #order_review { grid-row: 1; margin-top: 48px; position: sticky; top: calc(var(--ot-header-h) + 16px); }
}
.ot-woo #customer_details, .ot-woo #order_review { background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: var(--ot-shadow); }
.ot-woo h3, .ot-woo #order_review_heading { font-size: 1.15rem; text-transform: uppercase; }
.ot-woo .form-row { margin: 0 0 14px; display: grid; gap: 6px; }
.ot-woo .form-row label { font-weight: 700; font-size: var(--ot-fs-sm); }
.ot-woo .form-row .required { color: var(--ot-red-ink); text-decoration: none; }
@media (min-width: 640px) { .ot-woo .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .ot-woo .form-row-wide { grid-column: 1 / -1; } }
.ot-woo .ot-hidden-field { display: none !important; }
.ot-woo .woocommerce-invalid input { border-color: var(--ot-error); }
.ot-woo #payment ul.payment_methods { list-style: none; display: grid; gap: 10px; margin-bottom: 16px; }
.ot-woo #payment li.wc_payment_method { border: 2px solid var(--ot-ink); border-radius: var(--ot-r-md); padding: 12px 14px; background: var(--ot-white); }
.ot-woo #payment li > input { accent-color: var(--ot-red); width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.ot-woo #payment li > label { font-weight: 800; }
.ot-woo .payment_box { margin-top: 8px; font-size: var(--ot-fs-sm); }
.ot-wallets { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ot-wallet { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ot-tap); padding: 0 12px; border: 2px solid var(--ot-ink); border-radius: 99px; font-weight: 700; cursor: pointer; }
.ot-wallet input { accent-color: var(--ot-red); }
.ot-wallet__logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .8rem; }
.ot-wallet__logo--momo { background: #A50064; } .ot-wallet__logo--zalopay { background: #0068FF; } .ot-wallet__logo--vnpay { background: #E31837; }
.ot-demo-note { font-size: var(--ot-fs-xs); color: var(--ot-muted); }
.ot-check--consent { display: flex; }
.ot-woo .woocommerce-terms-and-conditions-wrapper { margin: 12px 0; font-size: var(--ot-fs-sm); }
.ot-thanks { background: var(--ot-lime); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); margin-bottom: var(--ot-sp-5); box-shadow: var(--ot-shadow); }
.ot-thanks__big { font-family: var(--ot-font-display); font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.ot-qr { display: grid; gap: 16px; align-items: center; background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); margin-bottom: var(--ot-sp-5); }
@media (min-width: 640px) { .ot-qr { grid-template-columns: 180px 1fr; } }
.ot-qr__code svg { width: 168px; height: 168px; padding: 6px; background: #fff; border: 2px solid var(--ot-ink); }
/* Tài khoản */
.ot-woo .woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ot-sp-5); }
.ot-woo .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; min-height: var(--ot-tap); padding: 0 16px; border: var(--ot-border); border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--ot-white); }
.ot-woo .woocommerce-MyAccount-navigation .is-active a { background: var(--ot-ink); color: var(--ot-cream); }
.ot-woo .u-columns { display: grid; gap: var(--ot-sp-5); }
@media (min-width: 900px) { .ot-woo .u-columns { grid-template-columns: 1fr 1fr; } }
.ot-woo .u-column1, .ot-woo .u-column2 { background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: var(--ot-shadow); }
.ot-table { background: var(--ot-white); border: var(--ot-border); font-size: var(--ot-fs-sm); }
.ot-table th, .ot-table td { padding: 8px 10px; border-bottom: 1px solid var(--ot-grey-300); text-align: left; }
.ot-table .is-plus { color: var(--ot-success); font-weight: 800; }
.ot-table .is-minus { color: var(--ot-error); font-weight: 800; }

/* Ớt Club (thẻ, quà) — dùng ở tài khoản và trang Ớt Club */
.ot-clubcard { background: var(--ot-ink); color: var(--ot-cream); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: 6px 6px 0 var(--tier, var(--ot-red)); margin-bottom: var(--ot-sp-5); max-width: 460px; }
.ot-clubcard__tier { display: inline-flex; gap: 6px; align-items: center; font-family: var(--ot-font-display); font-weight: 800; text-transform: uppercase; background: var(--tier, var(--ot-lime)); color: var(--ot-ink); padding: 4px 12px; border-radius: 99px; }
.ot-clubcard__tier .ot-ico { width: 18px; height: 18px; }
.ot-clubcard__pts { margin: 12px 0; font-weight: 700; }
.ot-clubcard__num { font-family: var(--ot-font-display); font-weight: 900; font-size: 3rem; color: var(--ot-lime); }
.ot-clubcard__next { font-size: var(--ot-fs-sm); margin: 8px 0 0; color: var(--ot-grey-300); }
.ot-meter { height: 14px; border: 2px solid var(--ot-cream); border-radius: 99px; overflow: hidden; }
.ot-meter > span { display: block; height: 100%; background: var(--ot-lime); }
.ot-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin-bottom: var(--ot-sp-5); }
@media (min-width: 900px) { .ot-rewards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ot-reward { background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: 14px; box-shadow: var(--ot-shadow); display: grid; gap: 4px; align-content: start; }
.ot-reward__cost { margin: 0; font-family: var(--ot-font-display); font-weight: 900; font-size: 1.5rem; color: var(--ot-red-ink); }
.ot-reward__name { margin: 0; font-weight: 800; }
.ot-reward__cond { margin: 0 0 8px; font-size: var(--ot-fs-xs); color: var(--ot-muted); }
.ot-reward .ot-btn { width: 100%; }
.ot-vouchers { display: grid; gap: 8px; margin-bottom: var(--ot-sp-5); }
.ot-vouchers li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--ot-white); border: 2px solid var(--ot-ink); border-radius: 12px; padding: 8px 12px; }
.ot-vouchers li.is-used { opacity: .55; }

/* ---------- Theo dõi đơn ---------- */
.ot-track { padding-block: var(--ot-sp-6) var(--ot-section); display: grid; gap: var(--ot-sp-5); }
.ot-track__form { background: var(--ot-paper); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: var(--ot-shadow); }
.ot-track__form .ot-btn { justify-self: start; }
.ot-order { background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-r-lg); padding: var(--ot-sp-5); box-shadow: var(--ot-shadow-lg); }
.ot-order__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
.ot-order__status { margin: 0; background: var(--ot-lime); border: 2px solid var(--ot-ink); border-radius: 99px; padding: 4px 14px; font-weight: 800; }
.ot-steps-track { list-style: none; display: grid; gap: 10px; margin: var(--ot-sp-5) 0; }
.ot-steps-track li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: center; color: var(--ot-grey-600); }
.ot-steps-track li.is-done, .ot-steps-track li.is-current { color: var(--ot-ink); }
.ot-steps-track__dot { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: var(--ot-border); background: var(--ot-white); font-weight: 900; }
.ot-steps-track li.is-done .ot-steps-track__dot { background: var(--ot-ink); color: var(--ot-lime); }
.ot-steps-track li.is-current .ot-steps-track__dot { background: var(--ot-red); color: var(--ot-white); }
.ot-steps-track__dot .ot-ico { width: 18px; height: 18px; }
.ot-steps-track__label { font-weight: 800; }
.ot-steps-track small { color: var(--ot-muted); }
@media (min-width: 900px) {
    .ot-steps-track { grid-template-columns: repeat(5, 1fr); }
    .ot-steps-track li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .ot-steps-track__dot { grid-row: auto; }
}
.ot-order__info { display: grid; gap: 6px; margin-bottom: 16px; }
.ot-order__info > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--ot-grey-300); padding: 6px 0; }
.ot-order__info dt { font-weight: 800; }
.ot-order__items { display: grid; gap: 4px; margin-bottom: 16px; }
.ot-order__items li { display: flex; gap: 8px; align-items: center; }
.ot-order__log { padding-left: 1.2em; font-size: var(--ot-fs-sm); }
.ot-order__log time { font-weight: 800; }
.ot-track__demo { background: var(--ot-pink); border: 2px dashed var(--ot-ink); border-radius: var(--ot-r-md); padding: 12px 16px; font-size: var(--ot-fs-sm); }
.ot-track__demo code { background: var(--ot-white); padding: 1px 6px; border-radius: 6px; font-weight: 800; }

/* Flash sale page */
.ot-flashhero__grid { display: grid; gap: var(--ot-sp-5); align-items: end; }
@media (min-width: 900px) { .ot-flashhero__grid { grid-template-columns: 1fr auto; } }
.ot-flashhero .ot-countdown__label { color: var(--ot-white); }
.ot-flashhero .ot-countdown__box { box-shadow: 4px 4px 0 var(--ot-lime); }
.ot-slots { display: flex; gap: 8px; overflow-x: auto; list-style: none; margin-top: var(--ot-sp-5); padding-bottom: 6px; }
.ot-slots li { flex: none; border: 2px solid var(--ot-white); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: var(--ot-fs-sm); }
.ot-slots li.is-now { background: var(--ot-lime); color: var(--ot-ink); border-color: var(--ot-ink); }
.ot-slots b { display: block; font-size: .7rem; text-transform: uppercase; }