/* Final layout safety layer for Chợ Online Blue marketplace */
body{background:#f7fbff!important;color:#102f50}
.hero-area{padding:20px 0 0!important}
.hero-layout{display:grid!important;grid-template-columns:minmax(0,3.15fr) minmax(220px,.98fr)!important;gap:16px!important;align-items:stretch!important}
.hero-main{height:302px!important;min-height:302px!important;position:relative!important;overflow:hidden!important;border-radius:18px!important;background:linear-gradient(112deg,#c8edff 0%,#8fd6ff 58%,#c5eaff 100%)!important;display:flex!important;align-items:center!important}
.hero-content{position:relative!important;z-index:4!important;padding:30px 0 30px 8%!important;width:53%!important}
.hero-kicker{display:inline-block!important;background:#ffffffc9!important;color:#0874bd!important;padding:7px 12px!important;border-radius:30px!important;font-size:12px!important;font-weight:800!important;letter-spacing:1px!important}
.hero-content h1{font-size:clamp(30px,3.2vw,46px)!important;line-height:1.16!important;font-weight:800!important;letter-spacing:-1.3px!important;color:#103b65!important;margin:15px 0 10px!important}
.hero-content h1 span{color:#087dcc!important}
.hero-content p{font-size:15px!important;line-height:1.65!important;color:#315b7e!important;max-width:390px!important;margin-bottom:17px!important}
.btn-hero{display:inline-flex!important;align-items:center!important;gap:8px!important;background:linear-gradient(100deg,#13b7ef,#087dcc)!important;color:#fff!important;border:0!important;border-radius:30px!important;padding:11px 24px!important;font-size:15px!important;font-weight:800!important;box-shadow:0 8px 18px #087dcc32!important;text-decoration:none!important}
.hero-art{position:absolute!important;right:0!important;top:0!important;width:54%!important;height:100%!important;display:grid!important;place-items:center!important}
.hero-cloud{position:absolute!important;background:#ffffff70!important;border-radius:50%!important;filter:blur(1px)!important}
.cloud-a{width:230px!important;height:230px!important;right:17%!important;top:15%!important}
.cloud-b{width:130px!important;height:130px!important;right:5%!important;bottom:-25%!important}
.hero-cart{font-size:105px!important;position:absolute!important;right:18%!important;bottom:7%!important;z-index:2!important;filter:drop-shadow(0 14px 9px #135b8c38)!important;transform:rotate(-5deg)!important}
.hero-bag{font-size:72px!important;position:absolute!important;right:47%!important;bottom:23%!important;z-index:3!important;transform:rotate(-8deg)!important}
.hero-gift{font-size:65px!important;position:absolute!important;right:37%!important;top:12%!important;z-index:3!important}
.hero-sale-tag{position:absolute!important;right:60%!important;top:10%!important;z-index:4!important;background:linear-gradient(135deg,#28c8ff,#087dcc)!important;color:#fff!important;padding:10px 17px!important;border-radius:13px!important;font-size:24px!important;font-weight:800!important;transform:rotate(-12deg)!important;box-shadow:0 7px 15px #087dcc35!important}
.hero-dots{position:absolute!important;bottom:14px!important;left:48%!important;display:flex!important;gap:9px!important;z-index:5!important}
.hero-dots b{width:9px!important;height:9px!important;border-radius:50%!important;background:#ffffff9c!important}.hero-dots b:first-child{background:#075b9a!important}
.hero-side{display:grid!important;grid-template-rows:1fr 1fr!important;gap:14px!important;min-width:0!important}
.side-promo{border-radius:16px!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:18px 20px!important;text-decoration:none!important;position:relative!important}
.side-promo span{display:flex!important;flex-direction:column!important;position:relative!important;z-index:2!important}
.side-promo b{font-size:23px!important;font-weight:800!important;line-height:1.3!important}
.side-promo strong{font-size:18px!important}.side-promo small{background:#fff!important;border-radius:25px!important;padding:7px 12px!important;margin-top:9px!important;width:max-content!important;font-size:12px!important;font-weight:700!important}
.side-promo i{font-style:normal!important;font-size:54px!important}
.voucher-promo{background:linear-gradient(120deg,#fff0cf,#ffe2a8)!important;color:#d95a0b!important}
.ship-promo{background:linear-gradient(120deg,#d9f3ff,#b9e6ff)!important;color:#07518b!important}
.service-strip{margin-top:16px!important;background:linear-gradient(90deg,#eaf7ff,#f2faff)!important;border-radius:15px!important;min-height:72px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;align-items:center!important;padding:10px 0!important}
.service-strip>div{display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important}
.service-icon{font-size:30px!important;color:#087dcc!important;flex:0 0 auto!important}
.service-strip p{display:flex!important;flex-direction:column!important;margin:0!important;line-height:1.45!important}
.service-strip b{font-size:14px!important;color:#173b5e!important}.service-strip small{font-size:12px!important;color:#6d8298!important}
.section-block{padding-top:25px!important}
.section-title-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:15px!important}
.section-title-row h2{font-size:24px!important;font-weight:800!important;color:#123b63!important;margin:0!important;display:flex!important;align-items:center!important;gap:10px!important}
.section-title-row h2>i{width:7px!important;height:28px!important;border-radius:5px!important;background:linear-gradient(#21b9f2,#087dcc)!important;display:inline-block!important}
.category-grid{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important}
.category-card{min-height:126px!important;border-radius:16px!important;text-decoration:none!important;color:#173a5a!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;text-align:center!important;padding:10px 5px!important;transition:.2s!important}
.category-icon{font-size:43px!important;line-height:1.2!important}
.deal-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important}
.deal-card{background:#fff!important;border:1px solid #e3edf6!important;border-radius:13px!important;overflow:hidden!important}
.deal-image{height:132px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,#fff,#edf7ff)!important;position:relative!important}
.deal-image>span:last-child{font-size:66px!important}
.deal-body{padding:10px!important}.deal-body h3{font-size:12px!important;font-weight:700!important;min-height:29px!important;margin:0 0 7px!important}
.deal-price{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:4px!important}.deal-price b{font-size:14px!important;color:#087dcc!important}.deal-price del{font-size:12px!important;color:#91a1b1!important}
@media(max-width:1199px){.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.deal-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:991px){.hero-layout{grid-template-columns:1fr!important}.hero-main{height:300px!important}.hero-side{grid-template-columns:1fr 1fr!important;grid-template-rows:125px!important}.service-strip{grid-template-columns:repeat(2,1fr)!important;gap:14px!important;padding:12px!important}}
@media(max-width:575px){.hero-main{height:340px!important;min-height:340px!important;align-items:flex-start!important}.hero-content{width:100%!important;padding:25px 20px!important}.hero-content h1{font-size:33px!important}.hero-content p{font-size:13px!important;max-width:270px!important}.hero-art{width:100%!important;height:58%!important;top:auto!important;bottom:0!important;opacity:.38!important}.hero-cart{font-size:78px!important;right:17%!important;bottom:0!important}.hero-bag{font-size:54px!important;right:49%!important;bottom:12%!important}.hero-gift{font-size:48px!important;right:34%!important;top:0!important}.hero-sale-tag{right:57%!important;top:0!important;font-size:19px!important}.hero-side{gap:9px!important;grid-template-rows:110px!important}.side-promo{padding:11px!important}.side-promo b{font-size:16px!important}.side-promo strong{font-size:13px!important}.side-promo i{font-size:29px!important}.service-strip{grid-template-columns:repeat(2,1fr)!important}.service-strip>div{justify-content:flex-start!important;padding-left:8px!important}.section-block{padding-top:23px!important}.section-title-row h2{font-size:20px!important}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}.category-card{min-height:105px!important}.category-icon{font-size:33px!important}.deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.deal-image{height:115px!important}.deal-image>span:last-child{font-size:54px!important}}


/* Stage 3: product, shop and seller center */
.search-filter{display:grid;grid-template-columns:1fr 240px auto;gap:10px;background:#fff;padding:14px;border:1px solid #e3edf6;border-radius:14px}
.search-filter .form-control,.search-filter .form-select{font-size:15px;min-height:43px}
.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;background:#fff;border:1px solid #e3edf6;border-radius:18px;padding:26px}
.detail-image{min-height:360px;background:#eef7ff;border-radius:14px;display:grid;place-items:center;overflow:hidden}
.detail-image img{width:100%;height:100%;max-height:500px;object-fit:contain}.detail-image>span{font-size:130px}
.detail-info h1{font-size:27px;font-weight:800;color:#103b65;margin:10px 0}
.detail-rating{color:#f4b52c;font-size:15px}.detail-rating span{color:#75899d;margin-left:7px}
.detail-price{font-size:30px;font-weight:800;color:#087dcc;margin:18px 0 8px}
.detail-stock{font-size:14px;color:#16805e;font-weight:700}.detail-description{font-size:15px;line-height:1.8;color:#526d86;white-space:normal}
.shop-cover{display:flex;align-items:center;gap:20px;padding:28px;background:linear-gradient(110deg,#dff3ff,#bfe6ff);border-radius:18px}
.shop-avatar{width:82px;height:82px;background:#fff;border-radius:20px;display:grid;place-items:center;font-size:43px;flex:0 0 auto}
.shop-cover small,.seller-dashboard-head small{font-size:12px;letter-spacing:1px;font-weight:800;color:#087dcc}
.shop-cover h1,.seller-dashboard-head h1{font-size:26px;font-weight:800;color:#103b65;margin:5px 0}
.shop-cover p,.seller-dashboard-head p{font-size:14px;color:#59748d;margin:0}
.empty-state{text-align:center;background:#fff;border:1px dashed #cbddeb;border-radius:16px;padding:44px 20px;color:#607991}
.empty-state>div{font-size:48px}.empty-state h3{font-size:20px;font-weight:800;color:#24496a;margin:10px 0}.empty-state p{font-size:14px}
.seller-dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px;background:#eaf6ff;border-radius:16px}
.seller-dashboard-head .btn{white-space:nowrap}
.seller-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.seller-stats>div{background:#fff;border:1px solid #e3edf6;border-radius:13px;padding:17px;display:flex;flex-direction:column;gap:5px}
.seller-stats small{font-size:13px;color:#6d8298}.seller-stats b{font-size:26px;color:#087dcc}
.seller-product-cell{display:flex;align-items:center;gap:10px;min-width:190px}
.seller-product-cell img{width:52px;height:52px;object-fit:cover;border-radius:9px;background:#eef7ff}
.seller-product-cell>span{width:52px;height:52px;display:grid;place-items:center;background:#eef7ff;border-radius:9px;font-size:26px}
.seller-product-cell div{display:flex;flex-direction:column;gap:4px}.seller-product-cell b{font-size:14px}.seller-product-cell small{font-size:12px;color:#8193a5}
.status-pill{display:inline-block;background:#e4f7ee;color:#16805e;border-radius:20px;padding:5px 9px;font-size:12px;font-weight:800}
.seller-form-card{max-width:900px;margin:0 auto;background:#fff;border:1px solid #e3edf6;border-radius:18px;padding:25px}
.seller-form-card .form-label{font-size:14px;font-weight:700;color:#31516e}
.seller-form-card .form-control,.seller-form-card .form-select{font-size:15px;min-height:43px}
@media(max-width:767px){.search-filter{grid-template-columns:1fr}.product-detail{grid-template-columns:1fr;padding:15px;gap:20px}.detail-image{min-height:250px}.detail-info h1{font-size:23px}.detail-price{font-size:25px}.shop-cover{padding:18px;align-items:flex-start}.shop-avatar{width:58px;height:58px;font-size:30px}.shop-cover h1,.seller-dashboard-head h1{font-size:22px}.seller-dashboard-head{align-items:flex-start;flex-direction:column}.seller-stats{gap:8px}.seller-stats>div{padding:12px}.seller-stats b{font-size:22px}.seller-form-card{padding:16px}}

.admin-shop-card{height:100%;background:#fff;border:1px solid #e3edf6;border-radius:15px;padding:18px}.admin-shop-card h3{font-size:18px;font-weight:800;margin:0 0 4px;color:#123b63}.admin-shop-card small{font-size:13px;color:#71869a}.admin-shop-card p{font-size:14px;color:#536f88;margin:16px 0}


/* Stage 4: cart, checkout and order tracking */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
.cart-list,.cart-summary,.checkout-card,.order-card,.order-detail-card{background:#fff;border:1px solid #e2edf6;border-radius:15px}
.cart-row{display:grid;grid-template-columns:90px minmax(0,1fr) auto auto;gap:15px;align-items:center;padding:16px;border-bottom:1px solid #edf2f7}
.cart-row:last-child{border-bottom:0}.cart-thumb{width:90px;height:82px;border-radius:11px;background:#edf7ff;display:grid;place-items:center;font-size:35px;overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-product{display:flex;flex-direction:column;gap:5px}.cart-product>a{font-size:15px;font-weight:700;color:#244968;text-decoration:none}.cart-product small{font-size:12px;color:#8394a5}.cart-product>b{font-size:15px;color:#087dcc}.cart-product em{font-size:12px;color:#d33;font-style:normal}
.cart-quantity{display:flex;align-items:center;gap:6px}.cart-quantity input{width:62px;border:1px solid #dce8f2;border-radius:7px;padding:6px;text-align:center;font-size:14px}
.cart-line-total{text-align:right;font-size:14px;font-weight:800;color:#173e60;white-space:nowrap}.cart-remove{border:0;background:none;color:#dc5360;font-size:12px;padding:5px 0}
.cart-summary{padding:19px;position:sticky;top:155px}.cart-summary h3{font-size:19px;font-weight:800;color:#153d61;margin-bottom:17px}.cart-summary>div:not(.checkout-product){display:flex;justify-content:space-between;gap:10px;margin:11px 0;font-size:14px;color:#60768c}.cart-summary>div>b{color:#244b6b}.cart-summary hr{border-color:#e8eff6}.cart-summary .summary-total{font-size:16px;font-weight:800;color:#163d60}.cart-summary .summary-total b{font-size:19px;color:#087dcc;text-align:right}.continue-shopping{display:block;text-align:center;margin-top:14px;font-size:13px;color:#087dcc;text-decoration:none}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.checkout-main{display:grid;gap:14px}.checkout-card{padding:20px}.checkout-card h3{font-size:17px;font-weight:800;color:#173f62;margin-bottom:17px}.checkout-card .form-label{font-size:13px;font-weight:700;color:#385a78}.checkout-card .form-control,.checkout-card .form-select{font-size:14px;min-height:41px;border-color:#dce8f2}.voucher-input-row{display:flex;align-items:center;gap:12px}.voucher-hint{font-size:12px;color:#1685d5;white-space:nowrap}.payment-choice{display:flex;align-items:center;gap:12px;border:1px solid #d9eaf7;background:#f5faff;padding:14px;border-radius:11px}.payment-choice span{display:flex;flex-direction:column;gap:4px;flex:1}.payment-choice b{font-size:14px;color:#254967}.payment-choice small{font-size:12px;color:#8093a5}.payment-choice strong{font-size:14px;color:#087dcc}
.checkout-summary{position:sticky;top:155px}.checkout-product{display:flex;justify-content:space-between;gap:12px;margin:10px 0;font-size:13px;color:#60768c}.checkout-product b{color:#244b6b;white-space:nowrap}.checkout-safe{display:block;text-align:center;margin-top:12px;color:#8a9aaa;font-size:12px}
.order-list{display:grid;gap:13px}.order-card{padding:17px}.order-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid #edf2f7}.order-card-head>div{display:flex;flex-direction:column;gap:4px}.order-card-head small{font-size:12px;color:#8193a5;letter-spacing:1px}.order-card-head b{font-size:15px;color:#143e62}.order-status{display:inline-block;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:800;background:#fff4dc;color:#a56a00;white-space:nowrap}.status-confirmed{background:#e7f3ff;color:#087dcc}.status-shipping{background:#eaf4ff;color:#176bb0}.status-completed{background:#e4f7ee;color:#16805e}.status-cancelled{background:#fff0f0;color:#c34d55}
.order-card-body{display:flex;align-items:center;gap:20px;padding:13px 0;color:#6b8095;font-size:13px}.order-card-body b{margin-left:auto;color:#087dcc;font-size:16px}.order-detail-card{padding:22px}.order-detail-card h3{font-size:16px;font-weight:800;color:#1b4568;margin:20px 0 10px}.order-detail-card p{font-size:14px;line-height:1.8;color:#647b90}.order-item-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f7;font-size:14px}.order-item-row>div{width:52px;height:48px;border-radius:8px;background:#eef7ff;display:grid;place-items:center;overflow:hidden;font-size:25px}.order-item-row img{width:100%;height:100%;object-fit:cover}.order-item-row span{flex:1}.order-item-row b{color:#087dcc}.order-totals{max-width:360px;margin:18px 0 0 auto}.order-totals>div{display:flex;justify-content:space-between;margin:9px 0;font-size:14px;color:#647b90}.order-totals .summary-total{border-top:1px solid #e8eff6;padding-top:13px;font-size:16px;font-weight:800;color:#163d60}.order-totals .summary-total b{font-size:20px;color:#087dcc}
.detail-add-cart{display:flex;gap:10px;flex-wrap:wrap}.product-card-link{color:inherit}.product-card-link:hover{color:inherit}
@media(max-width:991px){.cart-layout,.checkout-layout{grid-template-columns:1fr}.cart-summary,.checkout-summary{position:static}.cart-summary{order:2}}
@media(max-width:575px){.cart-row{grid-template-columns:66px minmax(0,1fr) auto;gap:10px;padding:12px}.cart-thumb{width:66px;height:66px}.cart-quantity{grid-column:2;grid-row:2}.cart-line-total{grid-column:3;grid-row:1/3}.cart-quantity .btn{font-size:12px}.cart-line-total{font-size:13px}.checkout-card{padding:15px}.voucher-input-row{align-items:flex-start;flex-direction:column}.order-card{padding:13px}.order-card-body{flex-wrap:wrap;gap:8px}.order-card-body b{width:100%;margin-left:0}.order-detail-card{padding:15px}}


/* Public shop profile: seller-customized logo and cover */
.shop-public-page { padding-top:28px;padding-bottom:55px; }
.shop-public-hero { overflow:hidden;border:1px solid #dce9f5;border-radius:19px;background:#fff;box-shadow:0 8px 26px rgba(20,69,108,.055); }
.shop-public-cover { position:relative;height:185px;overflow:hidden;background:linear-gradient(115deg,#dff3ff,#a9dcfa); }
.shop-public-cover>img { width:100%;height:100%;object-fit:cover; }
.shop-public-cover-pattern { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.42),transparent 22%),linear-gradient(110deg,#dff3ff,#b9e4ff);color:#4e91be; }
.shop-public-cover-pattern span { font-size:24px;font-weight:950;letter-spacing:4px;opacity:.48; }
.shop-public-cover-pattern b { font-size:12px;letter-spacing:2px;opacity:.7; }
.shop-public-identity { display:flex;align-items:center;gap:16px;padding:0 25px 22px; }
.shop-public-logo { display:grid;place-items:center;width:88px;height:88px;flex:0 0 88px;margin-top:-36px;overflow:hidden;border:5px solid #fff;border-radius:21px;background:#eef7ff;box-shadow:0 5px 17px rgba(20,69,108,.12);font-size:39px;position:relative; }
.shop-public-logo img { width:100%;height:100%;object-fit:cover; }
.shop-public-title { min-width:0;flex:1;padding-top:14px; }
.shop-public-title small { color:#078bd0;font-size:12px;font-weight:950;letter-spacing:1.4px; }
.shop-public-title h1 { margin:4px 0;color:#143e65;font-size:25px;font-weight:950;letter-spacing:-.5px;overflow-wrap:anywhere; }
.shop-public-title p { margin:0;color:#7c92a6;font-size:13px;line-height:1.6;white-space:pre-line; }
.shop-public-status { padding:8px 11px;border-radius:25px;background:#e9f8f0;color:#159568;font-size:12px;font-weight:900;white-space:nowrap; }
@media(max-width:575px) {
 .shop-public-cover { height:130px; }
 .shop-public-identity { align-items:flex-start;flex-wrap:wrap;padding:0 14px 16px;gap:10px; }
 .shop-public-logo { width:68px;height:68px;flex-basis:68px;border-radius:16px;margin-top:-25px;font-size:30px; }
 .shop-public-title { padding-top:8px;flex-basis:calc(100% - 80px); }
 .shop-public-title h1 { font-size:22px; }
 .shop-public-status { margin-left:78px;margin-top:-4px; }
}


/* Product cards: reliable image fallback + consistent purchase controls */
.product-image { height:175px; display:grid; place-items:center; background:linear-gradient(145deg,#f4faff,#e4f2fd); }
.product-image img { display:block; width:100%; height:100%; object-fit:cover; }
.product-placeholder { width:100%; height:100%; min-height:175px; display:grid; place-items:center; }
.product-search-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #dce9f5; border-radius:15px; overflow:hidden; box-shadow:0 5px 17px rgba(25,75,117,.045); transition:transform .18s ease,box-shadow .18s ease; }
.product-search-card:hover { transform:translateY(-3px); box-shadow:0 12px 25px rgba(25,75,117,.1); }
.product-search-card .product-card-link { display:flex!important; flex:1; flex-direction:column; min-width:0; color:inherit; text-decoration:none; }
.product-search-card .product-image { flex:0 0 175px; }
.product-search-card .product-info { flex:1; padding:13px 13px 8px; }
.product-search-card .product-info h3 { min-height:38px; font-size:14px; line-height:1.45; font-weight:750; }
.product-search-card .product-info>small:last-child { display:block; margin-top:5px; }
.product-buy-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 12px; margin:0; }
.product-buy-actions button { display:inline-flex; align-items:center; justify-content:center; min-width:0; min-height:39px; padding:8px 7px; border-radius:9px; font-family:inherit; font-size:12px; line-height:1.2; font-weight:850; white-space:nowrap; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.btn-add-cart { border:1px solid #b9ddf6; background:#eff8ff; color:#087dcc; }
.btn-add-cart:hover:not(:disabled) { border-color:#087dcc; background:#e1f2ff; }
.btn-buy-now { border:1px solid #087dcc; background:linear-gradient(100deg,#0a96d9,#0874c4); color:#fff; }
.btn-buy-now:hover:not(:disabled) { background:#075f9f; transform:translateY(-1px); }
.product-buy-actions button:disabled { opacity:.48; cursor:not-allowed; }
.product-card:not(.product-search-card) .product-buy-actions { padding:0 11px 11px; }
.product-card:not(.product-search-card) .product-buy-actions button { min-height:37px; font-size:12px; }
.product-search-page { padding-top:25px; padding-bottom:55px; }
.product-search-page .section-title-row { margin-bottom:15px; }
.product-search-page .search-filter { display:grid; grid-template-columns:minmax(0,1fr) 220px auto; gap:9px; align-items:center; padding:12px; border:1px solid #deebf6; border-radius:13px; background:#fff; box-shadow:0 5px 15px rgba(24,76,119,.035); }
.product-search-page .search-filter .form-control,.product-search-page .search-filter .form-select { min-height:42px; border-color:#dce8f2; border-radius:8px; font-size:13px; box-shadow:none; }
.product-search-page .search-filter .btn { min-height:42px; padding:0 18px; border-radius:8px; font-size:13px; font-weight:850; }
@media(max-width:700px) {
 .product-search-page .search-filter { grid-template-columns:1fr 1fr; }
 .product-search-page .search-filter .form-control { grid-column:1/-1; }
 .product-search-page .search-filter .btn { width:100%; }
 .product-search-card .product-image { flex-basis:145px; }
 .product-image { height:145px; }
 .product-buy-actions { gap:6px; padding:0 8px 9px; }
 .product-buy-actions button { min-height:36px; font-size:12px; }
}


/* ==========================================================
   CHỢ ONLINE — FIRST-VISIT WELCOME POPUP
   ========================================================== */
body.welcome-modal-open { overflow:hidden; }
.welcome-modal {
  position:fixed;inset:0;z-index:12000;
  display:none;align-items:center;justify-content:center;
  padding:22px;
}
.welcome-modal.is-visible { display:flex; }
.welcome-modal-backdrop {
  position:absolute;inset:0;
  background:rgba(5,30,54,.62);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  opacity:0;transition:opacity .25s ease;
}
.welcome-modal.is-visible .welcome-modal-backdrop { opacity:1; }
.welcome-modal-card {
  position:relative;z-index:1;
  display:grid;grid-template-columns:.92fr 1.08fr;
  width:min(760px,100%);min-height:420px;max-height:min(690px,calc(100vh - 44px));
  overflow:hidden;border:1px solid rgba(255,255,255,.8);
  border-radius:25px;background:#fff;
  box-shadow:0 28px 90px rgba(0,28,57,.28);
  opacity:0;transform:translateY(18px) scale(.975);
  transition:opacity .28s ease,transform .28s ease;
}
.welcome-modal.is-visible .welcome-modal-card { opacity:1;transform:translateY(0) scale(1); }
.welcome-modal-close {
  position:absolute;top:13px;right:13px;z-index:5;
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid rgba(211,229,243,.9);border-radius:50%;
  background:rgba(255,255,255,.94);color:#52718c;
  font-size:24px;line-height:1;cursor:pointer;
  transition:background .18s,color .18s,transform .18s;
}
.welcome-modal-close:hover { background:#eaf6ff;color:#087dcc;transform:rotate(90deg); }
.welcome-modal-art {
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:420px;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.58),transparent 34%),
    linear-gradient(145deg,#dff3ff 0%,#b8e4ff 52%,#85cdf8 100%);
}
.welcome-modal-art:before,.welcome-modal-art:after {
  content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.48);border-radius:50%;
}
.welcome-modal-art:before { width:390px;height:390px;left:-150px;bottom:-220px; }
.welcome-modal-art:after { width:310px;height:310px;right:-155px;top:-155px; }
.welcome-art-orbit {
  position:absolute;border:1px dashed rgba(255,255,255,.78);border-radius:50%;
}
.welcome-orbit-one { width:235px;height:235px; }
.welcome-orbit-two { width:175px;height:175px;border-style:solid;border-color:rgba(255,255,255,.55); }
.welcome-art-bag {
  position:relative;z-index:2;display:grid;place-items:center;
  width:148px;height:148px;border:1px solid rgba(255,255,255,.85);
  border-radius:35px;background:linear-gradient(145deg,#fff,#e7f7ff);
  box-shadow:0 22px 48px rgba(25,108,165,.18);
  font-size:82px;transform:rotate(-7deg);
}
.welcome-art-gift,.welcome-art-cart {
  position:absolute;z-index:3;display:grid;place-items:center;
  width:62px;height:62px;border:1px solid rgba(255,255,255,.9);
  border-radius:19px;background:#fff;box-shadow:0 12px 26px rgba(21,100,158,.15);
  font-size:32px;
}
.welcome-art-gift { top:72px;right:54px;transform:rotate(9deg); }
.welcome-art-cart { left:48px;bottom:84px;transform:rotate(-8deg); }
.welcome-art-spark { position:absolute;color:#fff;font-style:normal;font-size:25px; }
.welcome-spark-one { left:62px;top:75px; }.welcome-spark-two { right:72px;bottom:93px;font-size:31px; }
.welcome-art-label {
  position:absolute;bottom:27px;left:0;right:0;
  color:#377ca8;text-align:center;font-size:12px;font-weight:950;letter-spacing:2.3px;
}
.welcome-modal-content {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;padding:45px 43px 32px;text-align:center;
}
.welcome-modal-logo { display:flex;align-items:center;justify-content:center;width:195px;height:59px;margin-bottom:19px; }
.welcome-modal-logo img { display:block;max-width:100%;max-height:100%;object-fit:contain; }
.welcome-modal-kicker {
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:10px;color:#078bd0;font-size:12px;font-weight:950;letter-spacing:1.45px;
}
.welcome-modal-kicker i { width:7px;height:7px;border-radius:50%;background:#18a5e4;box-shadow:0 0 0 4px #e5f6ff; }
.welcome-modal-content h2 {
  margin:0;color:#173f63;font-size:29px;line-height:1.18;
  font-weight:850;letter-spacing:-.6px;
}
.welcome-modal-content h2 strong { color:#078bd0;font-weight:950; }
.welcome-modal-content>p {
  max-width:365px;margin:13px 0 18px;color:#8298aa;
  font-size:14px;line-height:1.75;
}
.welcome-modal-benefits {
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  width:100%;margin-bottom:22px;
}
.welcome-modal-benefits span {
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 9px;border:1px solid #e2eff8;border-radius:30px;
  background:#f6fbff;color:#55758e;font-size:12px;font-weight:800;white-space:nowrap;
}
.welcome-modal-benefits b {
  display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:#e0f6ed;color:#15966b;font-size:12px;
}
.welcome-modal-primary {
  display:flex;align-items:center;justify-content:center;gap:18px;
  width:100%;min-height:48px;padding:0 17px;border-radius:11px;
  background:linear-gradient(100deg,#0796d9,#0875c5);
  color:#fff!important;font-size:14px;font-weight:950;text-decoration:none!important;
  box-shadow:0 9px 20px rgba(8,125,204,.2);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.welcome-modal-primary b { font-size:22px;line-height:1; }
.welcome-modal-primary:hover { color:#fff;filter:brightness(.97);transform:translateY(-2px);box-shadow:0 13px 25px rgba(8,125,204,.25); }
.welcome-modal-secondary {
  margin-top:11px;padding:6px 12px;border:0;background:transparent;
  color:#8ba0b2;font-size:12px;font-weight:800;cursor:pointer;
}
.welcome-modal-secondary:hover { color:#087dcc;text-decoration:underline; }
.welcome-modal-note { margin-top:13px;color:#a2b1be;font-size:12px; }
@media(max-width:650px) {
  .welcome-modal { padding:12px; }
  .welcome-modal-card {
    display:flex;flex-direction:column;
    width:min(430px,100%);max-height:calc(100vh - 24px);
    overflow:auto;border-radius:21px;
  }
  .welcome-modal-art { min-height:172px;flex:0 0 172px; }
  .welcome-orbit-one { width:145px;height:145px; }
  .welcome-orbit-two { width:112px;height:112px; }
  .welcome-art-bag { width:84px;height:84px;border-radius:23px;font-size:47px; }
  .welcome-art-gift,.welcome-art-cart { width:41px;height:41px;border-radius:13px;font-size:24px; }
  .welcome-art-gift { top:22px;right:calc(50% - 106px); }
  .welcome-art-cart { left:calc(50% - 112px);bottom:31px; }
  .welcome-spark-one { left:calc(50% - 125px);top:27px;font-size:19px; }
  .welcome-spark-two { right:calc(50% - 120px);bottom:35px;font-size:23px; }
  .welcome-art-label { bottom:9px;font-size:12px;letter-spacing:1.7px; }
  .welcome-modal-content { padding:20px 22px 19px; }
  .welcome-modal-logo { width:154px;height:45px;margin-bottom:11px; }
  .welcome-modal-kicker { margin-bottom:7px;font-size:12px; }
  .welcome-modal-content h2 { font-size:26px; }
  .welcome-modal-content>p { margin:9px 0 13px;font-size:13px; }
  .welcome-modal-benefits { gap:6px;margin-bottom:14px; }
  .welcome-modal-benefits span { padding:6px 8px;font-size:12px; }
  .welcome-modal-primary { min-height:44px; }
  .welcome-modal-note { margin-top:9px; }
  .welcome-modal-close { top:9px;right:9px;width:30px;height:30px; }
}
@media(prefers-reduced-motion:reduce) {
  .welcome-modal-backdrop,.welcome-modal-card,.welcome-modal-close,.welcome-modal-primary {transition:none}
}


/* ==========================================================
   PRODUCT REVIEWS — VERIFIED PURCHASES, COMMENTS & VIDEOS
   ========================================================== */
.detail-rating {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.product-detail-stars,.product-review-score-stars {color:#f2ad24;letter-spacing:1px}
.detail-rating strong {color:#315777;font-size:14px}
.detail-rating a {color:#087dcc;font-size:13px;font-weight:800;text-decoration:none}
.product-reviews-section {
  margin-top:24px;margin-bottom:45px;padding:26px;
  border:1px solid #deebf6;border-radius:18px;background:#fff;
  box-shadow:0 8px 24px rgba(20,69,108,.045);
}
.product-reviews-heading {
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:19px;border-bottom:1px solid #edf2f7;
}
.product-reviews-eyebrow {color:#078bd0;font-size:12px;font-weight:950;letter-spacing:1.7px}
.product-reviews-heading h2 {margin:5px 0;color:#163f65;font-size:23px;font-weight:950}
.product-reviews-heading p {margin:0;color:#8499ab;font-size:13px}
.product-review-score {
  display:grid;justify-items:center;gap:2px;min-width:112px;
  padding:12px 15px;border:1px solid #e1edf7;border-radius:13px;background:#f7fbff;
}
.product-review-score>strong {color:#133e64;font-size:28px;font-weight:950;line-height:1}
.product-review-score-stars {font-size:15px}
.product-review-score small {color:#8298aa;font-size:12px}
.product-review-form-card {
  margin:20px 0;padding:19px;border:1px solid #d9eaf7;border-radius:15px;
  background:linear-gradient(135deg,#f8fcff,#fff);
}
.product-review-form-title {display:flex;align-items:center;gap:11px;margin-bottom:15px}
.product-review-form-title>span:first-child {
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:11px;background:#e5f4ff;font-size:20px;
}
.product-review-form-title>div {min-width:0;flex:1}
.product-review-form-title h3 {margin:0 0 3px;color:#23496a;font-size:16px;font-weight:950}
.product-review-form-title p {margin:0;color:#8a9eaf;font-size:12px}
.product-verified-badge {padding:7px 9px;border-radius:20px;background:#e9f8f0;color:#15966b;font-size:12px;font-weight:900;white-space:nowrap}
.product-review-form {display:grid;gap:9px}
.product-review-rating-field {display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.product-review-rating-field>span,.product-review-label {color:#315473;font-size:12px;font-weight:900}
.product-star-picker {display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.product-star-picker input {position:absolute;opacity:0;width:1px;height:1px}
.product-star-picker label {margin:0;color:#d5e0e8;font-size:27px;line-height:1;cursor:pointer;transition:color .12s,transform .12s}
.product-star-picker label:hover,.product-star-picker label:hover~label,
.product-star-picker input:checked~label {color:#f2ad24}
.product-star-picker label:hover {transform:scale(1.12)}
.product-star-picker input:focus-visible+label {outline:2px solid #168bd0;outline-offset:3px;border-radius:3px}
.product-review-label {margin-top:4px}
.product-review-form textarea {
  width:100%;min-height:94px;padding:12px 13px;
  border:1px solid #d8e6f2;border-radius:10px;background:#fff;
  outline:0;color:#284c6c;font-size:13px;line-height:1.65;resize:vertical;
}
.product-review-form textarea:focus {border-color:#158ed2;box-shadow:0 0 0 3px rgba(21,142,210,.08)}
.product-review-video-field {
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  border:1px dashed #c8dfef;border-radius:11px;background:#f4faff;
}
.product-review-video-icon {
  display:grid;place-items:center;width:37px;height:37px;flex:0 0 37px;
  border-radius:10px;background:#e1f2ff;color:#087dcc;font-size:17px;
}
.product-review-video-copy {display:grid;gap:3px;min-width:0;flex:1}
.product-review-video-copy b {color:#315777;font-size:12px;font-weight:950}
.product-review-video-copy small {color:#879bad;font-size:12px;line-height:1.5}
.product-review-video-button {
  display:inline-flex;align-items:center;justify-content:center;min-height:33px;
  padding:0 11px;border:1px solid #bcdcf2;border-radius:8px;background:#fff;
  color:#087dcc;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap;
}
.product-review-video-button:hover {background:#087dcc;color:#fff}
.product-review-video-field input[type=file] {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.product-review-video-name {color:#17885f;font-size:12px;font-weight:800}
.product-review-existing-video {display:grid;gap:7px;padding:10px;border:1px solid #e6eef5;border-radius:10px;background:#fff}
.product-review-existing-video>span {color:#315777;font-size:12px;font-weight:900}
.product-review-existing-video video {width:min(320px,100%);max-height:190px;border-radius:8px;background:#102f4c}
.product-review-existing-video label {color:#788fa3;font-size:12px}
.product-review-submit {
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  justify-self:start;min-height:40px;padding:0 18px;border:0;border-radius:9px;
  background:linear-gradient(100deg,#0796da,#0875c5);color:#fff;
  font-size:12px;font-weight:950;cursor:pointer;box-shadow:0 6px 15px rgba(8,125,204,.15);
}
.product-review-submit b {font-size:19px}
.product-review-eligibility {
  display:flex;align-items:flex-start;gap:12px;margin:19px 0;padding:15px;
  border:1px solid #e0edf7;border-radius:12px;background:#f7fbff;
}
.product-review-eligibility>span {font-size:23px}
.product-review-eligibility b {display:block;margin-bottom:4px;color:#315777;font-size:13px;font-weight:950}
.product-review-eligibility p {margin:0;color:#8298aa;font-size:12px;line-height:1.6}
.product-review-eligibility a {display:inline-block;margin-top:7px;color:#087dcc;font-size:12px;font-weight:900;text-decoration:none}
.product-review-list-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin:23px 0 11px}
.product-review-list-heading h3 {margin:0;color:#173f64;font-size:17px;font-weight:950}
.product-review-list-heading>span {color:#91a2b1;font-size:12px}
.product-review-list {display:grid;gap:11px}
.product-review-card {padding:16px 0;border-top:1px solid #edf2f7}
.product-review-user {display:flex;align-items:center;gap:10px}
.product-review-avatar {
  display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;
  overflow:hidden;border-radius:50%;background:#e7f4ff;color:#087dcc;font-size:16px;font-weight:950;
}
.product-review-avatar img {width:100%;height:100%;object-fit:cover}
.product-review-user>div:nth-child(2) {display:grid;gap:3px;min-width:0;flex:1}
.product-review-user>div:nth-child(2)>b {color:#294e6d;font-size:12px}
.product-review-user>div:nth-child(2)>small {color:#15966b;font-size:12px}
.product-review-stars {color:#f2ad24;font-size:14px;white-space:nowrap}
.product-review-comment {margin:12px 0 0 49px;color:#58738b;font-size:13px;line-height:1.75;white-space:pre-line;overflow-wrap:anywhere}
.product-review-video {display:grid;gap:5px;width:min(360px,calc(100% - 49px));margin:12px 0 0 49px}
.product-review-video video {width:100%;max-height:250px;border-radius:10px;background:#102f4c}
.product-review-video small {color:#91a2b1;font-size:12px}
.product-review-seller-reply {
  margin:12px 0 0 49px;padding:11px 13px;border-left:3px solid #1598d7;
  border-radius:0 9px 9px 0;background:#f1f9ff;
}
.product-review-seller-reply b {color:#087dcc;font-size:12px;font-weight:950}
.product-review-seller-reply p {margin:5px 0;color:#5e7c95;font-size:12px;line-height:1.65;white-space:pre-line}
.product-review-seller-reply small {color:#91a2b1;font-size:12px}
.product-review-empty {display:grid;justify-items:center;gap:6px;padding:32px 15px;border-top:1px solid #edf2f7;text-align:center}
.product-review-empty>span {color:#e0b34c;font-size:33px}
.product-review-empty b {color:#315777;font-size:14px}
.product-review-empty p {margin:0;color:#8a9eaf;font-size:12px}
@media(max-width:700px) {
  .product-reviews-section {padding:17px 13px;border-radius:14px}
  .product-reviews-heading {align-items:flex-start}
  .product-reviews-heading h2 {font-size:19px}
  .product-reviews-heading p {font-size:12px}
  .product-review-score {min-width:85px;padding:9px}
  .product-review-score>strong {font-size:25px}
  .product-review-score-stars {font-size:12px}
  .product-review-form-card {padding:13px}
  .product-review-form-title {flex-wrap:wrap}
  .product-verified-badge {margin-left:49px}
  .product-review-video-field {flex-wrap:wrap}
  .product-review-video-copy {flex-basis:calc(100% - 50px)}
  .product-review-video-button {margin-left:48px}
  .product-review-comment,.product-review-video,.product-review-seller-reply {margin-left:0;width:100%}
  .product-review-user {flex-wrap:wrap}
  .product-review-stars {margin-left:auto}
}


/* Header notification bell */
.header-notification-bell {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 34px;margin:0 1px;
  border:1px solid #e0edf7;border-radius:50%;
  background:#f5faff;color:#087dcc!important;
  text-decoration:none!important;font-size:21px;line-height:1;
  transition:background .18s,border-color .18s,transform .18s;
}
.header-notification-bell:hover {background:#e8f5ff;border-color:#a9d8f3;transform:translateY(-1px)}
.header-notification-bell b {
  position:absolute;top:-5px;right:-6px;
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border:2px solid #fff;border-radius:12px;
  background:#e34e58;color:#fff;font-size:12px;line-height:1;font-weight:950;
}
@media(max-width:991px) {
 .header-notification-bell {width:31px;height:31px;flex-basis:31px}
}


/* Stage 21 — notification bell popover (opens directly below the bell) */
.header-notification-wrap {position:relative;display:inline-flex;align-items:center;flex:0 0 auto;z-index:1205}
.header-notification-bell {cursor:pointer;padding:0;font-family:inherit}
.header-notification-bell:focus-visible {outline:3px solid rgba(8,125,204,.22);outline-offset:3px}
.header-notification-popover {
  position:absolute;top:calc(100% + 13px);right:-12px;z-index:12050;
  display:flex;flex-direction:column;width:370px;max-width:min(370px,calc(100vw - 24px));
  max-height:min(570px,calc(100vh - 110px));overflow:hidden;
  border:1px solid #e0eaf3;border-radius:17px;background:#fff;
  box-shadow:0 18px 50px rgba(15,48,79,.2),0 3px 9px rgba(18,72,115,.06);
  transform-origin:top right;animation:notificationPopoverIn .16s ease-out;
}
.header-notification-popover[hidden] {display:none!important}
@keyframes notificationPopoverIn {from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.header-notification-popover-head {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 17px 13px;border-bottom:1px solid #edf2f7;background:linear-gradient(110deg,#fff,#f6fbff)}
.header-notification-popover-head>div {display:grid;gap:4px;min-width:0}
.header-notification-popover-head strong {color:#183f63;font-size:17px;font-weight:950}
.header-notification-popover-head small {color:#8499ab;font-size:12px}
.header-notification-popover-head>a,.header-notification-popover-foot>a {color:#087dcc!important;font-size:12px;font-weight:900;text-decoration:none!important;white-space:nowrap}
.header-notification-popover-list {overflow-y:auto;overscroll-behavior:contain;padding:5px 9px;min-height:70px}
.header-notification-form {margin:0}
.header-notification-row {position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 9px;border:0;border-bottom:1px solid #f0f4f8;border-radius:10px;background:#fff;text-align:left;cursor:pointer;transition:background .15s ease}
.header-notification-row:hover {background:#f4f9fe}
.header-notification-row.is-unread {background:#f3f9ff}
.header-notification-row.is-unread:hover {background:#eaf5ff}
.header-notification-row-icon {display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:11px;background:#e7f4ff;color:#087dcc;font-size:19px;font-weight:900}
.header-notification-form:nth-child(3n+2) .header-notification-row-icon {background:#fff5df;color:#c18b1e}
.header-notification-row-copy {display:grid;gap:4px;min-width:0;flex:1}
.header-notification-row-copy strong {color:#254a69;font-size:12px;font-weight:950;line-height:1.4}
.header-notification-row-copy small {display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#748ba0;font-size:12px;line-height:1.5}
.header-notification-row-copy time {color:#9aabba;font-size:12px}
.header-notification-unread-dot {width:8px;height:8px;flex:0 0 8px;margin:6px 2px 0 0;border-radius:50%;background:#ed4d5a;box-shadow:0 0 0 3px #ffedf0}
.header-notification-empty {display:grid;justify-items:center;gap:5px;padding:27px 15px;text-align:center}
.header-notification-empty>span {font-size:26px}
.header-notification-empty strong {color:#345775;font-size:13px}
.header-notification-empty small {color:#91a2b1;font-size:12px}
.header-notification-popover-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-top:1px solid #edf2f7;background:#fbfdff}
.header-notification-popover-foot form {margin:0}
.header-notification-popover-foot button {padding:0;border:0;background:transparent;color:#71889c;font-size:12px;font-weight:800;cursor:pointer}
.header-notification-popover-foot>span {color:#8399ab;font-size:12px}
@media(max-width:991px) {
  .header-notification-popover {position:fixed;top:calc(var(--notification-header-bottom,145px) + 8px);right:12px;left:auto;width:370px;max-height:calc(100vh - var(--notification-header-bottom,145px) - 24px)}
}
@media(max-width:480px) {
  .header-notification-popover {right:8px;width:calc(100vw - 16px);max-width:calc(100vw - 16px)}
  .header-notification-popover-head {padding:14px 13px 11px}
  .header-notification-popover-list {padding:4px 6px}
}


/* ==========================================================
   STAGE 22 — FOLLOW SHOPS, PRIVACY, ACCOUNT SAFETY & CHAT
   ========================================================== */
.header-chat-shortcut .nav-symbol {font-size:16px}
.shop-public-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.shop-public-actions form {margin:0}
.shop-follow-button,.shop-chat-button {
 display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;
 padding:0 14px;border:1px solid #b9dcf3;border-radius:9px;background:#f1f9ff;
 color:#087dcc;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer;
}
.shop-follow-button:hover,.shop-follow-button.is-following {background:#e2f4ff;border-color:#8ac7eb}
.shop-chat-button {background:#087dcc;border-color:#087dcc;color:#fff}
.shop-chat-button:hover {background:#075f9f;color:#fff}
.shop-followers-count {color:#8ba0b2;font-size:12px;white-space:nowrap}
.shop-following-page {min-height:450px}
.shop-following-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.shop-following-card {display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #deebf6;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(20,73,112,.04)}
.shop-following-avatar {display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;overflow:hidden;border-radius:13px;background:#e8f5ff;color:#087dcc;font-size:26px}
.shop-following-avatar img {width:100%;height:100%;object-fit:cover}
.shop-following-card>div {display:grid;gap:4px;min-width:0}
.shop-following-card b {color:#1d476b;font-size:14px}
.shop-following-card small {color:#8da1b1;font-size:12px}
.shop-following-card p {margin:0;color:#627e96;font-size:12px;line-height:1.5}
.shop-following-card>div>a {color:#087dcc;font-size:12px;font-weight:900;text-decoration:none}
.shop-following-empty {display:grid;justify-items:center;gap:7px;padding:55px 15px;border:1px solid #e2edf6;border-radius:15px;background:#fff;color:#8299ab;text-align:center}
.shop-following-empty>span {font-size:34px}.shop-following-empty>b {color:#315777;font-size:15px}.shop-following-empty p {margin:0;font-size:12px}.shop-following-empty a {color:#087dcc;font-size:12px;font-weight:900}

/* Policy pages */
.policy-page {max-width:1000px;min-height:55vh;padding-top:30px;padding-bottom:55px}
.policy-hero {padding:28px 30px;border:1px solid #cfe6f8;border-radius:18px;background:linear-gradient(120deg,#eaf7ff,#f7fbff)}
.policy-hero>span {color:#078bd0;font-size:12px;font-weight:950;letter-spacing:1.5px}
.policy-hero h1 {margin:9px 0;color:#153f65;font-size:29px;font-weight:950}
.policy-hero p {max-width:720px;margin:0 0 10px;color:#627f98;font-size:14px;line-height:1.7}
.policy-hero small {color:#91a3b2;font-size:12px}
.policy-content {display:grid;gap:12px;margin-top:15px}
.policy-content article {padding:19px 21px;border:1px solid #e1edf6;border-radius:13px;background:#fff}
.policy-content h2 {margin:0 0 8px;color:#254d6e;font-size:16px;font-weight:950}
.policy-content p {margin:0;color:#607b93;font-size:13px;line-height:1.8}
.policy-content a {color:#087dcc;font-weight:800}
.policy-disclaimer {padding:12px 14px;border-left:3px solid #e5b04a;border-radius:0 9px 9px 0;background:#fff9ec;color:#8e713b!important;font-size:12px!important}

/* Account lock warning */
.account-locked-screen {display:grid;place-items:center;min-height:calc(100vh - 180px);padding:30px 15px;background:radial-gradient(circle at 50% 10%,#e4f4ff,#f7fbff 60%)}
.account-locked-modal {width:min(560px,100%);padding:30px;border:1px solid #e2edf6;border-radius:20px;background:#fff;box-shadow:0 20px 70px rgba(19,66,105,.15);text-align:center}
.account-locked-symbol {display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:18px;background:#fff0f0;color:#d64e59;font-size:31px;font-weight:950}
.account-locked-kicker {color:#d65a61;font-size:12px;font-weight:950;letter-spacing:1.5px}
.account-locked-modal h1 {margin:8px 0;color:#173e62;font-size:26px;font-weight:950}
.account-locked-modal>p {margin:0 auto 16px;max-width:420px;color:#71899d;font-size:13px;line-height:1.7}
.account-locked-reason {padding:13px 15px;border:1px solid #f2dada;border-radius:11px;background:#fff8f8;text-align:left}
.account-locked-reason small {color:#b4555d;font-size:12px;font-weight:950;letter-spacing:1px}
.account-locked-reason p {margin:5px 0 0;color:#704e53;font-size:12px;line-height:1.7}
.account-locked-primary,.account-locked-support {display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:12px;border-radius:9px;background:#087dcc;color:#fff!important;font-size:13px;font-weight:950;text-decoration:none}
.account-locked-primary:hover {background:#075d9d}
.account-locked-support {border:1px solid #cfe3f3;background:#f2f9ff;color:#087dcc!important}
.account-locked-modal form {margin-top:10px}
.account-locked-modal form button {border:0;background:transparent;color:#8497a8;font-size:12px;text-decoration:underline}
.account-locked-foot {display:block;margin-top:14px;color:#91a2b1;font-size:12px;line-height:1.6}
.account-locked-pending {margin-top:13px;padding:11px;border-radius:9px;background:#eaf8f0;color:#16835f;font-size:12px;font-weight:850}
.login-locked-alert {display:flex;gap:11px;margin:12px 0;padding:13px;border:1px solid #f0d5d5;border-radius:11px;background:#fff7f7}
.login-locked-alert>span {font-size:22px;color:#d4545d}
.login-locked-alert>div {display:grid;gap:4px;text-align:left}
.login-locked-alert b {color:#a8444b;font-size:13px}
.login-locked-alert p {margin:0;color:#75565a;font-size:12px;line-height:1.5}
.login-locked-alert a {color:#087dcc;font-size:12px;font-weight:900;margin-right:10px}

/* Chat inbox */
.chat-page {max-width:1100px;min-height:55vh;padding-top:22px;padding-bottom:50px}
.chat-inbox-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px;padding:21px 23px;border:1px solid #dcebf7;border-radius:15px;background:linear-gradient(110deg,#f0f9ff,#fff)}
.chat-inbox-heading>div>span {color:#078bd0;font-size:12px;font-weight:950;letter-spacing:1.5px}
.chat-inbox-heading h1 {margin:5px 0;color:#183f64;font-size:25px;font-weight:950}
.chat-inbox-heading p {margin:0;color:#8299ab;font-size:12px}
.chat-support-new {padding:10px 13px;border-radius:9px;background:#087dcc;color:#fff;font-size:12px;font-weight:900;text-decoration:none}
.chat-inbox-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chat-inbox-card {display:flex;align-items:center;gap:11px;min-width:0;padding:13px;border:1px solid #dfebf5;border-radius:13px;background:#fff;color:#315777;text-decoration:none;box-shadow:0 5px 17px rgba(19,65,102,.035);transition:border-color .15s,transform .15s}
.chat-inbox-card:hover {border-color:#a6d4f0;transform:translateY(-1px)}
.chat-inbox-card.support {border-color:#c9e5f7;background:#f4faff}
.chat-inbox-icon {display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#e5f4ff;font-size:22px}
.chat-inbox-card>div {display:grid;gap:3px;min-width:0;flex:1}
.chat-inbox-card b {color:#21496a;font-size:12px;font-weight:950}
.chat-inbox-card small {color:#879cae;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-inbox-card strong {color:#087dcc;font-size:12px;white-space:nowrap}
.chat-inbox-empty {grid-column:1/-1;display:grid;justify-items:center;gap:6px;padding:45px 15px;border:1px solid #e3edf5;border-radius:14px;background:#fff;color:#8298aa;text-align:center}
.chat-inbox-empty>b {color:#315777;font-size:14px}.chat-inbox-empty p {margin:0;font-size:12px}

/* Chat thread */
.chat-thread-shell {display:flex;flex-direction:column;height:min(720px,calc(100vh - 240px));min-height:490px;overflow:hidden;border:1px solid #dce9f4;border-radius:16px;background:#fff;box-shadow:0 12px 35px rgba(19,65,102,.07)}
.chat-thread-header {display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid #eaf0f5;background:#fff}
.chat-back {color:#087dcc;font-size:21px;text-decoration:none}
.chat-thread-avatar {display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#e6f4ff;font-size:22px}
.chat-thread-header>div:nth-of-type(1) {display:grid;gap:3px;min-width:0;flex:1}
.chat-thread-header b {color:#21496a;font-size:14px}
.chat-thread-header small {color:#8198ab;font-size:12px}
.chat-human-badge,.chat-private-badge {padding:6px 8px;border-radius:15px;background:#e8f6ff;color:#078bd0;font-size:12px;font-weight:950;white-space:nowrap}
.chat-human-badge {background:#eaf8f0;color:#15966b}
.chat-privacy-note {padding:8px 13px;border-bottom:1px solid #eaf0f5;background:#f5faff;color:#718a9e;font-size:12px;line-height:1.5}
.chat-message-list {display:flex;flex:1;flex-direction:column;gap:10px;overflow-y:auto;padding:18px;background:linear-gradient(180deg,#f7fbff,#f5f9fd)}
.chat-welcome-message {display:grid;justify-items:center;align-self:center;gap:6px;margin:auto;padding:18px;text-align:center}
.chat-welcome-message>span {font-size:31px}.chat-welcome-message>b {color:#315777;font-size:14px}.chat-welcome-message>small {max-width:300px;color:#8b9eae;font-size:12px;line-height:1.55}
.chat-message {display:grid;gap:4px;max-width:min(76%,560px);align-self:flex-start}
.chat-message.mine {align-self:flex-end}
.chat-message>small {padding-left:7px;color:#8298aa;font-size:12px;font-weight:800}
.chat-message>div {padding:10px 13px;border:1px solid #e2edf5;border-radius:12px 12px 12px 3px;background:#fff;color:#385a75;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.chat-message.mine>div {border-color:#087dcc;border-radius:12px 12px 3px 12px;background:#087dcc;color:#fff}
.chat-message>time {padding:0 6px;color:#a0afbb;font-size:12px}
.chat-message.mine>time {text-align:right}
.chat-send-form {display:flex;align-items:flex-end;gap:9px;padding:12px;border-top:1px solid #eaf0f5;background:#fff}
.chat-send-form textarea {flex:1;min-height:42px;max-height:130px;padding:10px 12px;border:1px solid #d9e7f2;border-radius:10px;outline:0;color:#315473;font-size:12px;resize:vertical}
.chat-send-form textarea:focus {border-color:#168bd0;box-shadow:0 0 0 3px rgba(22,139,208,.08)}
.chat-send-form button {min-width:78px;min-height:40px;border:0;border-radius:9px;background:#087dcc;color:#fff;font-size:12px;font-weight:950}
.chat-closed-note {padding:12px;background:#fff7e8;color:#987331;text-align:center;font-size:12px}
.policy-appeal-card {margin-top:15px;padding:21px;border:1px solid #deebf5;border-radius:15px;background:#fff}
.policy-appeal-reason {padding:12px;border-radius:10px;background:#fff7f7}
.policy-appeal-reason b {color:#ab555b;font-size:12px}.policy-appeal-reason p {margin:5px 0 0;color:#77565b;font-size:12px;line-height:1.6}
.policy-appeal-form {display:grid;gap:12px;margin-top:17px}
.policy-appeal-form label {display:grid;gap:5px;color:#315473;font-size:12px;font-weight:900}
.policy-appeal-form input,.policy-appeal-form textarea {width:100%;padding:10px 12px;border:1px solid #d8e6f1;border-radius:9px;outline:0;color:#315473;font-size:12px}
.policy-appeal-form button {justify-self:start;min-height:39px;padding:0 15px;border:0;border-radius:8px;background:#087dcc;color:#fff;font-size:12px;font-weight:900}
.appeal-history {margin-top:15px;padding:14px;border:1px solid #e3edf5;border-radius:11px}
.appeal-history>div {display:flex;align-items:center;justify-content:space-between;gap:10px}
.appeal-history h3 {margin:12px 0 6px;color:#315777;font-size:14px}
.appeal-history p {color:#647f96;font-size:12px;line-height:1.6;white-space:pre-line}
.appeal-status {padding:5px 8px;border-radius:14px;background:#fff4dd;color:#9d741e;font-size:12px;font-weight:900}
.appeal-status.approved {background:#eaf8f0;color:#16855f}.appeal-status.rejected {background:#fff0f0;color:#bd4f57}
.appeal-admin-response {padding:10px;border-radius:8px;background:#f2f9ff}
.appeal-admin-response b {color:#087dcc;font-size:12px}.appeal-admin-response p {margin:5px 0 0}
.appeal-waiting-note {margin-top:15px;padding:12px;border-radius:9px;background:#f1f9ff;color:#668199;font-size:12px}
.appeal-waiting-note a {color:#087dcc;font-weight:900}
@media(max-width:760px) {
 .shop-public-actions {width:100%;margin:12px 0 0}
 .shop-following-grid,.chat-inbox-grid {grid-template-columns:1fr}
 .chat-inbox-heading {align-items:flex-start;flex-direction:column;padding:16px}
 .chat-thread-shell {height:calc(100vh - 210px);min-height:400px}
 .chat-message {max-width:88%}
 .policy-hero {padding:20px}.policy-hero h1 {font-size:25px}
 .account-locked-modal {padding:22px 17px}
 .account-locked-modal h1 {font-size:23px}
}

.chat-thread-header form {margin:0}
.chat-handoff-button {min-height:30px;padding:0 9px;border:1px solid #b9dff4;border-radius:8px;background:#f1f9ff;color:#087dcc;font-size:12px;font-weight:900;white-space:nowrap}
.chat-message:has(.chat-system-note) {align-self:center;max-width:95%}
.chat-system-note {padding:7px 10px;border-radius:20px;background:#fff7e7;color:#9a7630;font-size:12px}

/* Human-only shop and Chợ Online support chat */
.chat-system-note {align-self:center;max-width:92%;padding:7px 12px;border:1px solid #e8edf2;border-radius:18px;background:#f3f6f9;color:#73879a;font-size:12px;line-height:1.55;text-align:center}
.chat-system-note.is-accepted {border-color:#cdebdc;background:#effaf4;color:#23805a;font-weight:850}
.chat-private-badge {padding:6px 8px;border-radius:15px;background:#eef6ff;color:#1678b8;font-size:12px;font-weight:950;white-space:nowrap}
.admin-chat-system-note {align-self:center;display:grid;gap:3px;max-width:90%;padding:7px 12px;border:1px solid #e8edf2;border-radius:18px;background:#f3f6f9;color:#73879a;font-size:12px;line-height:1.55;text-align:center}
.admin-chat-system-note.is-accepted {border-color:#cdebdc;background:#effaf4;color:#23805a;font-weight:850}
.admin-chat-system-note time {color:#9aaab7;font-size:12px;font-weight:400}


/* Stage 23 follow-up: discover followed shops and wire the home shortcuts */
.header-shop-following-link {
  display:inline-flex;align-items:center;gap:5px;padding:6px 9px;
  border:1px solid #dcebf7;border-radius:18px;background:#f4faff;
  color:#087dcc!important;font-size:12px;font-weight:850;
  text-decoration:none!important;white-space:nowrap;
}
.header-shop-following-link .nav-symbol {font-size:17px;color:#e34e68}
.header-shop-following-link:hover {border-color:#a9d5ef;background:#eaf6ff;color:#075f9f!important}
.floating-chat {
  width:auto;min-width:50px;height:50px;padding:0 13px;gap:6px;
  border-radius:28px;background:linear-gradient(135deg,#0c9add,#0874c4);
  cursor:pointer;
}
.floating-chat small {font-size:12px;margin:0;font-weight:850;white-space:nowrap}
.back-top {cursor:pointer;transition:transform .18s,box-shadow .18s}
.back-top:hover {transform:translateY(-3px);box-shadow:0 8px 20px #087dcc55}
@media(max-width:991px) {
  .header-shop-following-link {padding:5px 7px}
  .header-shop-following-link>span:last-child {font-size:12px}
}
@media(max-width:575px) {
  .header-shop-following-link>span:last-child {display:none}
  .floating-chat {right:14px;bottom:82px;min-width:46px;height:46px;padding:0 11px}
  .back-top {right:14px;bottom:20px;width:46px;height:46px}
}

.shop-following-card-content {min-width:0;flex:1}
.shop-following-card-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.shop-following-card-actions>a,.shop-following-card-actions button {
 display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:0 10px;
 border:1px solid #cfe4f4;border-radius:8px;background:#f3f9ff;color:#087dcc;
 font-size:12px;font-weight:900;text-decoration:none;cursor:pointer
}
.shop-following-card-actions button {background:#087dcc;border-color:#087dcc;color:#fff}
.shop-following-card-actions form {margin:0}


/* ==========================================================
   CHO ONLINE HOMEPAGE CAMPAIGN CAROUSEL – ORIGINAL SVG ART
   ========================================================== */
.home-hero-area {padding-top:18px!important;padding-bottom:0!important}
.home-hero-layout {grid-template-columns:minmax(0,3.15fr) minmax(220px,.98fr)!important;gap:14px!important;align-items:stretch!important}
.home-hero-carousel {position:relative;min-width:0;height:302px;overflow:hidden;border-radius:18px;background:#d9f3ff;box-shadow:0 10px 28px rgba(7,87,140,.09);isolation:isolate}
.home-hero-viewport {width:100%;height:100%;overflow:hidden;border-radius:inherit;touch-action:pan-y;}
.home-hero-track {display:flex;width:100%;height:100%;transition:transform .72s cubic-bezier(.22,.72,.18,1);will-change:transform}
.home-hero-slide {position:relative;display:block;flex:0 0 100%;width:100%;height:100%;overflow:hidden;outline-offset:-4px}
.home-hero-slide img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none;transition:transform .75s ease}
.home-hero-slide:hover img {transform:scale(1.012)}
.home-hero-arrow {position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:40px;height:52px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.55);background:rgba(7,65,107,.32);color:#fff;border-radius:12px;font-size:34px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s,background .2s,transform .2s;backdrop-filter:blur(5px)}
.home-hero-carousel:hover .home-hero-arrow,.home-hero-carousel:focus-within .home-hero-arrow {opacity:1}
.home-hero-arrow:hover {background:rgba(4,75,132,.78);transform:translateY(-50%) scale(1.04)}
.home-hero-prev {left:13px}.home-hero-next {right:13px}
.home-hero-footer {position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;min-height:34px;padding:4px 15px;background:linear-gradient(180deg,transparent,rgba(4,55,93,.16));pointer-events:none}
.home-hero-dots {display:flex;align-items:center;gap:8px;pointer-events:auto}
.home-hero-dots button {width:9px;height:9px;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.78);box-shadow:0 1px 4px rgba(0,47,84,.22);cursor:pointer;transition:width .25s,background .25s}
.home-hero-dots button.is-active {width:25px;background:#087dcc}
.home-hero-counter {position:absolute;right:14px;color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.home-hero-side {display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr 1fr!important;gap:14px!important;min-width:0!important}
.home-side-promo {position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:0;padding:16px 17px!important;border:1px solid rgba(255,255,255,.75);border-radius:17px!important;overflow:hidden;text-decoration:none!important;box-shadow:0 8px 22px rgba(10,83,132,.055);transition:transform .22s,box-shadow .22s,filter .22s}
.home-side-promo:before {content:"";position:absolute;width:150px;height:150px;right:-46px;bottom:-78px;border-radius:50%;background:rgba(255,255,255,.38);transition:transform .3s}
.home-side-promo:hover {transform:translateY(-3px);box-shadow:0 13px 27px rgba(10,83,132,.13);filter:saturate(1.05)}
.home-side-promo:hover:before {transform:scale(1.28)}
.home-side-promo>span:first-child {display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2;min-width:0}
.home-side-promo b {font-size:19px!important;font-weight:900!important;line-height:1.25!important;letter-spacing:-.3px}
.home-side-promo strong {font-size:14px!important;line-height:1.45;margin-top:3px}
.home-side-promo small {display:inline-flex!important;align-items:center;gap:6px;margin-top:9px!important;padding:6px 10px!important;border-radius:20px;background:#fff!important;font-size:10px!important;font-weight:900!important;box-shadow:0 3px 10px rgba(38,91,128,.08)}
.home-side-promo small i {font-style:normal;font-size:14px;transition:transform .2s}
.home-side-promo:hover small i {transform:translateX(3px)}
.home-side-voucher {background:linear-gradient(120deg,#fff1d2,#ffd990)!important;color:#a94d0b!important}
.home-side-shops {background:linear-gradient(120deg,#dff5ff,#a9e2ff)!important;color:#07558e!important}
.home-side-promo .home-side-art {position:relative;z-index:1;display:grid;place-items:center;flex:0 0 74px;width:74px;height:74px;min-width:74px;border-radius:22px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);flex-direction:initial}
.home-side-promo .home-side-coupon b {display:grid;place-items:center;width:51px;height:42px;border:3px dashed #e98a27;border-radius:8px;background:#fff;font-size:28px!important;color:#e77717;transform:rotate(-9deg)}
.home-side-promo .home-side-coupon i {position:absolute;right:6px;top:7px;width:11px;height:11px;border-radius:50%;background:#ffb83e;box-shadow:-44px 46px 0 #ffb83e}
.home-side-promo .home-side-store b {font-size:43px!important;line-height:1;color:#087dcc}
.home-side-promo .home-side-store i {position:absolute;right:8px;top:6px;color:#f3ae24;font-size:18px;font-style:normal}
@media(max-width:1199px) {
 .home-hero-carousel {height:280px}
 .home-side-promo {padding:13px!important}
 .home-side-art {width:62px;height:62px;flex-basis:62px}
}
@media(max-width:991px) {
 .home-hero-layout {grid-template-columns:1fr!important}
 .home-hero-carousel {height:290px}
 .home-hero-side {grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:132px!important;gap:12px!important}
}
@media(max-width:575px) {
 .home-hero-area {padding-top:12px!important}
 .home-hero-carousel {height:190px;border-radius:14px}
 .home-hero-slide img {object-position:left center}
 .home-hero-arrow {width:30px;height:40px;font-size:26px;opacity:.85}
 .home-hero-prev {left:7px}.home-hero-next {right:7px}
 .home-hero-footer {min-height:27px}
 .home-hero-dots {gap:7px}.home-hero-dots button {width:7px;height:7px}.home-hero-dots button.is-active {width:20px}
 .home-hero-counter {right:9px;font-size:8px}
 .home-hero-side {grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:108px!important;gap:8px!important}
 .home-side-promo {padding:9px 10px!important;gap:3px;border-radius:12px!important}
 .home-side-promo b {font-size:13px!important}.home-side-promo strong {font-size:10px!important}
 .home-side-promo small {font-size:8px!important;padding:5px 7px!important;margin-top:6px!important}
 .home-side-promo .home-side-art {width:42px;height:42px;min-width:42px;flex-basis:42px;border-radius:13px}
 .home-side-promo .home-side-coupon b {width:30px;height:27px;font-size:17px!important;border-width:2px}
 .home-side-promo .home-side-store b {font-size:28px!important}.home-side-store i {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
 .home-hero-track,.home-hero-slide img,.home-hero-arrow,.home-side-promo {transition:none!important}
}


/* ==========================================================
   STAGE 27 – PROFESSIONAL NOTIFICATION CENTER
   ========================================================== */
.notification-page {max-width:1120px!important;padding-top:30px;padding-bottom:64px}
.notification-hero {position:relative;display:flex;align-items:center;justify-content:space-between;min-height:220px;padding:34px 42px;overflow:hidden;border:1px solid #cfe8fa;border-radius:24px;background:linear-gradient(112deg,#e7f6ff 0%,#d6efff 58%,#c4e8ff 100%);box-shadow:0 12px 32px rgba(19,105,163,.07)}
.notification-hero:after {content:"";position:absolute;width:390px;height:390px;right:110px;top:-245px;border-radius:50%;background:rgba(255,255,255,.28)}
.notification-hero-copy {position:relative;z-index:2;max-width:690px}
.notification-eyebrow {display:flex;align-items:center;gap:9px;color:#087dcc;font-size:11px;font-weight:900;letter-spacing:1.15px}
.notification-eyebrow>span {width:8px;height:8px;border-radius:50%;background:#13a9e9;box-shadow:0 0 0 5px rgba(19,169,233,.12)}
.notification-hero h1 {margin:13px 0 8px;color:#103b65;font-size:clamp(27px,3vw,36px);font-weight:900;letter-spacing:-.8px}
.notification-hero p {max-width:610px;margin:0;color:#587792;font-size:15px;line-height:1.7}
.notification-hero-meta {display:flex;align-items:center;gap:13px;margin-top:19px;color:#56748e;font-size:13px}
.notification-hero-meta b {color:#087dcc;font-size:15px}
.notification-hero-meta i {width:4px;height:4px;border-radius:50%;background:#9abbd3}
.notification-hero-art {position:relative;z-index:1;display:grid;place-items:center;width:150px;height:150px;margin-right:30px;flex:0 0 150px;border:1px solid rgba(255,255,255,.75);border-radius:42px;background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.25));box-shadow:0 18px 35px rgba(24,111,168,.12);transform:rotate(5deg)}
.notification-art-orbit {position:absolute;inset:14px;border:1px dashed rgba(8,125,204,.25);border-radius:35px}
.notification-art-bell {display:grid;place-items:center;width:84px;height:84px;border-radius:28px;background:linear-gradient(145deg,#19b7f0,#087dcc);color:#fff;font-size:48px;line-height:1;box-shadow:0 12px 24px rgba(8,125,204,.28)}
.notification-art-count {position:absolute;right:8px;top:5px;display:grid;place-items:center;min-width:31px;height:31px;padding:0 7px;border:3px solid #e1f3ff;border-radius:20px;background:#ed4660;color:#fff;font-size:12px}
.notification-art-dot {position:absolute;width:9px;height:9px;border-radius:50%;background:#ffbf45}
.notification-art-dot.dot-one {left:12px;top:28px}.notification-art-dot.dot-two {right:22px;bottom:13px;width:6px;height:6px;background:#16a6e5}
.notification-toolbar {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:27px 0 14px;padding:16px 19px;border:1px solid #e1edf7;border-radius:16px;background:#fff;box-shadow:0 5px 16px rgba(24,77,118,.035)}
.notification-toolbar-title {display:flex;align-items:center;gap:12px}
.notification-toolbar-icon {display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eaf6ff;color:#087dcc;font-size:24px}
.notification-toolbar-title h2 {margin:0;color:#153e63;font-size:17px;font-weight:900}
.notification-toolbar-title p {margin:3px 0 0;color:#8095a8;font-size:12px}
.notification-read-all,.notification-all-read {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:0 13px;border:1px solid #cfe5f5;border-radius:10px;background:#f5fbff;color:#087dcc;font-size:12px;font-weight:850;text-decoration:none}
.notification-read-all {cursor:pointer;transition:.18s}
.notification-read-all:hover {border-color:#087dcc;background:#e9f6ff}
.notification-read-all span,.notification-all-read span {font-size:15px}
.notification-list {display:grid;gap:11px}
.notification-card {position:relative;display:flex;align-items:flex-start;gap:15px;padding:19px 21px;border:1px solid #e3edf6;border-radius:16px;background:#fff;box-shadow:0 4px 13px rgba(22,75,116,.025);transition:border-color .18s,box-shadow .18s,transform .18s}
.notification-card:hover {transform:translateY(-1px);border-color:#c9e2f4;box-shadow:0 8px 20px rgba(22,75,116,.065)}
.notification-card.is-unread {border-color:#c8e4f8;background:linear-gradient(105deg,#f7fcff,#fff 60%)}
.notification-card-icon {display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:#eaf6ff;color:#087dcc;font-size:24px}
.notification-card-icon.type-return_request {background:#fff4e7;color:#d8871a}
.notification-card-icon.type-order {background:#eaf5ff;color:#087dcc}
.notification-card-icon.type-delivery {background:#e9f9f3;color:#15966c}
.notification-card-icon.type-message {background:#f1edff;color:#7660c8}
.notification-card-icon.type-payment {background:#fff5e7;color:#d38b1d}
.notification-card-content {flex:1;min-width:0}
.notification-card-topline {display:flex;align-items:center;gap:9px;margin-bottom:5px}
.notification-category {color:#8094a7;font-size:11px;font-weight:800}
.notification-new {display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:12px;background:#fff0f1;color:#dc4054;font-size:10px;font-weight:900}
.notification-new i {width:5px;height:5px;border-radius:50%;background:#e34b60}
.notification-read-status {color:#a0afbd;font-size:10px;font-weight:700}
.notification-card-content h3 {margin:0 0 5px;color:#173e62;font-size:15px;font-weight:850;line-height:1.45}
.notification-card-content>p {margin:0;color:#637d94;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.notification-card-bottom {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:11px;border-top:1px solid #eff3f7}
.notification-card-bottom time {color:#91a2b1;font-size:11px;white-space:nowrap}
.notification-card-bottom time span {margin-right:4px}
.notification-card-actions {display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.notification-card-actions form {margin:0}
.notification-detail-link {color:#087dcc;font-size:12px;font-weight:850;text-decoration:none}
.notification-detail-link:hover {color:#075b9a}
.notification-detail-link span {margin-left:3px;font-size:15px}
.notification-mark-read {padding:0;border:0;background:transparent;color:#8197aa;font-size:11px;font-weight:750;cursor:pointer}
.notification-mark-read:hover {color:#087dcc}
.notification-unread-indicator {position:absolute;right:15px;top:17px;width:7px;height:7px;border-radius:50%;background:#149ee4;box-shadow:0 0 0 4px #e6f5ff}
.notification-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:35px 20px;border:1px dashed #cfe1ef;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#f5faff);text-align:center}
.notification-empty-art {position:relative;display:grid;place-items:center;width:82px;height:82px;margin-bottom:17px;border-radius:27px;background:#e4f4ff;color:#087dcc;font-size:39px}
.notification-empty-art i {position:absolute;right:7px;top:4px;color:#ffb83f;font-size:20px;font-style:normal}
.notification-empty h3 {margin:0 0 7px;color:#173e62;font-size:19px;font-weight:900}
.notification-empty p {max-width:430px;margin:0;color:#8296a8;font-size:13px;line-height:1.65}
.notification-empty>a {display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:10px 15px;border-radius:10px;background:#087dcc;color:#fff;font-size:12px;font-weight:850;text-decoration:none}
.notification-security-note {display:flex;align-items:center;gap:11px;margin-top:17px;padding:13px 16px;border:1px solid #dcefe7;border-radius:13px;background:#f4fbf7}
.notification-security-note>span {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e0f5e9;color:#15966c;font-weight:900}
.notification-security-note p {display:flex;flex-direction:column;gap:2px;margin:0}
.notification-security-note b {color:#32745d;font-size:12px}
.notification-security-note small {color:#78978a;font-size:11px}
@media(max-width:767px) {
 .notification-page {padding-top:18px;padding-bottom:38px}
 .notification-hero {min-height:0;padding:24px 22px;border-radius:18px}
 .notification-hero-art {width:82px;height:82px;flex-basis:82px;margin:0 2px 0 10px;border-radius:25px}
 .notification-art-orbit {inset:8px;border-radius:19px}
 .notification-art-bell {width:48px;height:48px;border-radius:16px;font-size:28px}
 .notification-art-count {right:0;top:-3px;min-width:24px;height:24px;font-size:10px}
 .notification-hero h1 {font-size:25px}
 .notification-hero p {font-size:13px}
 .notification-toolbar {align-items:flex-start;flex-direction:column;padding:13px}
 .notification-card {gap:11px;padding:15px 13px}
 .notification-card-icon {width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:20px}
 .notification-card-content h3 {font-size:14px;padding-right:7px}
 .notification-card-content>p {font-size:12px}
 .notification-card-bottom {align-items:flex-start;flex-direction:column}
 .notification-card-actions {gap:12px}
}
@media(max-width:430px) {
 .notification-hero-art {display:none}
 .notification-hero {padding:22px}
 .notification-read-all,.notification-all-read {font-size:11px}
}


/* Stage 33: real product rating, completed purchase count and recently viewed */
.product-card-metrics{display:flex;align-items:center;flex-wrap:wrap;gap:5px 7px;margin-top:7px;color:#71869a;font-size:11px;line-height:1.45}
.product-card-metrics .product-card-stars{color:#e9a323;font-weight:800;white-space:nowrap}
.product-card-metrics i{display:inline-block;width:1px;height:11px;background:#d7e3ee}
.product-card-metrics span:last-child{white-space:nowrap}
.detail-purchase-count{color:#71869a;font-size:13px}
.recently-viewed-section{margin-top:30px;margin-bottom:32px}
.recently-viewed-section .product-card{height:100%;background:#fff;border:1px solid var(--line,#dceaf5);border-radius:13px;overflow:hidden;transition:.2s}
.recently-viewed-section .product-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #145b9617}
@media(max-width:575px){.product-card-metrics{font-size:10px;gap:4px 5px}.recently-viewed-section .product-image{height:145px}}

/* Stage 33.1: interactive recently viewed history controls */
.recently-viewed-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.recently-viewed-tools{display:flex;align-items:center;gap:12px}
.recently-viewed-tools form{margin:0}
.recent-history-clear{border:1px solid #f0c7c7;border-radius:9px;background:#fff7f7;color:#c43c3c;padding:8px 13px;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.recent-history-clear:hover{background:#c43c3c;color:#fff;border-color:#c43c3c}
.recently-viewed-card{position:relative}
.recent-history-remove-form{position:absolute;z-index:3;right:9px;top:9px;margin:0}
.recent-history-remove{display:grid;place-items:center;width:29px;height:29px;border:1px solid #dce7f1;border-radius:50%;background:rgba(255,255,255,.96);color:#60788d;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #173e621a}
.recent-history-remove:hover{background:#e94c4c;border-color:#e94c4c;color:#fff}
@media(max-width:575px){.recently-viewed-tools{width:100%;justify-content:space-between}.recent-history-clear{padding:7px 10px}}