:root{--bg:#101111;--panel:#181a19;--panel2:#202321;--line:#2c302d;--muted:#939b95;--text:#f4f5ef;--lime:#c6f66b;--radius:20px;--font:Arial,Helvetica,sans-serif;color-scheme:dark;font-family:var(--font);background:var(--bg);color:var(--text);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{opacity:.5;cursor:wait}img,svg{max-width:100%}svg.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.04em}p{line-height:1.7}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:5px}input:focus,textarea:focus,select:focus{outline:1px solid var(--lime);border-color:var(--lime)}::selection{background:var(--lime);color:#101111}.wrap{width:min(1240px,calc(100% - 80px));margin:auto}.topline{background:#1e2818;color:#d6e4c5;text-align:center;font-size:11px;letter-spacing:.05em;padding:10px 20px;border-bottom:1px solid #314127}.topline span{color:var(--lime);font-weight:700}.topline a{margin-left:18px}.header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px}.brand{display:flex;gap:10px;align-items:center;font-size:26px;font-weight:900;letter-spacing:-1.3px}.brand-mark{width:32px;height:33px;color:var(--lime);transform:skew(-8deg);font-size:39px;line-height:33px;font-style:italic}.brand small{font-size:9px;letter-spacing:2px;display:block;color:var(--muted);font-weight:400;margin-top:4px}.nav{display:flex;gap:29px;align-items:center;margin-left:24px;font-size:13px;font-weight:500}.nav a{color:#a9ada7;padding:8px 0}.nav a:hover,.nav a.active{color:var(--text)}.nav a.active:after{content:'';width:4px;height:4px;background:var(--lime);border-radius:50%;display:block;margin:5px auto -9px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:15px}.icon-btn{background:none;border:0;display:inline-flex;align-items:center;justify-content:center;position:relative;padding:9px;border-radius:9px}.icon-btn:hover{background:var(--panel2)}.cart-count{position:absolute;top:0;right:-2px;background:var(--lime);color:#16200c;font-size:9px;min-width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-weight:800}.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:14px 21px;border:1px solid var(--line);background:var(--panel2);border-radius:9px;font-size:13px;font-weight:700;line-height:1.4;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:#30362c}.button.primary{background:var(--lime);color:#18220a;border-color:var(--lime)}.button.primary:hover{background:#d4ff8c}.button.ghost{background:transparent;border-color:transparent}.button.small{padding:10px 14px;font-size:12px}.button.danger{background:#3c2424;color:#ffb8b8;border-color:#613434}.button.full{width:100%}.text-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.text-link:hover{color:var(--lime)}.mobile-menu{display:none}.hero{display:grid;grid-template-columns:1.06fr 1fr;min-height:610px;position:relative;align-items:center;gap:20px;padding-top:18px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--lime);text-transform:uppercase}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #c6f66b66}.hero h1{font-size:clamp(44px,5.2vw,73px);font-weight:900;line-height:1.06;letter-spacing:-4px;margin:25px 0}.hero h1 .outline{color:var(--lime)}.hero p{color:#a6aca5;font-size:14px;max-width:410px}.hero-buttons{display:flex;gap:15px;margin-top:29px}.hero-foot{display:flex;gap:26px;font-size:11px;color:var(--muted);margin-top:31px}.hero-foot span{display:flex;align-items:center;gap:7px}.hero-foot .icon{width:15px;height:15px;color:var(--lime)}.hero-art{height:490px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 50%,#779c2830,transparent 65%);isolation:isolate}.hero-grid{position:absolute;inset:20px 0;background-image:linear-gradient(#677b2810 1px,transparent 1px),linear-gradient(90deg,#677b2810 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse,black 25%,transparent 70%)}.orbit{position:absolute;width:365px;height:365px;border:1px solid #4c602c66;border-radius:50%;transform:rotate(-25deg) scaleX(1.22)}.orbit.two{transform:rotate(45deg) scaleX(.75);width:410px;height:410px;border-style:dashed}.hero-core{width:288px;height:288px;border:1px solid #c6f66b55;border-radius:62px;background:linear-gradient(135deg,#536332,#182313 45%,#1b2117 65%,#394e20);box-shadow:inset 0 0 30px #c6f66b11,0 30px 100px #0009;transform:perspective(600px) rotateY(-22deg) rotateX(15deg) rotateZ(-12deg);display:grid;place-items:center;position:relative}.hero-core:before,.hero-core:after{content:'';position:absolute;inset:14px;border:1px solid #c6f66b33;border-radius:48px}.hero-core:after{inset:30px;background:#11181188;border-radius:35px}.hero-core svg{width:170px;height:170px;z-index:1;filter:drop-shadow(0 0 18px #c6f66b77)}.core-label{position:absolute;bottom:43px;z-index:2;color:#cee99f;font-size:8px;letter-spacing:4px;transform:translateY(13px)}.float-card{position:absolute;border:1px solid #535d4144;border-radius:13px;background:linear-gradient(120deg,#292f24f5,#171d17f0);box-shadow:0 10px 30px #0004;backdrop-filter:blur(12px);padding:14px 17px;display:flex;align-items:center;gap:13px}.float-card.top{top:58px;right:10px;transform:rotate(6deg)}.float-card.bottom{bottom:53px;left:4px;transform:rotate(-5deg)}.float-card .tile{width:35px;height:35px;display:grid;place-items:center;background:#c6f66b17;color:var(--lime);border-radius:9px}.float-card b{font-size:12px;display:block;margin-bottom:5px}.float-card small{font-size:9px;color:var(--muted)}.float-card .status{width:6px;height:6px;background:var(--lime);border-radius:50%;margin-left:17px}.art-coordinate{position:absolute;right:13px;bottom:35px;font:9px monospace;letter-spacing:2px;color:#737f65;writing-mode:vertical-rl}.art-chip{position:absolute;left:17px;top:90px;font:10px monospace;color:#b9c5a8;border:1px solid #49523d;padding:7px 9px;background:#192014;border-radius:4px}.star{position:absolute;font-size:28px;color:#b5cf80;top:27px;left:100px}.hero-index{position:absolute;left:40%;bottom:10px;font:9px monospace;color:#566143;letter-spacing:5px}.category-strip{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;color:#babfb9}.category-strip>span{font-size:10px;line-height:1.5;letter-spacing:1.5px;color:#787f78}.category-strip a{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:700}.category-strip a:hover{color:var(--lime)}.section{padding:76px 0 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-head h2{font-size:34px;margin-top:12px;line-height:1.2}.section-head p{font-size:13px;color:var(--muted);margin-top:12px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}.chip{border:1px solid var(--line);border-radius:7px;background:transparent;color:#a5aba4;padding:10px 17px;font-size:12px}.chip.active,.chip:hover{background:var(--lime);color:#1b2710;border-color:var(--lime)}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,border-color .25s}.product-card:hover{transform:translateY(-5px);border-color:#687c44}.product-visual{height:215px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 45% 90%,var(--glow),transparent 72%),linear-gradient(145deg,#1c2320,#151a17);overflow:hidden;isolation:isolate}.color-lime{--accent:#c6f66b;--glow:#89b84830}.color-purple{--accent:#c0a1ff;--glow:#955cdd33}.color-blue{--accent:#75b5f7;--glow:#387aaa33}.color-orange{--accent:#f6bb77;--glow:#bf783a33}.color-pink{--accent:#eb9cc7;--glow:#b7528d33}.color-teal{--accent:#82dbca;--glow:#2aa58c33}.product-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(transparent,black)}.product-visual:after{content:'';position:absolute;width:160px;height:160px;border:1px solid var(--accent);opacity:.08;border-radius:50%;transform:scaleX(1.65) rotate(-30deg)}.product-art{width:118px;height:118px;color:var(--accent);position:relative;z-index:1;filter:drop-shadow(0 10px 18px #0006);transition:transform .3s}.product-card:hover .product-art{transform:translateY(-4px) rotate(-5deg)}.product-visual .badge{position:absolute;top:17px;left:17px;color:var(--accent);background:#131811b3;font:8px var(--font);font-weight:700;letter-spacing:1px;border:1px solid #ffffff12;padding:7px 9px;border-radius:4px;z-index:2}.visual-version{position:absolute;right:17px;bottom:15px;color:#6f796f;font:9px monospace;letter-spacing:1px}.favorite{position:absolute;right:12px;top:10px;z-index:3;color:#a3aba4}.favorite.selected{color:var(--lime)}.favorite.selected svg{fill:#c6f66b22}.product-content{padding:22px}.product-category{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}.product-content h3{font-size:21px;margin:10px 0 9px}.product-content p{font-size:12px;color:var(--muted);line-height:1.7;min-height:40px}.product-meta{display:flex;gap:8px;margin:15px 0 20px;font-size:9px;color:#a5ada6}.product-meta span{border:1px solid #30362f;padding:5px 7px;border-radius:4px}.product-bottom{border-top:1px solid var(--line);padding-top:19px;display:flex;align-items:center;justify-content:space-between}.price{font-size:20px;font-weight:800;letter-spacing:-.7px}.old-price{font-size:11px;text-decoration:line-through;color:#74806f;font-weight:400;margin-left:8px}.add-button{border:1px solid #3c4731;background:#29321f;color:var(--lime);padding:10px;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-button:hover{background:var(--lime);color:#18220a}.feature-banner{margin-top:72px;padding:43px 48px;background:linear-gradient(110deg,#25321c,#192016 65%,#26331c);border:1px solid #3c4a2d;border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative;overflow:hidden}.feature-banner h2{font-size:32px;line-height:1.2;margin:12px 0}.feature-banner p{font-size:13px;color:#a7b598;max-width:420px}.feature-banner .button{margin-top:23px}.workflow{display:flex;align-items:center;justify-content:center;gap:19px}.step-tile{width:105px;text-align:center}.step-tile>div{width:72px;height:72px;border:1px solid #61744566;background:#26351b;display:grid;place-items:center;border-radius:17px;margin:0 auto 13px;color:var(--lime)}.step-tile span{font-size:10px;color:#b5c0a9}.step-tile .icon{width:27px;height:27px}.workflow>.icon{color:#6c7f51;width:18px}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;padding:54px 0;border-bottom:1px solid var(--line)}.benefit .icon{color:var(--lime);width:25px;height:25px;margin-bottom:16px}.benefit h3{font-size:14px;margin-bottom:9px;letter-spacing:0}.benefit p{font-size:11px;color:var(--muted)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.faq-layout h2{font-size:36px;margin:15px 0}.faq-layout p{font-size:13px;color:var(--muted)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:13px;font-weight:600}summary::-webkit-details-marker{display:none}summary:after{content:'+';color:var(--lime);font-size:20px;font-weight:400}details[open] summary:after{content:'−'}details p{font-size:12px!important;padding:0 30px 23px 0}.newsletter{display:flex;justify-content:space-between;align-items:center;background:var(--lime);color:#18240b;padding:35px 42px;border-radius:15px;margin:72px 0 60px;gap:20px}.newsletter h2{font-size:30px}.newsletter p{font-size:12px;margin-top:8px;color:#4d6132}.newsletter .button{background:#18220e;color:#e5f7ce;border-color:#18220e}.footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:42px}.footer p{font-size:12px;color:var(--muted);max-width:260px;margin-top:18px}.footer h4{font-size:10px;letter-spacing:1.4px;margin:5px 0 22px}.footer a:not(.brand){display:block;font-size:12px;color:var(--muted);margin:14px 0}.footer a:hover{color:var(--lime)}.footer-bottom{border-top:1px solid var(--line);padding:20px 0 27px;display:flex;justify-content:space-between;color:#727c72;font-size:10px}.footer-bottom span{display:flex;gap:7px;align-items:center}.demo-note{background:#211e15;color:#d4bd86;border-top:1px solid #3e3520;text-align:center;padding:9px 15px;font-size:10px;line-height:1.7}.page-header{padding:48px 0 34px}.breadcrumbs{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:25px}.breadcrumbs a:hover{color:var(--lime)}.page-header h1{font-size:44px;margin-bottom:14px}.page-header p{font-size:14px;color:var(--muted)}.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:25px}.search-field{position:relative;flex:1;max-width:420px}.search-field .icon{position:absolute;top:14px;left:14px;color:var(--muted);width:18px}.search-field input{padding-left:42px}.field,input,select,textarea{width:100%;padding:13px 14px;background:#121512;color:var(--text);border:1px solid #343c32;border-radius:8px;font-size:13px}.toolbar select{width:auto;min-width:190px}textarea{min-height:110px;resize:vertical}.field-label{display:block;font-size:12px;color:#c5ccc2;margin-bottom:8px}.form-row{margin-bottom:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.help{font-size:11px;color:var(--muted);line-height:1.7;margin-top:7px}.form-error{font-size:12px;color:#ffada4;background:#4f252533;border:1px solid #743d3d;padding:12px;border-radius:8px;margin:15px 0}.form-error:empty{display:none}.empty{padding:70px 25px;text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:15px;grid-column:1/-1}.empty>.icon{width:40px;height:40px;color:var(--lime);margin-bottom:20px}.empty h3{font-size:23px;margin-bottom:12px}.empty p{font-size:13px;color:var(--muted);max-width:400px;margin:0 auto 25px}.product-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;padding-top:10px}.product-detail .product-visual{height:430px;border:1px solid var(--line);border-radius:20px}.product-detail .product-art{width:240px;height:240px}.product-detail .product-visual:after{width:290px;height:290px}.detail-thumbs{display:flex;gap:12px;margin-top:14px}.detail-thumbs>div{flex:1;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:9px;text-align:center;font-size:10px;color:var(--muted)}.detail-thumbs .icon{display:block;margin:0 auto 8px;color:var(--accent)}.detail-copy h1{font-size:43px;margin:14px 0}.detail-tagline{font-size:17px;color:#c6cfc0!important;margin-bottom:19px}.detail-copy>p{font-size:13px;color:var(--muted)}.detail-price{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:23px;margin:24px 0}.detail-price .price{font-size:32px}.detail-price .term{margin:10px 0 21px;color:var(--muted);font-size:11px}.stock-text{display:flex;align-items:center;gap:8px;font-size:11px;color:#b5d28e;margin:14px 0 0}.detail-note{display:flex;gap:20px;color:var(--muted);font-size:10px}.detail-note span{display:flex;align-items:center;gap:6px}.detail-note .icon{width:15px;height:15px}.detail-description{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;margin-top:65px}.detail-description h2{font-size:28px;margin:14px 0 23px}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.feature-item{padding:23px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.feature-item .icon{color:var(--lime);margin-bottom:12px}.feature-item p{font-size:13px}.info-panel{background:var(--panel);border:1px solid var(--line);padding:26px;border-radius:14px}.info-panel h3{font-size:18px;margin:0 0 15px}.info-panel p{color:var(--muted);font-size:12px;white-space:pre-line}.info-panel hr{border:0;border-top:1px solid var(--line);margin:24px 0}.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:27px}.panel h2{font-size:22px;margin-bottom:22px}.cart-item{display:grid;grid-template-columns:76px 1fr auto;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:21px 0}.cart-item:first-child{padding-top:0}.cart-item .product-visual{height:76px;border-radius:9px}.cart-item .product-art{width:46px;height:46px}.cart-item .product-visual:after,.cart-item .badge,.cart-item .favorite,.cart-item .visual-version{display:none}.cart-item h3{font-size:16px;margin-bottom:7px}.cart-item p{font-size:11px;color:var(--muted)}.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;margin-top:10px}.quantity button{background:none;border:0;padding:5px 10px;font-size:15px}.quantity span{min-width:22px;text-align:center;font-size:12px}.cart-item-right{text-align:right;display:flex;align-items:end;flex-direction:column;gap:10px}.cart-item-right .price{font-size:16px}.summary-line{display:flex;justify-content:space-between;gap:15px;font-size:13px;margin:17px 0;color:#abb6a4}.summary-line.total{font-size:20px;font-weight:700;color:var(--text);border-top:1px solid var(--line);padding:21px 0 8px}.coupon-input{display:flex;gap:8px;margin:22px 0}.coupon-input input{min-width:0}.notice{background:#29311f;border:1px solid #465332;padding:15px 17px;border-radius:9px;font-size:12px;color:#c1d4a8;line-height:1.7;margin-bottom:20px}.notice.warning{background:#322b1c;border-color:#53482a;color:#dbc893}.account-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}.order-card{padding:25px;border:1px solid var(--line);background:var(--panel);border-radius:14px;margin-bottom:18px}.order-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.order-card-header strong{font-size:13px}.order-card-header small{font-size:10px;color:var(--muted);display:block;margin-top:6px}.status-pill{font-size:9px;font-weight:700;padding:6px 9px;border-radius:5px;background:#313426;color:#d9d8ac;white-space:nowrap}.status-pill.paid,.status-pill.matched,.status-pill.answered,.status-pill.resolved{background:#26351e;color:#bbe38d}.status-pill.cancelled,.status-pill.expired,.status-pill.refunded{background:#362928;color:#d9aaa0}.status-pill.pending,.status-pill.review,.status-pill.open{background:#3b321e;color:#e4c278}.license-box{background:#111611;padding:15px;border:1px dashed #466032;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin:14px 0;word-break:break-all}.license-box code{font-size:12px;color:var(--lime)}.order-item-line{display:flex;justify-content:space-between;gap:20px;padding:14px 0;font-size:13px;border-top:1px solid var(--line)}.order-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:15px}.order-actions .price{margin-right:auto}.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.qr-wrap{background:white;padding:18px;border-radius:14px;max-width:290px;margin:25px auto}.qr-wrap img{display:block;width:100%}.demo-payment-art{padding:35px;text-align:center;color:var(--lime);background:radial-gradient(circle,#c6f66b15,transparent 65%)}.demo-payment-art .icon{width:90px;height:90px}.payment-row{display:flex;justify-content:space-between;gap:20px;font-size:13px;padding:16px 0;border-bottom:1px solid var(--line)}.payment-row span{color:var(--muted)}.payment-row b{overflow-wrap:anywhere;text-align:right}.payment-state{padding:12px;background:#2a301f;color:#c6df9b;border-radius:8px;font-size:12px;display:flex;gap:10px;align-items:center}.success-icon{margin:0 auto 25px;width:75px;height:75px;background:#304023;color:var(--lime);border-radius:50%;display:grid;place-items:center}.success-icon .icon{width:38px;height:38px}.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.ticket{padding:20px;border:1px solid var(--line);border-radius:10px;margin-bottom:15px}.ticket h3{font-size:16px;letter-spacing:0}.ticket p{font-size:12px;white-space:pre-wrap;color:var(--muted);margin-top:12px}.ticket .reply{padding:15px;background:#29321f;border-left:2px solid var(--lime);border-radius:5px;margin-top:18px}.ticket .reply strong{font-size:11px;color:var(--lime)}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#000b;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:25px;overflow:auto}.modal{position:relative;background:#1b201a;border:1px solid #3a4434;border-radius:20px;padding:37px;max-width:480px;width:100%;box-shadow:0 30px 100px #0009;max-height:90vh;overflow:auto}.modal.wide{max-width:760px}.modal-close{position:absolute;top:16px;right:16px}.modal h2{font-size:29px;margin:20px 0 10px}.modal-subtitle{font-size:12px;color:var(--muted);margin-bottom:27px}.modal-bottom{margin-top:20px;text-align:center;font-size:12px;color:var(--muted)}.modal-bottom button{background:none;border:0;color:var(--lime);font-size:12px}.modal .brand{font-size:21px}.modal code{overflow-wrap:anywhere}.modal p.policy{font-size:13px;color:var(--muted);margin-top:15px}.modal pre{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);padding:15px;border-radius:8px}#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,30px);z-index:200;background:#d0f59c;color:#19230d;border:1px solid #adcc7e;border-radius:10px;padding:14px 22px;font-size:12px;box-shadow:0 10px 30px #0005;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 40px);text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#toast.error{background:#f0b9b3;border-color:#d8978e;color:#381d19}.admin-shell{display:grid;grid-template-columns:228px 1fr;min-height:calc(100vh - 130px)}.admin-sidebar{padding:34px 20px 30px 0;border-right:1px solid var(--line)}.admin-label{font-size:9px;letter-spacing:2px;color:var(--muted);margin-bottom:19px;padding-left:14px}.admin-nav{display:flex;flex-direction:column;gap:6px}.admin-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:12px;color:var(--muted);border-radius:8px}.admin-nav a:hover,.admin-nav a.active{background:#29371e;color:var(--lime)}.admin-nav .icon{width:17px;height:17px}.admin-sidebar .help{margin:30px 14px}.admin-main{padding:39px 0 45px 34px;min-width:0}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.admin-heading h1{font-size:29px}.admin-heading p{font-size:12px;color:var(--muted);margin-top:8px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:27px}.stat{background:var(--panel);border:1px solid var(--line);padding:21px 18px;border-radius:12px}.stat span{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);gap:8px}.stat .icon{width:17px;height:17px;color:var(--lime)}.stat strong{font-size:25px;letter-spacing:-1px;display:block;margin:18px 0 10px}.stat small{font-size:9px;color:#90a47c}.dashboard-chart{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:25px}.chart{height:160px;display:flex;align-items:end;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:0 12px 20px;margin-top:35px}.chart-col{width:100%;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:10px;font-size:9px;color:var(--muted)}.chart-bar{width:60%;min-height:3px;border-radius:5px 5px 0 0;background:linear-gradient(var(--lime),#607c32)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left;font-size:11px}th{padding:16px 18px;color:#8f9a88;font-weight:500;font-size:10px;background:#1d231a}td{padding:17px 18px;border-top:1px solid var(--line)}td small{display:block;margin-top:6px;color:var(--muted);font-size:10px}td .button{font-size:10px;padding:8px 11px}td select{font-size:11px;padding:8px;min-width:110px}td code{font-size:10px}.admin-main .panel h2{font-size:16px}.table-actions{display:flex;gap:7px}.row-muted{opacity:.55}.admin-product-name{display:flex;align-items:center;gap:12px}.mini-art{width:35px;height:35px;color:var(--accent);background:var(--glow);border-radius:8px;padding:6px}.admin-note{font-size:11px;color:var(--muted);margin:18px 0;line-height:1.7}.bank-config{display:grid;grid-template-columns:1fr 1fr;gap:20px}.code-text{font:11px monospace;background:#111611;padding:14px;border-radius:7px;overflow-wrap:anywhere;line-height:1.7}.boot{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:35px;font-weight:900;letter-spacing:4px;color:var(--lime)}.boot span{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:20px}.skip-link{position:fixed;top:-100px;left:10px;padding:12px;background:var(--lime);color:#121b0a;z-index:300}.skip-link:focus{top:10px}.loading{padding:70px;text-align:center;color:var(--muted);font-size:13px}.muted{color:var(--muted)}.mt{margin-top:24px}.mb{margin-bottom:24px}.center{text-align:center}.spacer{height:55px}.mono{font-family:monospace}.block{display:block}.nowrap{white-space:nowrap}.search-results a{padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px}.search-results a span{color:var(--lime);font-size:12px}
@media(min-width:1500px){.hero{min-height:650px}}@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.header{gap:20px}.nav{gap:20px;margin-left:10px}.hero h1{font-size:57px;letter-spacing:-3px}.hero-art{transform:scale(.9);transform-origin:center}.hero{min-height:570px}.float-card.top{right:-20px}.float-card.bottom{left:-20px}.product-detail{gap:30px}.admin-shell{grid-template-columns:190px 1fr}.admin-main{padding-left:25px}.stat-grid{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1.5fr 1fr 1fr 1fr}.hero-foot{gap:12px}.feature-banner{padding:35px}.workflow{gap:9px}}@media(max-width:800px){.nav{display:none}.header{height:79px}.hero{grid-template-columns:1fr 1fr;min-height:500px;gap:0}.hero h1{font-size:45px;letter-spacing:-2.5px}.hero-art{height:410px;transform:scale(.74);margin-left:-10px;margin-right:-30px}.hero p{font-size:12px}.hero-buttons{gap:5px;flex-wrap:wrap}.hero-buttons .button{font-size:11px;padding:12px 14px}.hero-foot{flex-direction:column;margin-top:20px;gap:9px}.category-strip{gap:20px;overflow:auto;justify-content:start}.category-strip a{white-space:nowrap;font-size:11px}.category-strip>span{display:none}.products{grid-template-columns:1fr 1fr}.feature-banner{grid-template-columns:1fr}.workflow{padding:24px 0 6px}.benefits{grid-template-columns:1fr 1fr;gap:30px}.faq-layout{gap:30px;grid-template-columns:1fr 1fr}.footer{grid-template-columns:1.5fr 1fr 1fr}.footer>div:last-child{display:none}.newsletter{padding:28px}.newsletter h2{font-size:24px}.product-detail{grid-template-columns:1fr 1fr;gap:25px}.product-detail .product-visual{height:350px}.product-detail .product-art{width:180px;height:180px}.detail-copy h1{font-size:33px}.detail-description{gap:25px}.two-col{grid-template-columns:1fr}.support-grid{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.admin-sidebar{padding:20px 0;border:0;border-bottom:1px solid var(--line)}.admin-label,.admin-sidebar>.help{display:none}.admin-nav{flex-direction:row;overflow:auto;gap:5px}.admin-nav a{white-space:nowrap;font-size:10px;padding:11px}.admin-nav a .icon{width:15px}.admin-main{padding:30px 0}.mobile-menu{display:inline-flex}.bank-config{grid-template-columns:1fr}}@media(max-width:560px){.wrap{width:calc(100% - 36px)}.topline{font-size:9px;padding:10px}.topline a{display:none}.header{height:73px;gap:12px}.brand{font-size:22px;gap:7px}.brand-mark{font-size:32px;width:25px}.brand small{font-size:7px}.header-actions{gap:7px}.header-actions .button{padding:9px 11px;font-size:10px}.header-actions>.search-trigger{display:none}.header-actions .icon-btn{padding:7px}.hero{grid-template-columns:1fr;padding-top:36px;min-height:0}.hero h1{font-size:51px;letter-spacing:-2.6px;margin:19px 0}.hero .eyebrow{font-size:9px;letter-spacing:1.4px}.hero p{max-width:340px;font-size:12px}.hero-buttons{margin-top:24px;gap:10px}.hero-buttons .button{font-size:12px;padding:13px 17px}.hero-foot{flex-direction:row;flex-wrap:wrap;font-size:9px;gap:17px}.hero-art{height:335px;transform:scale(.78);margin:-10px -10px 0;max-width:100%}.hero-core{width:270px;height:270px}.orbit{width:310px;height:310px}.orbit.two{width:350px;height:350px}.float-card.top{top:10px;right:-20px}.float-card.bottom{bottom:4px;left:-15px}.art-coordinate{right:-10px;bottom:0}.art-chip{top:45px;left:0}.star{top:-10px;left:50px}.hero-index{bottom:-30px}.category-strip{padding:19px 0}.section{padding-top:48px}.section-head{margin-bottom:23px;align-items:center}.section-head h2{font-size:27px}.section-head .text-link{font-size:10px;gap:3px}.section-head .eyebrow{font-size:8px}.section-head p{font-size:11px}.filters{gap:7px;flex-wrap:nowrap;overflow:auto;padding-bottom:3px}.chip{white-space:nowrap;padding:9px 13px;font-size:10px}.products{grid-template-columns:1fr;gap:18px}.product-visual{height:230px}.product-content{padding:23px}.product-content p{min-height:0}.product-meta{margin-bottom:18px}.feature-banner{margin-top:44px;padding:26px;border-radius:14px}.feature-banner h2{font-size:28px}.workflow{gap:7px}.step-tile{width:80px}.step-tile>div{width:59px;height:59px;border-radius:13px}.step-tile span{font-size:9px}.workflow>.icon{width:13px}.benefits{padding:37px 0;gap:28px 22px}.benefit h3{font-size:12px}.benefit p{font-size:10px}.faq-layout{grid-template-columns:1fr;gap:15px}.faq-layout h2{font-size:29px}.faq-layout>div>p{font-size:12px}.faq-layout summary{font-size:12px;padding:18px 0}.newsletter{margin:40px 0;display:block;padding:28px}.newsletter h2{font-size:27px}.newsletter .button{margin-top:22px}.footer{grid-template-columns:1fr 1fr;gap:28px}.footer>div:first-child{grid-column:1/-1}.footer>div:last-child{display:block}.footer-bottom{display:block;font-size:9px;line-height:2}.footer-bottom span{margin-top:7px}.page-header{padding:30px 0 25px}.page-header h1{font-size:34px}.page-header p{font-size:12px}.breadcrumbs{font-size:10px}.toolbar{flex-wrap:wrap}.search-field{max-width:none;flex-basis:100%}.toolbar select{width:100%;font-size:12px}.product-detail{grid-template-columns:1fr;gap:29px}.product-detail .product-visual{height:320px}.product-detail .product-art{width:190px;height:190px}.detail-copy h1{font-size:34px}.detail-description{grid-template-columns:1fr;margin-top:42px}.feature-list{gap:10px}.feature-item{padding:18px}.feature-item p{font-size:11px}.panel{padding:21px}.cart-item{grid-template-columns:55px 1fr auto;gap:12px}.cart-item .product-visual{height:55px}.cart-item .product-art{width:36px;height:36px}.cart-item h3{font-size:13px}.cart-item p{font-size:9px}.cart-item-right .price{font-size:13px}.cart-item .old-price{display:none}.payment-grid{grid-template-columns:1fr;gap:20px}.modal-backdrop{padding:15px}.modal{padding:27px 23px;border-radius:15px;max-height:90dvh}.modal h2{font-size:25px}.form-grid{grid-template-columns:1fr;gap:0}.form-grid .form-row{margin-bottom:16px}.account-tabs .chip{font-size:11px}.order-card{padding:19px}.order-card-header strong{font-size:11px}.order-card-header small{font-size:9px}.order-item-line{font-size:11px}.order-actions .button{font-size:11px}.license-box{padding:10px}.license-box code{font-size:10px}.admin-heading h1{font-size:25px}.admin-heading .button{padding:10px;font-size:10px}.stat-grid{gap:10px}.stat{padding:17px 14px}.stat strong{font-size:21px}.stat span{font-size:9px}.dashboard-chart{grid-template-columns:1fr}.admin-nav a{font-size:10px}.spacer{height:35px}.detail-note{gap:11px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   TÊ SƠN VN — Premium UI Refresh 2026
   ========================================================= */
:root{
  --bg:#090b0a;
  --panel:#111512;
  --panel2:#171c18;
  --line:#293029;
  --muted:#8d978e;
  --text:#f4f7f1;
  --lime:#d5ff78;
  --radius:22px;
  --soft-shadow:0 24px 80px rgba(0,0,0,.32);
  --deep-shadow:0 35px 110px rgba(0,0,0,.5);
}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 84% -12%,rgba(143,207,73,.13),transparent 32rem),
    radial-gradient(circle at -8% 24%,rgba(72,115,72,.09),transparent 30rem),
    linear-gradient(180deg,#0b0e0c 0,#090b0a 46%,#0a0d0b 100%);
  color:var(--text);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
.wrap{width:min(1320px,calc(100% - 80px))}
.topline{
  background:linear-gradient(90deg,#142010,#203019 48%,#142010);
  color:#c7d5bc;border-bottom-color:#33452a;padding:9px 20px;font-size:10px;letter-spacing:.11em;
}
.topline span{color:var(--lime)}
.topline a{font-weight:800;color:#edf8dc}
.header{
  height:88px;position:sticky;top:0;z-index:80;
  background:rgba(9,11,10,.78);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}
.brand{gap:12px;font-size:25px;letter-spacing:-1.2px;white-space:nowrap}
.brand-mark{
  width:42px;height:42px;display:grid;grid-template-columns:1fr 1fr;place-items:center;
  transform:none;border-radius:13px;overflow:hidden;position:relative;
  background:linear-gradient(145deg,#dfff91,#8ece43);color:#0b1206;
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 8px 30px rgba(171,234,86,.16);
  font-size:0;line-height:1;
}
.brand-mark:after{content:"";position:absolute;inset:1px;border:1px solid rgba(255,255,255,.35);border-radius:12px}
.brand-mark i,.brand-mark b{font:900 15px/1 var(--font);font-style:normal;letter-spacing:-1px;z-index:1}
.brand-mark b{background:#10170d;color:#efffd3;width:100%;height:100%;display:grid;place-items:center}
.brand small{font-size:8px;letter-spacing:2.4px;color:#78827a;margin-top:5px}
.nav{gap:31px;font-size:12px}
.nav a{color:#959e96;transition:color .2s ease}
.nav a:hover,.nav a.active{color:#fff}
.nav a.active:after{width:18px;height:2px;border-radius:99px;margin-top:7px;background:linear-gradient(90deg,var(--lime),#82bd45)}
.icon-btn{transition:background .2s ease,color .2s ease,transform .2s ease}
.icon-btn:hover{background:#1a211b;transform:translateY(-1px)}
.button{border-radius:12px;border-color:#303831;background:#1a201b;padding:13px 20px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.button.primary{
  color:#101708;background:linear-gradient(135deg,#dfff8e,#b8ed5f);border-color:#d7ff83;
  box-shadow:0 11px 34px rgba(190,241,98,.14),inset 0 1px rgba(255,255,255,.55);
}
.button.primary:hover{background:linear-gradient(135deg,#e8ffa8,#c7f775);box-shadow:0 15px 42px rgba(190,241,98,.22)}
.button.ghost{border:1px solid #2c342d;background:rgba(17,21,18,.45)}
.button.ghost:hover{background:#171d18;border-color:#455245}

/* Hero */
.hero-premium{min-height:670px;grid-template-columns:.92fr 1.08fr;gap:42px;padding:58px 0 44px}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{letter-spacing:2.3px;color:#bfe779}
.hero h1{font-size:clamp(56px,6.1vw,88px);line-height:.95;letter-spacing:-5.5px;margin:29px 0 30px;max-width:760px}
.hero h1 .outline{
  color:transparent;-webkit-text-stroke:1.5px #d5ff78;
  text-shadow:0 0 40px rgba(190,240,100,.08);
}
.hero p{max-width:560px;font-size:15px;line-height:1.8;color:#a9b2aa}
.hero-buttons{margin-top:34px;gap:12px}
.hero-foot{margin-top:32px;gap:22px;flex-wrap:wrap}
.hero-foot span{font-size:10px;letter-spacing:.02em;color:#909990}
.hero-art{
  min-height:535px;height:auto;border:1px solid rgba(211,255,120,.11);border-radius:34px;
  background:
    radial-gradient(circle at 52% 52%,rgba(176,234,83,.18),transparent 31%),
    linear-gradient(145deg,rgba(26,34,24,.74),rgba(10,13,11,.42));
  box-shadow:var(--deep-shadow),inset 0 1px rgba(255,255,255,.035);
  overflow:hidden;
}
.hero-art:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.04);border-radius:25px;pointer-events:none}
.hero-grid{inset:0;background-size:38px 38px;opacity:.65}
.orbit{width:390px;height:390px;border-color:rgba(213,255,120,.22)}
.orbit.two{width:455px;height:455px;border-color:rgba(213,255,120,.12)}
.hero-core{
  width:300px;height:300px;border-radius:72px;transform:perspective(800px) rotateY(-18deg) rotateX(12deg) rotateZ(-9deg);
  background:linear-gradient(145deg,#567c2d 0,#172113 38%,#0d120d 67%,#324a22 100%);
  border-color:rgba(214,255,128,.32);
  box-shadow:inset 0 0 45px rgba(201,255,111,.07),0 44px 90px rgba(0,0,0,.58),0 0 70px rgba(137,200,62,.06);
}
.hero-core:before{inset:13px;border-radius:58px;border-color:rgba(213,255,120,.18)}
.hero-core:after{inset:31px;border-radius:43px;background:rgba(8,12,8,.62);border-color:rgba(255,255,255,.04)}
.hero-monogram{z-index:2;display:flex;align-items:baseline;gap:8px;transform:translateY(-6px);text-transform:uppercase}
.hero-monogram span{font-size:35px;font-weight:300;letter-spacing:-2px;color:#d5ff78}
.hero-monogram b{font-size:47px;letter-spacing:-4px;color:#f1f7ec}
.hero-monogram small{font-size:13px;font-weight:900;color:#8fbf54;letter-spacing:1px}
.core-label{bottom:52px;color:#aeca7a;letter-spacing:3.4px;font-size:7px}
.float-card{border-color:rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(28,35,27,.95),rgba(12,16,13,.92));box-shadow:0 18px 46px rgba(0,0,0,.37);padding:14px 16px}
.float-card.top{top:55px;right:31px}
.float-card.bottom{bottom:54px;left:27px}
.float-card b{font-size:11px}
.float-card small{font-size:8px;letter-spacing:.06em}
.art-chip{left:27px;top:34px;border-color:#47553e;background:rgba(11,15,11,.72);border-radius:8px;color:#bdc9b2}
.art-coordinate{right:20px;bottom:29px;color:#697764}
.hero-index{left:auto;right:38px;bottom:17px;letter-spacing:3px;color:#5e6b57}
.star{top:42px;left:115px;color:#d5ff78;filter:drop-shadow(0 0 12px rgba(213,255,120,.35))}

/* Navigation strip */
.category-strip{padding:22px 2px;border-color:#262d27;background:linear-gradient(90deg,rgba(255,255,255,.01),rgba(213,255,120,.018),rgba(255,255,255,.01))}
.category-strip>span{font-size:9px;color:#6f7970}
.category-strip a{font-size:11px;letter-spacing:.04em;color:#bdc4bd}
.category-strip a .icon{width:18px;color:#93b960}

/* Collection & product cards */
.section{padding-top:90px}
.section-head{margin-bottom:34px}
.section-head h2{font-size:clamp(31px,3vw,43px);line-height:1.08;letter-spacing:-2.2px}
.section-head p{max-width:540px;line-height:1.75}
.filters{gap:9px;margin-bottom:28px}
.chip{border-radius:999px;padding:10px 16px;background:#0d100e;border-color:#2a312b}
.chip.active,.chip:hover{background:#d5ff78;border-color:#d5ff78;color:#11180a}
.products{gap:24px}
.product-card{
  position:relative;border-radius:22px;background:linear-gradient(180deg,#131713,#0f1310);border-color:#262d27;
  box-shadow:0 14px 45px rgba(0,0,0,.12);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.product-card:before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(135deg,transparent 20%,rgba(255,255,255,.08),transparent 78%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.product-card:hover{transform:translateY(-8px);border-color:#566846;box-shadow:0 30px 75px rgba(0,0,0,.28),0 0 0 1px rgba(199,247,112,.03)}
.product-visual{height:235px;background:radial-gradient(circle at 50% 85%,var(--glow),transparent 60%),linear-gradient(145deg,#172019,#0e1210)}
.product-visual:before{background-size:34px 34px;opacity:.7}
.product-visual:after{width:175px;height:175px;opacity:.11}
.product-art{width:126px;height:126px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))}
.product-visual .badge{top:18px;left:18px;border-radius:999px;padding:7px 10px;background:rgba(7,10,8,.72);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.08)}
.visual-version{right:18px;bottom:16px;color:#68736a}
.favorite{top:12px;right:12px;background:rgba(9,12,10,.46);backdrop-filter:blur(8px)}
.product-content{padding:25px 24px 24px}
.product-content h3{font-size:22px;margin:11px 0 10px}
.product-content p{font-size:12px;line-height:1.75;color:#929c94}
.product-meta{margin:17px 0 22px}
.product-meta span{border-radius:999px;border-color:#2b332c;background:#111612;padding:6px 9px}
.product-bottom{padding-top:17px;border-top:1px solid rgba(255,255,255,.055)}
.price{font-weight:900;letter-spacing:-.5px}
.add-button{width:42px;height:42px;border-radius:13px;background:#d5ff78;color:#11170a;box-shadow:0 9px 25px rgba(205,255,111,.12)}
.add-button:hover{background:#e4ffab;transform:translateY(-2px)}

/* Editorial commerce blocks */
.feature-banner{
  border-radius:28px;border:1px solid #30392f;background:
    radial-gradient(circle at 77% 24%,rgba(188,239,99,.12),transparent 26rem),
    linear-gradient(135deg,#151b14,#0c100d);
  box-shadow:var(--soft-shadow);padding:54px 58px;
}
.feature-banner h2{font-size:clamp(34px,3.4vw,49px);line-height:1.05;letter-spacing:-2.6px}
.feature-banner p{max-width:560px;color:#9da69e}
.premium-flow{position:relative;overflow:hidden}
.premium-flow:after{content:"TSV";position:absolute;right:-20px;bottom:-80px;font-size:210px;font-weight:950;letter-spacing:-18px;color:rgba(213,255,120,.022);pointer-events:none}
.workflow{position:relative;z-index:1}
.step-tile>div{border-radius:18px;border:1px solid #323c31;background:linear-gradient(145deg,#1c251a,#101510)}
.step-tile>div .icon{color:#c8f474}
.premium-benefits{border-top:0;padding-top:56px}
.benefit{border-top:1px solid #283028;padding-top:25px}
.benefit>.icon{width:22px;height:22px;color:#d5ff78}
.benefit h3{font-size:13px;margin:15px 0 9px}
.benefit p{font-size:11px;color:#838d85}

/* Page headers / shop */
.page-header{padding:65px 0 42px}
.page-header h1{font-size:clamp(38px,4.2vw,60px);letter-spacing:-3px;line-height:1.02;margin-top:18px}
.page-header p{max-width:650px;color:#929c94;font-size:14px;margin-top:14px}
.breadcrumbs{color:#69736b}
.toolbar{background:#0f1310;border:1px solid #252d26;padding:9px;border-radius:16px;margin-bottom:22px}
.search-field{background:#111612;border-color:#283029;border-radius:12px}
.toolbar select{border-radius:12px;background:#111612;border-color:#283029}

/* Product detail */
.product-detail{gap:64px;align-items:start}
.product-detail .product-visual{height:510px;border-radius:28px;border:1px solid #29312a;box-shadow:var(--soft-shadow)}
.product-detail .product-art{width:235px;height:235px}
.detail-thumbs{gap:10px;margin-top:14px}
.detail-thumbs>div{border-radius:12px;background:#101511;border-color:#283029;color:#a9b2aa}
.detail-copy{padding-top:14px}
.detail-copy h1{font-size:clamp(42px,4.6vw,64px);line-height:1;letter-spacing:-3.5px;margin:18px 0}
.detail-tagline{font-size:18px!important;color:#dbe6d6!important;font-weight:700;letter-spacing:-.02em}
.detail-copy>p:not(.detail-tagline){font-size:13px;line-height:1.9;color:#959f97}
.detail-price{margin-top:30px;padding:24px;border-radius:20px;background:linear-gradient(145deg,#151b16,#0f1310);border:1px solid #2a332a}
.detail-price .price{font-size:28px}
.detail-price .button{margin-top:18px;min-height:51px}
.stock-text{justify-content:center;margin-top:13px;color:#89938a}
.detail-note{padding-top:18px;border-top:1px solid #252d26;margin-top:22px}
.detail-description{gap:70px;margin-top:76px}
.detail-description h2{font-size:31px;letter-spacing:-1.5px;margin:13px 0 24px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feature-item{min-height:112px;border-radius:17px;background:linear-gradient(145deg,#131913,#0f1310);border-color:#29312a;align-items:flex-start;padding:20px}
.feature-item .icon{color:#d5ff78;margin-top:1px}
.feature-item p{font-size:12px;line-height:1.7}
.info-panel{border-radius:22px;background:linear-gradient(145deg,#141914,#0e120f);border-color:#29312a;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.info-panel h3{font-size:14px}
.info-panel p{font-size:12px;color:#8e9890}
.info-panel hr{border-color:#252c26}

/* Forms, account, cart, checkout */
.panel{border-radius:22px;background:linear-gradient(145deg,#131814,#0f1310);border-color:#293029;box-shadow:0 16px 50px rgba(0,0,0,.1)}
input,select,textarea{background:#0d110e;border-color:#2b332c;border-radius:11px}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(213,255,120,.06)}
.cart-item{border-color:#252d26}
.cart-item .product-visual{border-radius:14px}
.payment-state{border-radius:12px;background:#111712}
.notice{border-radius:13px}
.modal-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(9px)}
.modal{border:1px solid #303831;border-radius:24px;background:linear-gradient(160deg,#161b17,#0d110e);box-shadow:0 40px 140px rgba(0,0,0,.7)}
.modal .brand{margin-bottom:26px}

/* FAQ & footer */
.faq-layout{gap:80px}
.faq-layout h2{font-size:clamp(34px,3.5vw,48px);letter-spacing:-2.4px}
details{border-color:#2a312b}
summary{font-size:13px;padding:21px 0}
details p{color:#89938b}
.premium-cta{margin-top:95px}
.newsletter{border-radius:28px;border-color:#35422e;background:radial-gradient(circle at 83% 22%,rgba(213,255,120,.13),transparent 20rem),linear-gradient(135deg,#182116,#0d120e);box-shadow:var(--soft-shadow)}
.newsletter h2{font-size:clamp(30px,3vw,42px);letter-spacing:-2px;line-height:1.06;margin:10px 0 12px}
.newsletter p{color:#99a398;max-width:610px}
.footer{padding-top:16px}
.footer>div:first-child p{max-width:310px;color:#7f8981;line-height:1.8;margin-top:18px}
.footer h4{color:#69746b;letter-spacing:.13em}
.footer a{color:#a1aaa2}
.footer a:hover{color:#d5ff78}
.footer-bottom{border-color:#252c26;color:#687269}

/* Admin polish */
.admin-shell{border-top-color:#252c26}
.admin-sidebar{border-color:#252c26}
.admin-label{color:#6e796f;letter-spacing:.15em}
.admin-nav a{border-radius:11px}
.admin-nav a:hover,.admin-nav a.active{background:#1b2517;color:#d5ff78}
.stat{border-radius:17px;background:linear-gradient(145deg,#141a15,#0f1310);border-color:#29312a}
.table-wrap{border-radius:17px;border-color:#29312a;background:#101411}
th{background:#151b16;color:#7e8980}
td{border-color:#252c26}
.chart-bar{background:linear-gradient(#d5ff78,#6d9a3c)}

/* About */
.about-stack{display:grid;gap:12px;position:relative;z-index:2}
.about-card{display:grid;grid-template-columns:42px 1fr;column-gap:14px;align-items:center;padding:17px;border-radius:16px;background:rgba(10,14,11,.72);border:1px solid #2c352b;backdrop-filter:blur(10px)}
.about-card>.icon{grid-row:1/3;width:22px;height:22px;color:#d5ff78;justify-self:center}
.about-card strong{font-size:12px}
.about-card span{font-size:10px;color:#7f8a80;line-height:1.55;margin-top:3px}

.boot{font-size:0;color:#d5ff78;background:radial-gradient(circle,rgba(213,255,120,.08),transparent 24rem)}
.boot b{font-size:34px;letter-spacing:-1.7px}
.boot span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:1100px){
  .hero-premium{grid-template-columns:.9fr 1.1fr;gap:16px}
  .hero h1{font-size:58px;letter-spacing:-3.8px}
  .hero-art{transform:scale(.94)}
  .product-detail{gap:35px}
  .detail-description{gap:35px}
}
@media(max-width:800px){
  .header{height:76px}
  .hero-premium{grid-template-columns:1fr;min-height:0;padding-top:46px}
  .hero-copy{padding-right:10%}
  .hero h1{font-size:60px;letter-spacing:-4px}
  .hero-art{height:450px;min-height:450px;transform:none;margin:10px 0 0}
  .float-card.top{right:16px}.float-card.bottom{left:16px}
  .products{grid-template-columns:1fr 1fr}
  .feature-banner{padding:38px}
  .product-detail{grid-template-columns:1fr}
  .product-detail .product-visual{height:470px}
  .detail-description{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr 1fr}
  .about-stack{margin-top:18px}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 30px)}
  .topline{padding:9px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header{height:70px}
  .brand{font-size:20px;gap:8px}
  .brand-mark{width:35px;height:35px;border-radius:10px}
  .brand-mark:after{border-radius:9px}.brand-mark i,.brand-mark b{font-size:12px}
  .brand small{letter-spacing:1.7px;font-size:6px;margin-top:3px}
  .hero-premium{padding:35px 0 18px}
  .hero-copy{padding-right:0}
  .hero h1{font-size:48px;letter-spacing:-3px;margin:21px 0 23px}
  .hero p{font-size:12px;line-height:1.75}
  .hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:25px}
  .hero-buttons .button{font-size:10px;padding:12px 10px}
  .hero-foot{gap:10px 16px;margin-top:23px}
  .hero-art{height:350px;min-height:350px;border-radius:24px;margin-top:20px}
  .hero-core{width:232px;height:232px;border-radius:55px}
  .hero-core:before{border-radius:44px}.hero-core:after{border-radius:31px}
  .hero-monogram span{font-size:27px}.hero-monogram b{font-size:36px}.hero-monogram small{font-size:10px}
  .core-label{bottom:39px;letter-spacing:2.4px}
  .orbit{width:280px;height:280px}.orbit.two{width:325px;height:325px}
  .float-card{padding:10px 12px;gap:9px}.float-card .tile{width:31px;height:31px}.float-card b{font-size:9px}.float-card small{font-size:6px}
  .float-card.top{top:36px;right:5px}.float-card.bottom{bottom:31px;left:4px}
  .art-chip{left:13px;top:17px;font-size:7px}.art-coordinate{display:none}.hero-index{font-size:6px;right:16px;bottom:10px}
  .category-strip{padding:17px 0;gap:24px}
  .section{padding-top:58px}
  .section-head{align-items:flex-end}.section-head h2{font-size:30px;letter-spacing:-1.5px}.section-head p{font-size:11px}
  .products{grid-template-columns:1fr;gap:16px}
  .product-visual{height:245px}
  .feature-banner{padding:28px 24px;border-radius:22px}
  .feature-banner h2{font-size:31px;letter-spacing:-1.6px}
  .premium-flow:after{font-size:120px;bottom:-42px}
  .premium-benefits{padding-top:42px}
  .page-header{padding:42px 0 30px}.page-header h1{font-size:38px;letter-spacing:-2px}
  .toolbar{padding:7px}
  .product-detail .product-visual{height:330px;border-radius:22px}
  .product-detail .product-art{width:185px;height:185px}
  .detail-copy h1{font-size:39px;letter-spacing:-2.4px}
  .detail-tagline{font-size:15px!important}
  .detail-price{padding:20px}
  .detail-description{margin-top:48px}
  .feature-list{grid-template-columns:1fr}
  .feature-item{min-height:0}
  .faq-layout{gap:28px}
  .premium-cta{margin-top:62px}
  .newsletter{border-radius:22px}
  .footer>div:first-child p{max-width:none}
  .modal{border-radius:20px}
}

/* =========================================================
   TÊ SƠN VN — Smooth Commerce Polish v2
   Lightweight visual layer: transform/opacity-first motion.
   ========================================================= */
:root{
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#080a09;
  --panel:#101411;
  --panel2:#171c18;
  --line:#29312a;
  --muted:#929d94;
  --text:#f6f8f3;
  --lime:#d8ff7d;
  --lime-2:#aee85b;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 18px 58px rgba(0,0,0,.22);
}
html{scroll-padding-top:104px}
body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body:after{
  content:"";position:fixed;z-index:-2;inset:auto -18vw -34vh auto;width:58vw;height:58vw;border-radius:50%;
  background:radial-gradient(circle,rgba(176,232,91,.055),transparent 66%);pointer-events:none;
}
#main{min-height:58vh;animation:ts-page-in .34s var(--ease) both}
@keyframes ts-page-in{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}

.topline{position:relative;z-index:81;background:linear-gradient(90deg,#11190f,#21301a 50%,#11190f);border-bottom-color:rgba(216,255,125,.12)}
.header{
  height:84px;top:0;
  background:rgba(8,10,9,.82);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.025),0 12px 40px rgba(0,0,0,.08);
}
.brand{transition:opacity .2s var(--ease)}
.brand:hover{opacity:.9}
.brand-mark{width:40px;height:40px;border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.5),0 8px 24px rgba(174,232,91,.12)}
.brand-mark:after{border-radius:11px}
.nav{gap:8px;margin-left:20px;padding:4px;border:1px solid rgba(255,255,255,.045);border-radius:999px;background:rgba(255,255,255,.018)}
.nav a{padding:10px 14px;border-radius:999px;transition:color .18s var(--ease),background .18s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.035)}
.nav a.active{background:rgba(216,255,125,.09);color:#f8ffed}
.nav a.active:after{display:none}
.header-actions{gap:10px}
.icon-btn{min-width:40px;min-height:40px;border:1px solid transparent;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),color .18s var(--ease)}
.icon-btn:hover{border-color:rgba(255,255,255,.055);background:#171d18;transform:translateY(-1px)}
.cart-count{top:-2px;right:-3px;box-shadow:0 0 0 3px #0a0d0b}
.button{min-height:46px;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.button:hover{transform:translateY(-1px)}
.button:active,.icon-btn:active,.add-button:active,.chip:active{transform:translateY(0) scale(.98)}
.button.primary{background:linear-gradient(135deg,#e1ff96,#b6ed62);box-shadow:0 10px 28px rgba(190,241,98,.12),inset 0 1px rgba(255,255,255,.65)}
.button.primary:hover{box-shadow:0 14px 34px rgba(190,241,98,.18),inset 0 1px rgba(255,255,255,.65)}

.hero-premium{min-height:650px;grid-template-columns:.9fr 1.1fr;gap:54px;padding:54px 0 48px}
.hero-copy{max-width:640px}
.hero h1{font-size:clamp(54px,5.8vw,84px);letter-spacing:-5px;text-wrap:balance}
.hero h1 .outline{-webkit-text-stroke:1.35px #d8ff7d}
.hero p{max-width:570px;color:#a8b2aa}
.hero-buttons .button{min-height:50px;padding-inline:22px}
.hero-foot{padding-top:2px}
.hero-foot span{color:#939e95}
.hero-art{
  min-height:520px;border-radius:30px;
  background:radial-gradient(circle at 52% 48%,rgba(176,234,83,.17),transparent 31%),linear-gradient(145deg,rgba(24,32,23,.76),rgba(8,11,9,.52));
  box-shadow:0 30px 85px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04);
  contain:paint;
}
.hero-art:after{content:"";position:absolute;inset:auto 14% 5% 14%;height:18%;background:radial-gradient(ellipse,rgba(169,230,85,.12),transparent 68%);filter:blur(12px);pointer-events:none}
.hero-grid{opacity:.5}
.hero-core{width:294px;height:294px;border-radius:68px;box-shadow:inset 0 0 40px rgba(201,255,111,.06),0 36px 76px rgba(0,0,0,.5)}
.float-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.category-strip{gap:28px;padding:20px 0;scrollbar-width:none}
.category-strip::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
.category-strip a{padding:8px 0;transition:color .18s var(--ease),transform .18s var(--ease)}
.category-strip a:hover{transform:translateY(-1px)}

.section{padding-top:84px}
.section-head h2{text-wrap:balance}
.filters{scrollbar-width:none}
.chip{transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.chip:hover{transform:translateY(-1px)}
.products{gap:22px}
.product-card{
  border-radius:20px;
  background:linear-gradient(180deg,#121713 0%,#0d110e 100%);
  box-shadow:var(--shadow-card);
  transform:translateZ(0);
  transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}
.product-card:hover{transform:translateY(-5px);border-color:#526445;box-shadow:0 25px 66px rgba(0,0,0,.3)}
.product-visual{height:230px;contain:paint}
.product-visual:before{opacity:.55}
.product-art{transition:transform .24s var(--ease),filter .24s var(--ease)}
.product-card:hover .product-art{transform:translateY(-3px) scale(1.025);filter:drop-shadow(0 18px 30px rgba(0,0,0,.58))}
.product-visual .badge{font-weight:800;letter-spacing:.11em}
.favorite{border-color:rgba(255,255,255,.05)}
.product-content{padding:24px}
.product-content h3{font-size:21px;line-height:1.2}
.product-content h3 a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-size:0 1px;background-repeat:no-repeat;transition:background-size .22s var(--ease)}
.product-card:hover .product-content h3 a{background-size:100% 1px}
.product-meta{flex-wrap:wrap}
.product-bottom{gap:12px}
.add-button{transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.add-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 28px rgba(205,255,111,.16)}

.feature-banner{padding:50px 54px;box-shadow:0 24px 75px rgba(0,0,0,.2)}
.step-tile>div{transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.step-tile:hover>div{transform:translateY(-3px);border-color:#4c6040;background:linear-gradient(145deg,#202a1e,#111711)}
.benefit{transition:transform .2s var(--ease)}
.benefit:hover{transform:translateY(-2px)}

.page-header{padding:58px 0 38px}
.page-header h1{text-wrap:balance}
.toolbar{position:sticky;top:94px;z-index:20;background:rgba(15,19,16,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,.12)}
.search-field input{min-width:0}
input,select,textarea{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}

.product-detail .product-visual{box-shadow:0 26px 80px rgba(0,0,0,.25)}
.detail-price{box-shadow:0 18px 55px rgba(0,0,0,.13)}
.feature-item{transition:transform .2s var(--ease),border-color .2s var(--ease)}
.feature-item:hover{transform:translateY(-2px);border-color:#3a473a}
.info-panel{box-shadow:0 18px 52px rgba(0,0,0,.15)}

.panel,.stat,.table-wrap,.order-card{box-shadow:0 14px 45px rgba(0,0,0,.1)}
.modal-backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{animation:ts-modal-in .2s var(--ease) both}
@keyframes ts-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.newsletter{box-shadow:0 26px 85px rgba(0,0,0,.25)}

@supports (content-visibility:auto){
  .product-card,.benefit,.feature-item,.order-card{content-visibility:auto;contain-intrinsic-size:1px 340px}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-core{animation:ts-core-float 7s ease-in-out infinite}
  .float-card.top{animation:ts-float-top 6.8s ease-in-out infinite}
  .float-card.bottom{animation:ts-float-bottom 7.6s ease-in-out infinite}
}
@keyframes ts-core-float{0%,100%{transform:perspective(800px) rotateY(-18deg) rotateX(12deg) rotateZ(-9deg) translateY(0)}50%{transform:perspective(800px) rotateY(-18deg) rotateX(12deg) rotateZ(-9deg) translateY(-6px)}}
@keyframes ts-float-top{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes ts-float-bottom{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(4px)}}

@media(max-width:800px){
  .header{height:74px}
  .hero-premium{padding-top:40px;gap:8px}
  .hero-copy{max-width:none;padding-right:4%}
  .hero h1{font-size:clamp(50px,11vw,68px);letter-spacing:-4px}
  .hero-art{min-height:430px}
  .toolbar{top:82px}
  .category-strip{justify-content:flex-start;overflow-x:auto;white-space:nowrap}
  .category-strip>span{display:none}
  .category-strip a{flex:0 0 auto}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 28px)}
  .topline{font-size:8px;letter-spacing:.08em}
  .header{height:68px}
  .brand-mark{width:36px;height:36px}
  .hero-premium{padding-top:32px}
  .hero h1{font-size:46px;line-height:.98;letter-spacing:-3.1px}
  .hero-buttons{grid-template-columns:1fr}
  .hero-buttons .button{min-height:46px;font-size:11px}
  .hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px}
  .hero-art{height:344px;min-height:344px;margin-top:14px;transform:none;border-radius:22px}
  .hero-core{width:220px;height:220px;border-radius:50px}
  .hero-core:before{border-radius:41px}.hero-core:after{border-radius:29px}
  .hero-monogram span{font-size:25px}.hero-monogram b{font-size:33px}.hero-monogram small{font-size:9px}
  .core-label{bottom:35px;font-size:6px;letter-spacing:2px}
  .orbit{width:265px;height:265px}.orbit.two{width:305px;height:305px}
  .float-card{max-width:205px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .float-card.top{top:30px;right:-7px}.float-card.bottom{bottom:28px;left:-7px}
  .section{padding-top:54px}
  .section-head{align-items:end}
  .section-head h2{font-size:29px}
  .product-card:hover{transform:none}
  .product-visual{height:238px}
  .product-content{padding:22px}
  .feature-banner{padding:27px 23px}
  .toolbar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
  .newsletter{padding:27px 23px}
  .modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* =========================================================
   TÊ SƠN VN V3 — BRAND SCALE EDITION
   Flagship storefront layer. Kept as an override so upgrades
   from the v2 codebase remain reviewable and migration-safe.
   ========================================================= */
:root{
  --bg:#080b09;
  --panel:#101411;
  --panel2:#151b16;
  --line:#252d27;
  --muted:#8b958d;
  --text:#f5f7f1;
  --lime:#d7ff72;
  --lime-soft:#b9e95f;
  --ease:cubic-bezier(.2,.75,.2,1);
  --radius-lg:30px;
  --radius-md:18px;
  --shadow-lg:0 28px 90px rgba(0,0,0,.32);
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:
  radial-gradient(circle at 22% -20%,rgba(215,255,114,.045),transparent 28rem),
  linear-gradient(#080b09,#090d0a 42%,#080b09);color:var(--text);font-family:var(--font);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:84px 84px;mask-image:linear-gradient(to bottom,black,transparent 85%)}
.wrap{width:min(1320px,calc(100% - 72px))}
main.wrap{min-height:58vh}
.eyebrow{font-size:9px;letter-spacing:.19em;font-weight:800;color:var(--lime)}
.button{border-radius:12px;min-height:44px;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.button.primary{background:var(--lime);border-color:var(--lime);box-shadow:0 12px 34px rgba(215,255,114,.09);color:#10160a}
.button.primary:hover{background:#e4ffa0;box-shadow:0 18px 38px rgba(215,255,114,.13)}
.button.ghost{border:1px solid #29322b;background:#0e130f}
.button.ghost:hover{border-color:#465543;background:#141a14}
.text-link{letter-spacing:.03em}

/* Global brand chrome */
.topline{padding:0;background:#0c110d;border-bottom:1px solid #202721;color:#818d83}
.topline-inner{min-height:38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;font-size:8px;letter-spacing:.11em;text-transform:uppercase}
.topline-inner>b,.topline-inner b{color:#d9e2d6;font-weight:800}
.topline-inner>a{justify-self:end;display:inline-flex;align-items:center;gap:7px;color:#d9e2d6;font-weight:800}
.topline-inner>a .icon{width:13px;height:13px;color:var(--lime)}
.topline-promise{display:flex;align-items:center;gap:10px;color:#7f8b81}
.topline-promise .icon{width:12px;height:12px;color:#a3be75}
.topline-promise i{width:2px;height:2px;border-radius:50%;background:#526054}
.header{height:88px;gap:34px;border-bottom-color:#232a24;position:relative;z-index:35}
.brand{gap:12px;min-width:max-content}
.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(150deg,#e3ff95,#a8d94f);display:grid;place-items:center;position:relative;overflow:hidden;transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 28px rgba(215,255,114,.08)}
.brand-mark:before{content:"";position:absolute;inset:4px;border:1px solid rgba(10,16,7,.16);border-radius:10px}
.brand-mark i,.brand-mark b{position:absolute;color:#12190c;font-size:12px;letter-spacing:-.08em;font-style:normal;line-height:1}
.brand-mark i{transform:translate(-5px,-4px)}
.brand-mark b{transform:translate(5px,5px)}
.brand-word{display:flex;flex-direction:column;gap:3px}
.brand-word strong{font-size:22px;letter-spacing:-.055em;line-height:1;font-weight:900;color:#f2f5ef}
.brand-word small{font-size:6px!important;line-height:1.1!important;color:#737f76!important;letter-spacing:.2em!important;font-weight:700!important;margin:0!important}
.nav{gap:27px;margin-left:28px}
.nav a{font-size:11px;letter-spacing:.02em;color:#8d968f;position:relative}
.nav a.active:after{width:18px;height:1px;border-radius:0;margin:8px auto -9px;background:var(--lime)}
.header-actions{gap:8px}
.icon-btn{border:1px solid transparent;transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.icon-btn:hover{background:#121713;border-color:#29312a}
.account-button{margin-left:4px}
.cart-count{background:var(--lime);color:#0c1107;border:2px solid var(--bg);top:-4px;right:-4px}

/* Flagship hero */
.brandscale-hero{display:grid;grid-template-columns:.94fr 1.06fr;gap:54px;min-height:670px;align-items:center;padding:42px 0 58px;position:relative}
.brandscale-copy{padding:28px 0 18px}
.brandscale-copy h1{font-size:clamp(58px,6.3vw,94px);line-height:.88;letter-spacing:-.07em;margin:29px 0 32px;text-transform:uppercase;max-width:760px}
.brandscale-copy h1 span,.brandscale-copy h1 strong{display:block}
.brandscale-copy h1 span{font-weight:400;color:#7d877f;letter-spacing:-.055em}
.brandscale-copy h1 strong{font-weight:950;color:#f6f8f3}
.brandscale-copy h1 strong:after{content:".";color:var(--lime)}
.hero-lead{max-width:620px;color:#98a29a;font-size:14px;line-height:1.85}
.brandscale-copy .hero-buttons{margin-top:32px}
.hero-primary{min-height:52px;padding-inline:24px}
.hero-secondary{min-height:52px}
.brandscale-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #252d27;margin-top:45px;padding-top:20px}
.brandscale-trust>div{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:4px 20px 4px 0;border-right:1px solid #212822}
.brandscale-trust>div:not(:first-child){padding-left:20px}
.brandscale-trust>div:last-child{border-right:0}
.brandscale-trust b{font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#546057;margin-top:2px}
.brandscale-trust span{font-size:8px;letter-spacing:.1em;font-weight:800;color:#c5cdc7}
.brandscale-trust small{display:block;margin-top:7px;color:#707b73;font-size:8px;letter-spacing:0;line-height:1.45;font-weight:500}
.brandscale-stage{height:570px;border:1px solid #273028;border-radius:32px;background:
  radial-gradient(circle at 50% 46%,rgba(194,244,93,.16),transparent 13rem),
  radial-gradient(circle at 15% 5%,rgba(215,255,114,.05),transparent 17rem),
  linear-gradient(145deg,#111713,#090d0a);position:relative;overflow:hidden;box-shadow:var(--shadow-lg);isolation:isolate}
.brandscale-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.025) 49%,transparent 52%);pointer-events:none}
.stage-top{position:absolute;top:24px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;z-index:3;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#667169}
.stage-live{display:flex;align-items:center;gap:7px}.stage-live i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(215,255,114,.65)}
.stage-grid{position:absolute;inset:58px 24px 24px;background-image:linear-gradient(rgba(184,211,155,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(184,211,155,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,black 35%,transparent 78%)}
.stage-orbit{position:absolute;left:50%;top:51%;border:1px solid rgba(197,242,111,.22);border-radius:50%;transform-origin:center}
.orbit-a{width:380px;height:380px;transform:translate(-50%,-50%) rotate(-18deg) scaleX(1.12)}
.orbit-b{width:425px;height:425px;border-style:dashed;border-color:rgba(197,242,111,.11);transform:translate(-50%,-50%) rotate(38deg) scaleX(.73)}
.stage-monogram{position:absolute;left:50%;top:50%;width:270px;height:270px;transform:translate(-50%,-50%) rotate(-7deg);border-radius:72px;background:linear-gradient(145deg,#c8f96d,#729b37 45%,#1b2716 46%,#101711);border:1px solid rgba(227,255,164,.38);box-shadow:inset 0 0 0 16px rgba(6,11,7,.33),inset 0 0 0 17px rgba(218,255,137,.1),0 32px 80px rgba(0,0,0,.48);display:grid;place-items:center;z-index:2}
.stage-monogram:before{content:"";position:absolute;inset:29px;border:1px solid rgba(217,255,139,.18);border-radius:50px}
.stage-monogram span{position:absolute;top:54px;font-size:9px;letter-spacing:.32em;color:#b9cc9d;font-weight:700}
.stage-monogram b{font-size:86px;letter-spacing:-.11em;color:#f0ffcf;line-height:.8;text-shadow:0 0 28px rgba(215,255,114,.25)}
.stage-monogram small{position:absolute;bottom:48px;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;color:#849477}
.stage-card{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(166,190,151,.17);border-radius:14px;background:rgba(13,18,14,.78);box-shadow:0 18px 45px rgba(0,0,0,.3);backdrop-filter:blur(10px)}
.stage-card-a{top:97px;right:22px}.stage-card-b{bottom:67px;left:20px}
.stage-icon{width:34px;height:34px;border:1px solid rgba(215,255,114,.14);background:rgba(215,255,114,.055);border-radius:10px;display:grid;place-items:center;color:var(--lime)}
.stage-icon .icon{width:16px;height:16px}
.stage-card b{display:block;font-size:8px;letter-spacing:.08em;color:#dce5d9}.stage-card small{display:block;font-size:6px;letter-spacing:.1em;color:#68746b;margin-top:4px}
.stage-code{position:absolute;right:24px;bottom:20px;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#4f5b52;letter-spacing:.12em}

/* Brand ticker and proof layer */
.brand-ticker{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-top:1px solid #242c25;border-bottom:1px solid #242c25;background:#0b0f0c;overflow:hidden}
.brand-ticker>div{width:max-content;min-width:100%;display:flex;justify-content:center;align-items:center;gap:30px;padding:19px 32px;color:#6f7a72;font-size:9px;letter-spacing:.16em;font-weight:800;white-space:nowrap}
.brand-ticker i{font-style:normal;color:#96b358}
.brand-proof{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #242c25}
.brand-proof article{min-height:195px;padding:34px 30px 31px;border-right:1px solid #242c25;position:relative}
.brand-proof article:last-child{border-right:0}
.brand-proof article>span{position:absolute;right:24px;top:24px;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#4f5b52}
.brand-proof .icon{width:20px;height:20px;color:#a9ca67}
.brand-proof h3{font-size:15px;letter-spacing:-.02em;margin:24px 0 9px}
.brand-proof p{font-size:10px;color:#7c877f;line-height:1.7;max-width:230px}

/* Collection and cards */
.flagship-collection{padding-top:98px}
.collection-head{align-items:flex-end;margin-bottom:34px}
.collection-head h2{font-size:clamp(38px,4.3vw,58px);line-height:1.02;letter-spacing:-.052em;margin-top:17px}
.collection-head h2 span{color:#8a958c;font-weight:450}
.collection-head p{max-width:560px}
.collection-side{display:flex;flex-direction:column;align-items:flex-end;gap:17px}.collection-side>span{font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#59645c;letter-spacing:.12em}
.filters{gap:8px;margin-bottom:24px}.chip{border-radius:999px;padding:9px 16px;background:#0d120e;border-color:#29312a;font-size:10px;letter-spacing:.02em}.chip.active,.chip:hover{background:#d7ff72;border-color:#d7ff72;color:#10160a}
.flagship-products{gap:16px}
.product-card{border-radius:20px;background:linear-gradient(160deg,#121713,#0d110e);border-color:#252d27;box-shadow:none;overflow:hidden;transform:translateZ(0)}
.product-card:hover{transform:translateY(-4px);border-color:#45543f;box-shadow:0 24px 58px rgba(0,0,0,.18)}
.product-card-media{position:relative}.product-visual{height:235px;background:radial-gradient(ellipse at 50% 85%,var(--glow),transparent 64%),linear-gradient(150deg,#171e19,#0e1310)}
.product-visual:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}
.product-visual>a{position:relative;z-index:2}.product-art{filter:drop-shadow(0 20px 28px rgba(0,0,0,.35))}
.product-visual .badge{font-size:7px;letter-spacing:.1em;font-weight:800;z-index:3}.favorite{z-index:3}.visual-version{z-index:3;font-size:7px;letter-spacing:.1em}
.product-content{padding:23px 22px 22px}
.product-overline{display:flex;align-items:center;justify-content:space-between;gap:16px}.product-category{font-size:8px;letter-spacing:.13em;font-weight:800;color:#91a285;text-transform:uppercase}.product-stock{font:800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#6d786f;display:flex;align-items:center;gap:6px}.product-stock i{width:5px;height:5px;border-radius:50%;background:#666}.product-stock.in i{background:var(--lime);box-shadow:0 0 8px rgba(215,255,114,.45)}.product-stock.in{color:#9dad91}
.product-content h3{font-size:22px;letter-spacing:-.045em;margin:11px 0 7px}.product-content>p{font-size:11px;color:#7f8a82;min-height:38px}
.product-meta{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0 20px}.product-meta span{display:inline-flex;align-items:center;gap:6px;border:1px solid #283029;border-radius:999px;background:#0b100c;padding:6px 9px;font-size:7px;color:#768178;white-space:nowrap}.product-meta .icon{width:11px;height:11px;color:#8e9d87}
.product-bottom{display:flex;align-items:end;justify-content:space-between;border-top:1px solid #232a24;padding-top:17px;gap:12px}.product-bottom small{display:block;font-size:6px;letter-spacing:.15em;color:#58635b;font-weight:800;margin-bottom:6px}.price{font-size:17px}.old-price{font-size:10px;color:#657067;margin-left:7px}.product-actions{display:flex;align-items:center;gap:9px}.card-detail{display:inline-flex;align-items:center;gap:6px;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#9ba69e;font-weight:800}.card-detail .icon{width:13px;height:13px}.card-detail:hover{color:var(--lime)}.add-button{width:39px;height:39px;border-radius:11px}

/* Brand bento system */
.brand-bento{margin-top:92px;display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-template-rows:minmax(210px,auto) minmax(180px,auto);gap:12px}
.brand-bento article{border:1px solid #273028;border-radius:22px;background:linear-gradient(145deg,#111713,#0c110d);position:relative;overflow:hidden}
.bento-main{grid-row:1/3;padding:43px 42px;min-height:440px;background:radial-gradient(circle at 82% 77%,rgba(215,255,114,.11),transparent 16rem),linear-gradient(145deg,#141b14,#0c100d)!important}
.bento-main h2{font-size:clamp(34px,3.6vw,50px);line-height:1.02;letter-spacing:-.052em;margin:20px 0 20px;max-width:600px}.bento-main p{max-width:520px;color:#8b968e;font-size:12px}.bento-main .text-link{margin-top:28px}.bento-mark{position:absolute;right:-16px;bottom:-49px;font-size:160px;letter-spacing:-.11em;font-weight:950;color:rgba(215,255,114,.05);line-height:1}
.bento-card{padding:29px 27px}.bento-card>.icon{width:20px;height:20px;color:#aecb74;margin-top:5px}.bento-card h3{font-size:16px;margin:29px 0 9px;letter-spacing:-.025em}.bento-card p{font-size:9px;line-height:1.7;color:#758077}.bento-no{position:absolute;right:22px;top:21px;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#556058}.bento-card.wide{grid-column:2/4;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-content:center;padding:30px 32px}.bento-card.wide>.icon{grid-row:1/4}.bento-card.wide h3{margin:0 0 8px}.bento-card.wide p{max-width:520px}.bento-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.bento-pills span{font-size:7px;letter-spacing:.07em;border:1px solid #2b342c;padding:6px 8px;border-radius:999px;color:#78847a}

.flagship-flow{margin-top:92px;border-radius:26px;padding:48px 52px;background:radial-gradient(circle at 85% 20%,rgba(215,255,114,.10),transparent 20rem),linear-gradient(145deg,#121912,#0b100c)}
.flagship-flow h2{font-size:clamp(35px,3.7vw,50px)}
.flagship-faq{padding-bottom:10px}

/* Shop page */
.page-header{padding:72px 0 40px}.page-header h1{font-size:clamp(44px,5.2vw,72px);line-height:.98;letter-spacing:-.058em;max-width:950px}.page-header p{font-size:13px;color:#89938b}.breadcrumbs{font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.shop-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #242c25;padding:15px 0 12px;color:#58635b;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.toolbar{top:92px;border-radius:14px;border-color:#283129;background:rgba(10,14,11,.88);padding:8px;margin-bottom:18px}.search-field{border-radius:10px}.toolbar select{min-width:180px;font-size:10px}

/* Product detail scaling polish */
.product-detail{gap:72px}.product-detail .product-visual{height:545px;border-radius:28px}.detail-copy{position:sticky;top:112px;padding-top:10px}.detail-copy h1{font-size:clamp(48px,5vw,72px);letter-spacing:-.06em}.detail-tagline{font-size:19px!important}.detail-price{border-radius:18px;background:#101511;border-color:#29322a}.detail-note span{font-size:9px}.feature-item{background:#0f1410}

/* About */
.about-manifesto{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;border-top:1px solid #262e27;border-bottom:1px solid #262e27;padding:70px 0}
.about-manifesto h2{font-size:clamp(45px,5.2vw,70px);line-height:.96;letter-spacing:-.06em;margin:18px 0 25px}.about-manifesto h2 span{color:#879289;font-weight:450}.about-manifesto p{max-width:610px;color:#8e9990;font-size:13px}.about-manifesto .button{margin-top:29px}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #283129;border-radius:22px;overflow:hidden;background:#0c100d}.manifesto-grid>div{min-height:175px;padding:28px;border-right:1px solid #283129;border-bottom:1px solid #283129}.manifesto-grid>div:nth-child(2n){border-right:0}.manifesto-grid>div:nth-last-child(-n+2){border-bottom:0}.manifesto-grid b{display:block;font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5d685f}.manifesto-grid strong{display:block;margin:28px 0 9px;font-size:14px}.manifesto-grid span{font-size:9px;line-height:1.65;color:#768178}.brand-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.brand-pillars article{padding:34px 31px;border:1px solid #273028;border-radius:19px;background:#0e130f}.brand-pillars span{font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#69756c;letter-spacing:.08em}.brand-pillars h3{font-size:24px;margin:34px 0 10px}.brand-pillars p{font-size:10px;color:#7d8880}

/* Footer */
.flagship-cta{margin-top:110px;border-radius:28px;padding:48px 50px}.flagship-cta h2 span{color:#96a28f;font-weight:450}.flagship-footer{grid-template-columns:1.6fr .7fr .8fr .8fr;gap:50px;padding-top:68px}.footer-brand p{max-width:370px}.footer-seal{display:inline-flex;margin-top:24px;border:1px solid #283129;border-radius:999px;padding:8px 11px;font:700 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6d786f;letter-spacing:.1em}.footer h4{font-size:7px}.footer a{font-size:10px}.footer-bottom{font-size:8px;letter-spacing:.02em}

/* Admin alignment */
.admin-shell{background:#090d0a}.admin-sidebar{background:#0b100c}.admin-nav a{font-size:10px}.stat{background:linear-gradient(145deg,#111713,#0c100d)}.stat strong{letter-spacing:-.045em}.table-wrap{background:#0c100d}.admin-content h1{letter-spacing:-.05em}

/* Motion deliberately light: transform/opacity only */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .stage-monogram{animation:v3-core 8s ease-in-out infinite}
  .stage-card-a{animation:v3-float-a 7s ease-in-out infinite}
  .stage-card-b{animation:v3-float-b 7.7s ease-in-out infinite}
}
@keyframes v3-core{0%,100%{transform:translate(-50%,-50%) rotate(-7deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-7deg) translateY(-7px)}}
@keyframes v3-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes v3-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@supports(content-visibility:auto){
  .brand-proof article,.brand-bento article,.brand-pillars article{content-visibility:auto;contain-intrinsic-size:1px 240px}
}

@media(max-width:1120px){
  .wrap{width:min(100% - 48px,1220px)}
  .topline-promise{display:none}.topline-inner{grid-template-columns:1fr 1fr}.topline-inner>a{justify-self:end}
  .nav{gap:20px;margin-left:15px}.nav a{font-size:10px}
  .brandscale-hero{gap:30px;grid-template-columns:.9fr 1.1fr}.brandscale-copy h1{font-size:clamp(54px,6vw,78px)}
  .brandscale-stage{height:525px}.stage-monogram{width:238px;height:238px;border-radius:62px}.stage-monogram b{font-size:72px}
  .brand-proof article{padding-inline:22px}
  .brand-bento{grid-template-columns:1.15fr .85fr .85fr}
  .product-detail{gap:42px}
}
@media(max-width:900px){
  .wrap{width:calc(100% - 36px)}
  .desktop-favorite,.account-button{display:none}.nav{display:none}.mobile-menu{display:inline-flex}
  .header{height:76px}
  .brandscale-hero{grid-template-columns:1fr;gap:20px;padding-top:46px}.brandscale-copy{max-width:760px}.brandscale-copy h1{font-size:clamp(58px,10vw,82px)}
  .brandscale-stage{height:500px}.brandscale-trust{max-width:760px}
  .brand-proof{grid-template-columns:1fr 1fr}.brand-proof article:nth-child(2){border-right:0}.brand-proof article:nth-child(-n+2){border-bottom:1px solid #242c25}
  .products{grid-template-columns:1fr 1fr}
  .brand-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bento-main{grid-column:1/3;grid-row:auto;min-height:390px}.bento-card.wide{grid-column:1/3}
  .about-manifesto{grid-template-columns:1fr;gap:40px}.brand-pillars{grid-template-columns:1fr 1fr}.brand-pillars article:last-child{grid-column:1/3}
  .flagship-footer{grid-template-columns:1.4fr 1fr 1fr}.flagship-footer>div:last-child{grid-column:2/4}.detail-copy{position:static}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 28px)}
  .topline-inner{min-height:32px;font-size:6px}.topline-inner>a .icon{width:10px}.topline-inner>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header{height:68px}.brand-mark{width:36px;height:36px;border-radius:11px}.brand-word strong{font-size:18px}.brand-word small{font-size:5px!important}
  .brandscale-hero{padding:34px 0 38px}.brandscale-copy h1{font-size:47px;letter-spacing:-.062em;margin:22px 0 24px}.hero-lead{font-size:11px;line-height:1.75}.brandscale-copy .hero-buttons{display:grid;grid-template-columns:1fr;margin-top:24px}.hero-primary,.hero-secondary{width:100%;min-height:46px}
  .brandscale-trust{grid-template-columns:1fr;gap:0;margin-top:31px}.brandscale-trust>div{border-right:0;border-bottom:1px solid #202721;padding:12px 0!important}.brandscale-trust>div:last-child{border-bottom:0}.brandscale-trust small{margin-top:4px}
  .brandscale-stage{height:350px;border-radius:22px}.stage-top{top:17px;left:18px;right:18px;font-size:6px}.stage-grid{inset:45px 14px 14px;background-size:30px 30px}.stage-monogram{width:180px;height:180px;border-radius:48px}.stage-monogram:before{inset:21px;border-radius:34px}.stage-monogram b{font-size:54px}.stage-monogram span{top:36px;font-size:6px}.stage-monogram small{bottom:32px;font-size:5px}.orbit-a{width:235px;height:235px}.orbit-b{width:270px;height:270px}.stage-card{padding:9px 10px;gap:8px;backdrop-filter:none}.stage-card-a{top:66px;right:8px}.stage-card-b{bottom:43px;left:8px}.stage-icon{width:27px;height:27px;border-radius:8px}.stage-card b{font-size:6px}.stage-card small{font-size:4.5px}.stage-code{right:14px;bottom:12px;font-size:5px}
  .brand-ticker>div{justify-content:flex-start;gap:18px;padding:15px 20px;font-size:7px;overflow:hidden}
  .brand-proof{grid-template-columns:1fr}.brand-proof article{min-height:150px;border-right:0;border-bottom:1px solid #242c25!important;padding:27px 23px}.brand-proof article:last-child{border-bottom:0!important}.brand-proof h3{margin-top:18px}.brand-proof p{max-width:none}
  .flagship-collection{padding-top:64px}.collection-head{align-items:flex-start}.collection-head h2{font-size:34px}.collection-side{display:none}.filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.chip{flex:0 0 auto}
  .products{grid-template-columns:1fr}.product-visual{height:250px}.product-content>p{min-height:0}.product-bottom{align-items:center}.card-detail{display:none}
  .brand-bento{margin-top:64px;display:block}.brand-bento article{margin-bottom:10px}.bento-main{min-height:380px;padding:32px 25px}.bento-main h2{font-size:33px}.bento-mark{font-size:110px}.bento-card{padding:25px}.bento-card.wide{display:block}.bento-card.wide>.icon{margin-bottom:25px}
  .flagship-flow{margin-top:64px;padding:29px 23px}.flagship-flow h2{font-size:32px}.workflow{margin-top:28px}
  .page-header{padding:48px 0 30px}.page-header h1{font-size:42px}.shop-meta{font-size:5.7px;gap:15px}.shop-meta span:last-child{text-align:right}.toolbar{position:static;backdrop-filter:none}
  .product-detail .product-visual{height:390px}.detail-copy h1{font-size:43px}.detail-description{margin-top:54px}.feature-list{grid-template-columns:1fr}
  .about-manifesto{padding:48px 0}.about-manifesto h2{font-size:43px}.manifesto-grid{grid-template-columns:1fr}.manifesto-grid>div{min-height:140px;border-right:0!important;border-bottom:1px solid #283129!important}.manifesto-grid>div:last-child{border-bottom:0!important}.brand-pillars{grid-template-columns:1fr}.brand-pillars article:last-child{grid-column:auto}
  .flagship-cta{margin-top:72px;padding:31px 24px}.flagship-footer{grid-template-columns:1fr 1fr;gap:34px}.footer-brand{grid-column:1/3}.flagship-footer>div:last-child{grid-column:auto}.footer-bottom{display:grid;gap:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.stage-monogram,.stage-card{animation:none!important}.product-card,.button,.icon-btn{transition:none!important}}
/* V3 reset for legacy mark/topline declarations */
.brand-mark:after{content:none!important}
.brand-mark i,.brand-mark b{background:transparent!important;width:auto!important;height:auto!important;display:block!important;place-items:unset!important;z-index:1!important}
.topline-inner span{color:#818d83;font-weight:600}.topline-inner b{color:#dfe6dc}.topline-inner>a{margin-left:0}

/* ========================================================================== 
   TÊ SƠN VN V4 — PREMIUM COMMERCE SYSTEM
   ========================================================================== */
:root{--accent:#2f9cff;--accent-soft:#7ee7ff;--v4-bg:#050b14;--v4-bg2:#07111d;--v4-panel:#08131f;--v4-line:#1a2d42;--v4-text:#f4f8fd;--v4-muted:#8496aa}
html{background:var(--v4-bg);scrollbar-color:#29445f #050b14}
body{background:radial-gradient(circle at 74% -15%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 35%),linear-gradient(180deg,#050b14 0%,#07101a 48%,#050b14 100%);color:var(--v4-text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:#fff}.wrap{width:min(1480px,calc(100% - 56px))}
.topline{background:#050a11;border-bottom:1px solid #112034;color:#7790a9}.topline-inner{min-height:34px}.topline-status{display:flex;align-items:center;gap:8px}.topline-status>i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}.topline a{color:#bcd0e5}.topline-promise .icon{color:var(--accent-soft)}
.header{min-height:78px;border-bottom:1px solid rgba(105,160,210,.13);background:rgba(5,11,20,.76);backdrop-filter:blur(18px);position:sticky;top:0;z-index:40;padding-top:0;padding-bottom:0}.brand-mark{background:linear-gradient(145deg,#fff,#b9d7f6);color:#07101b;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.3)}.brand-word small{color:#5f768d}.nav a{color:#8ca0b5}.nav a:hover,.nav a.active{color:#fff}.nav a.active:after{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.icon-btn{border-color:#1a2d42;background:#08121e;color:#b7c7d8}.icon-btn:hover{border-color:#315879;color:#fff;background:#0c1a2a}.cart-count{background:var(--accent);color:#03101d}.button{border-color:#24405a;background:#0b1725;color:#dbe8f4}.button:hover{border-color:#3c6689;background:#102238}.button.primary{border-color:color-mix(in srgb,var(--accent) 85%,#fff);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#006ae8));color:#fff;box-shadow:0 13px 30px color-mix(in srgb,var(--accent) 22%,transparent)}.button.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.button.ghost{background:rgba(5,11,20,.55);border-color:#25425d}.eyebrow{color:var(--accent-soft)}
.commerce-hero{min-height:640px;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:44px;position:relative;overflow:hidden;border:1px solid #172a3e;border-radius:28px;margin-top:22px;padding:64px 58px;background:linear-gradient(105deg,rgba(4,10,18,.99) 0%,rgba(7,17,29,.96) 48%,rgba(4,12,21,.88) 100%);box-shadow:0 36px 90px rgba(0,0,0,.34)}
.commerce-hero:before{content:"";position:absolute;inset:0;background-image:var(--hero-image,none);background-position:center;background-size:cover;opacity:.18;filter:saturate(.72) contrast(1.12)}.hero-atmosphere{position:absolute;inset:0;background:radial-gradient(circle at 76% 42%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 25%),radial-gradient(circle at 62% 110%,color-mix(in srgb,var(--accent-soft) 10%,transparent),transparent 30%),linear-gradient(90deg,rgba(5,11,20,.99) 0%,rgba(5,11,20,.78) 43%,rgba(5,11,20,.12) 100%)}
.commerce-hero-copy{position:relative;z-index:3;max-width:700px}.commerce-hero-copy h1{font-size:clamp(52px,5.5vw,86px);line-height:.98;letter-spacing:-.065em;margin:22px 0 16px;text-wrap:balance;color:#f7fbff}.commerce-hero-copy h2{font-size:clamp(19px,2.1vw,29px);line-height:1.18;margin:0 0 23px;color:var(--accent);letter-spacing:-.035em}.commerce-hero-copy>p{max-width:610px;color:#9dafc1;font-size:14px;line-height:1.85}.commerce-hero .hero-buttons{display:flex;gap:11px;margin-top:30px}.commerce-hero .hero-buttons .button{min-height:52px}.hero-proof{display:flex;gap:23px;flex-wrap:wrap;margin-top:34px;padding-top:21px;border-top:1px solid #1a2a3b;color:#8296aa;font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.hero-proof span{display:flex;align-items:center;gap:7px}.hero-proof .icon{width:14px;height:14px;color:var(--accent-soft)}
.commerce-hero-stage{height:520px;position:relative;z-index:2;display:grid;place-items:center}.stage-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 66%);filter:blur(12px)}.stage-device{width:430px;height:300px;position:relative;transform:perspective(1000px) rotateY(-14deg) rotateX(7deg) rotateZ(-2deg);border:1px solid #325b82;border-radius:22px;padding:12px;background:linear-gradient(145deg,#12243a,#070e18);box-shadow:0 50px 90px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.03)}.stage-device:after{content:"";position:absolute;left:7%;right:7%;height:16px;bottom:-28px;border-radius:50%;background:#03070b;filter:blur(8px)}.stage-screen{height:100%;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 26%),linear-gradient(145deg,#07101b,#0a1a2d);border:1px solid #172c43;overflow:hidden;position:relative}.stage-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(80,150,210,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(80,150,210,.06) 1px,transparent 1px);background-size:28px 28px}.stage-screen strong{font-size:104px;letter-spacing:-.09em;line-height:1;color:#fff;text-shadow:0 0 42px color-mix(in srgb,var(--accent) 45%,transparent);z-index:1}.stage-screen small,.screen-kicker{position:relative;z-index:1;letter-spacing:.22em;font-size:7px;color:#6f8ba6}.screen-kicker{position:absolute;top:24px;left:28px;color:var(--accent-soft)}.floating-product{position:absolute;display:flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid #244462;border-radius:12px;background:rgba(6,16,27,.83);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.35);font-size:8px;font-weight:850;letter-spacing:.11em}.floating-product .icon{color:var(--accent);width:16px}.fp-a{top:74px;right:4px}.fp-b{bottom:82px;left:2px}.fp-c{bottom:34px;right:42px}
.commerce-benefits{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #17293d;border-radius:18px;background:#08121e;margin-top:18px;overflow:hidden}.commerce-benefits article{display:flex;align-items:center;gap:14px;padding:20px 22px;border-right:1px solid #17293d}.commerce-benefits article:last-child{border-right:0}.commerce-benefits .icon{width:22px;height:22px;color:var(--accent)}.commerce-benefits strong{display:block;font-size:10px;letter-spacing:.01em}.commerce-benefits span{display:block;color:#6f8498;font-size:8px;margin-top:4px}
.home-categories{padding-bottom:18px}.home-categories .filters{padding:0}.filters .chip{background:#08131f;border-color:#1b3046;color:#8fa4b8}.filters .chip:hover,.filters .chip.active{background:color-mix(in srgb,var(--accent) 13%,#07121d);color:#fff;border-color:color-mix(in srgb,var(--accent) 55%,#203e5d);box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 6%,transparent)}
.storefront-featured .section-head h2,.page-header h1{color:#f4f8fd}.storefront-featured .section-head p{color:#7f93a6}.products.premium-products,.products.flagship-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.product-card{background:#08131f;border:1px solid #182d42;border-radius:18px;overflow:hidden;box-shadow:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.product-card:hover{transform:translateY(-4px);border-color:#2b5374;box-shadow:0 24px 48px rgba(0,0,0,.24)}.product-card-media{padding:0}.product-visual{height:220px;border-radius:0;background:radial-gradient(circle at 55% 45%,color-mix(in srgb,currentColor 20%,transparent),transparent 28%),linear-gradient(145deg,#0a1726,#07101a);border:0;border-bottom:1px solid #172b3f}.product-visual:after{opacity:.3}.product-visual .badge{left:14px;top:14px;background:#0b1725;border-color:#2a4864;color:#c7d7e7}.product-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,filter .35s ease}.product-card:hover .product-image{transform:scale(1.025);filter:brightness(1.05)}.product-art{filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));color:var(--accent-soft)}.product-content{padding:17px}.product-overline{margin-bottom:10px}.product-category{color:#7990a6}.product-stock.in{color:#72e3a2}.product-stock.in i{background:#72e3a2}.product-content h3{font-size:17px;letter-spacing:-.025em}.product-content>p{font-size:10px;color:#7890a5;min-height:32px}.product-meta{display:flex;gap:8px;flex-wrap:wrap;color:#657d93}.product-meta span{border:0;padding:0;background:transparent}.product-bottom{padding-top:14px;border-top:1px solid #14283b}.price{color:#f5f9fd}.old-price{color:#5f7284}.discount-chip{display:inline-flex;margin-left:8px;padding:3px 6px;border-radius:6px;background:#102b21;color:#74dfa5;font-size:8px;font-weight:900}.add-button{background:var(--accent);color:#fff;border:0}.add-button:hover{filter:brightness(1.1)}
.brand-story-v4{display:grid;grid-template-columns:1fr 1fr;min-height:500px;margin:76px 0;border:1px solid #172a3e;border-radius:24px;overflow:hidden;background:#08121e}.story-visual{min-height:500px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 35%),linear-gradient(145deg,#07111d,#050a12);overflow:hidden}.story-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(80,150,210,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(80,150,210,.07) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(135deg,black,transparent 90%)}.story-visual>span{font-size:150px;letter-spacing:-.11em;font-weight:950;color:#f5faff;text-shadow:0 0 60px color-mix(in srgb,var(--accent) 40%,transparent)}.story-visual small{position:absolute;left:30px;bottom:28px;color:#65829e;letter-spacing:.2em;font-size:7px}.story-copy{padding:62px;display:flex;flex-direction:column;justify-content:center}.story-copy h2{font-size:clamp(33px,3.5vw,52px);line-height:1.02;letter-spacing:-.055em;margin:18px 0 22px}.story-copy>p{color:#8196aa;line-height:1.8;max-width:650px}.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:32px 0;border-top:1px solid #183047;border-bottom:1px solid #183047}.story-stats>div{padding:18px 15px;border-right:1px solid #183047;display:flex;gap:12px;align-items:center}.story-stats>div:last-child{border-right:0}.story-stats strong{font-size:20px;color:var(--accent)}.story-stats span{font-size:8px;color:#758ba0;line-height:1.45;text-transform:uppercase;letter-spacing:.08em}
.page-header{padding-top:54px}.breadcrumbs{color:#60788e}.toolbar,.panel,.info-panel,.ticket,.order-card,.table-wrap{background:#08131f;border-color:#182d42}.search-field,select,input,textarea{background:#06101b;border-color:#1d344b;color:#e7f0f8}.search-field:focus-within,input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.product-detail{border-color:#1a3148;background:linear-gradient(145deg,#08131f,#07101a)}.detail-copy .eyebrow{color:var(--accent)}.detail-note{border-color:#1a3148}.feature-item,.info-panel{background:#08131f}.feature-item .icon{color:var(--accent)}.stock-text .dot{background:#66e39e}.footer{border-color:#182d42}.newsletter{background:linear-gradient(115deg,#0a1726,#08111c);border-color:#1c3650}.newsletter h2 span{color:var(--accent)}.footer-seal{color:#5f7890}.demo-note{background:#091726;border-top-color:#1d3d58;color:#7f9bb4}
.admin-view .header{position:relative}.admin-shell{background:#050b14;border:1px solid #172b40;border-radius:22px;overflow:hidden;min-height:720px;margin-top:22px}.admin-sidebar{background:#07111c;border-right:1px solid #172b40;padding:24px 14px}.admin-label{color:#62809d}.admin-nav a{border:1px solid transparent;color:#839ab0}.admin-nav a:hover,.admin-nav a.active{background:#0b1d2e;color:#fff;border-color:#1e4260}.admin-nav a.active .icon{color:var(--accent)}.admin-main{padding:32px}.stat{background:linear-gradient(145deg,#0b1725,#08121d);border-color:#19314a}.stat .icon{color:var(--accent)}.stat small{color:#637d94}.chart-bar{background:linear-gradient(180deg,var(--accent-soft),var(--accent))}.table-wrap{border-radius:15px}.table-wrap th{background:#0a1725;color:#7d96ad}.table-wrap td{border-color:#152a3f}.mini-art img{width:100%;height:100%;object-fit:cover;border-radius:9px}.appearance-admin{display:grid;grid-template-columns:minmax(240px,.68fr) minmax(440px,1.32fr);gap:16px;align-items:start}.appearance-admin>section:last-child{grid-column:1/-1}.appearance-preview{position:sticky;top:20px}.mini-store-preview{border:1px solid #264562;border-radius:18px;padding:32px;min-height:330px;background:radial-gradient(circle at 80% 25%,color-mix(in srgb,var(--preview-accent) 24%,transparent),transparent 28%),linear-gradient(145deg,#07111d,#0b1826);display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 50px rgba(0,0,0,.2)}.mini-store-preview>span{font-size:8px;letter-spacing:.16em;color:var(--preview-accent-soft);font-weight:850}.mini-store-preview h3{font-size:34px;line-height:1.02;letter-spacing:-.05em;margin:16px 0}.mini-store-preview p{color:#8097ab;font-size:10px;line-height:1.65}.mini-store-preview button{width:max-content;margin-top:18px;background:var(--preview-accent);color:#fff;border:0;border-radius:9px;padding:10px 14px;font-weight:800}.section-toggles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.section-toggles label{display:flex;align-items:center;gap:9px;padding:13px;border:1px solid #1a344c;border-radius:10px;background:#07111c;color:#9db1c3;font-size:10px}.section-toggles input{width:16px;height:16px;accent-color:var(--accent)}
@media(max-width:1100px){.commerce-hero{grid-template-columns:1fr;min-height:auto;padding:54px 44px}.commerce-hero-stage{height:390px}.commerce-benefits{grid-template-columns:repeat(2,1fr)}.commerce-benefits article:nth-child(2){border-right:0}.commerce-benefits article:nth-child(-n+2){border-bottom:1px solid #17293d}.products.premium-products,.products.flagship-products{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-story-v4{grid-template-columns:1fr}.story-visual{min-height:360px}.appearance-admin{grid-template-columns:1fr}.appearance-preview{position:relative;top:auto}.appearance-admin>section:last-child{grid-column:auto}}
@media(max-width:720px){.wrap{width:min(100% - 28px,1480px)}.topline-promise,.topline a{display:none}.topline-inner{justify-content:center}.header{min-height:67px}.brand-word small{display:none}.brand-word strong{font-size:11px}.nav,.desktop-favorite,.account-button{display:none}.commerce-hero{margin-top:10px;padding:34px 24px 26px;border-radius:20px;gap:12px}.commerce-hero-copy h1{font-size:44px;letter-spacing:-.055em;margin-top:18px}.commerce-hero-copy h2{font-size:18px}.commerce-hero-copy>p{font-size:11px;line-height:1.75}.commerce-hero .hero-buttons{display:grid;grid-template-columns:1fr;margin-top:22px}.commerce-hero .hero-buttons .button{width:100%;justify-content:center}.hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.commerce-hero-stage{height:300px}.stage-device{width:270px;height:190px;border-radius:17px}.stage-screen strong{font-size:70px}.floating-product{padding:8px 9px;font-size:6px}.fp-a{top:35px}.fp-b{bottom:47px}.fp-c{bottom:16px;right:16px}.commerce-benefits{grid-template-columns:1fr 1fr;border-radius:14px}.commerce-benefits article{padding:15px 13px;gap:9px}.commerce-benefits strong{font-size:9px}.commerce-benefits span{font-size:7px}.section{padding:44px 0}.products.premium-products,.products.flagship-products,.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-visual{height:150px}.product-content{padding:12px}.product-content h3{font-size:13px}.product-content>p{font-size:8px;min-height:26px}.product-meta{display:none}.product-bottom{padding-top:10px}.product-bottom .price{font-size:13px}.old-price,.discount-chip{font-size:7px}.product-card .favorite{width:28px;height:28px}.brand-story-v4{margin:48px 0;border-radius:18px}.story-visual{min-height:270px}.story-visual>span{font-size:100px}.story-copy{padding:32px 24px}.story-copy h2{font-size:34px}.story-copy>p{font-size:11px}.story-stats{grid-template-columns:1fr}.story-stats>div{border-right:0;border-bottom:1px solid #183047}.story-stats>div:last-child{border-bottom:0}.admin-shell{display:block;margin-top:10px;border-radius:16px}.admin-sidebar{border-right:0;border-bottom:1px solid #172b40;padding:12px;overflow:auto}.admin-nav{display:flex;gap:7px;min-width:max-content}.admin-nav a{padding:9px 10px}.admin-sidebar>.help,.admin-label{display:none}.admin-main{padding:18px 12px}.appearance-admin{display:block}.appearance-admin>.panel{margin-bottom:12px}.section-toggles{grid-template-columns:1fr}.mini-store-preview{min-height:260px;padding:22px}.mini-store-preview h3{font-size:28px}}
@media(max-width:430px){.products.premium-products,.products.flagship-products,.products{grid-template-columns:1fr 1fr}.product-visual{height:138px}.product-content h3{font-size:12px}.product-content>p{display:none}.product-overline{margin-bottom:7px}.product-category{font-size:7px}.product-stock{font-size:6px}.product-bottom{margin-top:8px}.commerce-hero-copy h1{font-size:39px}.commerce-benefits{grid-template-columns:1fr}.commerce-benefits article{border-right:0!important;border-bottom:1px solid #17293d}.commerce-benefits article:last-child{border-bottom:0}.product-detail{padding:16px}.page-header h1{font-size:34px}}
@media(prefers-reduced-motion:reduce){.product-card,.product-image,.button{transition:none!important}.product-card:hover{transform:none}.stage-device{transform:none}}

/* =========================================================
   TÊ SƠN VN V5 — PRO COMMERCE / SINGLE-ROW CATALOG
   One product per row, cleaner hierarchy, stronger mobile UX.
   ========================================================= */
:root{
  --pro-bg:#040b13;
  --pro-panel:#07121e;
  --pro-panel-2:#0a1827;
  --pro-line:#16304a;
  --pro-line-soft:#10263a;
  --pro-text:#f4f8fc;
  --pro-muted:#7f95aa;
  --pro-success:#71e0a1;
  --pro-shadow:0 24px 70px rgba(0,0,0,.28);
}
body{background:radial-gradient(circle at 72% -10%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 28rem),linear-gradient(180deg,#040a12 0%,#050d16 46%,#040a12 100%);color:var(--pro-text)}
body:before{opacity:.13;background-size:96px 96px}
.wrap{width:min(1420px,calc(100% - 64px))}
.header{position:sticky;top:0;z-index:90;background:rgba(4,11,19,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:#14283b;box-shadow:0 8px 35px rgba(0,0,0,.16)}
.topline{background:#06101a;border-bottom-color:#10243a}.topline-inner{min-height:34px}
.brand-mark{background:linear-gradient(145deg,var(--accent-soft),var(--accent));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 17%,transparent),inset 0 0 0 1px rgba(255,255,255,.24)}
.nav a{color:#8095a8}.nav a:hover,.nav a.active{color:#eef5fb}.nav a.active:after{background:var(--accent)}
.icon-btn:hover{background:#0b1a29;border-color:#1a3852}
.button{border-radius:10px;border-color:#1d3850;background:#0b1927}.button:hover{background:#10243a}.button.primary{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 18%,transparent)}.button.primary:hover{filter:brightness(1.07);background:var(--accent)}
.eyebrow{color:var(--accent-soft)}

/* Hero becomes calmer and more premium. */
.commerce-hero{min-height:610px;border-radius:24px;border-color:#17334d;padding:62px 62px;background:linear-gradient(108deg,rgba(4,11,19,.995),rgba(7,18,31,.965) 52%,rgba(5,14,24,.9));box-shadow:0 32px 80px rgba(0,0,0,.3)}
.commerce-hero-copy h1{font-size:clamp(54px,5vw,80px);letter-spacing:-.06em;max-width:760px}.commerce-hero-copy h2{color:var(--accent-soft)}.commerce-hero-copy>p{color:#8ea3b7;max-width:650px}
.hero-proof{border-top-color:#173149}.hero-proof .icon{color:var(--accent-soft)}
.commerce-hero-stage{height:500px}.stage-device{border-color:#2b5b83;background:linear-gradient(145deg,#10253c,#050c15);box-shadow:0 44px 90px rgba(0,0,0,.48),0 0 70px color-mix(in srgb,var(--accent) 8%,transparent)}
.stage-screen{border-color:#183851;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 28%),linear-gradient(145deg,#06111d,#081a2c)}
.commerce-benefits{border-color:#153049;background:#06111d;border-radius:16px;overflow:hidden}.commerce-benefits article{border-color:#153049}.commerce-benefits article .icon{color:var(--accent-soft)}

/* Catalog toolbar */
.page-header{padding-top:64px}.page-header h1{font-size:clamp(42px,4.4vw,64px);letter-spacing:-.055em}.page-header p{color:#7f96aa}
.shop-meta{padding:12px 0 18px;border-bottom:1px solid #132b40;color:#64809a;font-size:8px;letter-spacing:.13em}
.toolbar{position:sticky;top:88px;z-index:35;background:rgba(6,16,27,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #17334d;border-radius:14px;padding:10px;margin:18px 0 16px;box-shadow:0 14px 35px rgba(0,0,0,.18)}
.search-field,select,input,textarea{background:#050e18;border-color:#1a3851}.search-field{min-height:46px}.chip{border-color:#19354d;background:#07131f;color:#88a0b5;border-radius:999px}.chip:hover,.chip.active{background:color-mix(in srgb,var(--accent) 16%,#07131f);border-color:color-mix(in srgb,var(--accent) 58%,#19354d);color:#eaf5ff}

/* One product = one row. */
.products,.products.premium-products,.products.flagship-products{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
.product-card.product-row{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);min-height:220px;background:linear-gradient(135deg,#07131f,#081624 62%,#06101a);border:1px solid #163149;border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(0,0,0,.14);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.product-card.product-row:hover{transform:translateY(-2px);border-color:#2b587c;box-shadow:0 24px 54px rgba(0,0,0,.23)}
.product-card.product-row:before{display:none}
.product-card-media{min-width:0;height:100%;border-right:1px solid #173149}
.product-card.product-row .product-visual{height:100%;min-height:220px;border:0;border-radius:0;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 35%),linear-gradient(145deg,#071522,#050d16)}
.product-card.product-row .product-image{width:100%;height:100%;object-fit:cover}.product-card.product-row .product-art{width:118px;height:118px}
.product-card.product-row .product-content{padding:24px 24px 24px 27px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:30px;align-items:stretch}
.product-main-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.product-overline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 11px}.product-category{font-size:8px;letter-spacing:.14em;color:#718ca5}.product-stock{display:inline-flex;align-items:center;gap:6px;font-size:7px;letter-spacing:.12em;font-weight:850}.product-stock i{width:6px;height:6px;border-radius:50%;background:#74879a}.product-stock.in{color:var(--pro-success)}.product-stock.in i{background:var(--pro-success);box-shadow:0 0 10px rgba(113,224,161,.4)}.product-stock.out{color:#d78d8d}.product-stock.out i{background:#d78d8d}
.product-card.product-row h3{font-size:clamp(20px,2vw,27px);line-height:1.08;letter-spacing:-.035em;margin:0 0 10px}.product-card.product-row h3 a:hover{color:var(--accent-soft)}
.product-card.product-row .product-main-copy>p{font-size:11px;line-height:1.7;color:#7f96aa;min-height:0;max-width:650px}.product-card.product-row .product-meta{display:flex!important;gap:14px;flex-wrap:wrap;margin:18px 0 0;color:#658099;font-size:8px}.product-card.product-row .product-meta span{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:0}.product-card.product-row .product-meta .icon{width:12px;height:12px;color:#7595af}
.product-commerce{min-width:0;border-left:1px solid #153149;padding-left:26px;display:flex;flex-direction:column;justify-content:center;gap:19px}.price-label{display:block;font-size:7px;letter-spacing:.15em;color:#58748d;font-weight:800;margin-bottom:6px}.product-price-block .price{font-size:26px;letter-spacing:-.04em;line-height:1}.price-secondary{min-height:20px;margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.old-price{font-size:10px;color:#536a7e}.discount-chip{margin:0!important;padding:4px 7px!important;border-radius:7px!important;background:#0d2a21!important;color:#76e2a6!important;font-size:7px!important;letter-spacing:.05em}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.product-actions .button{min-height:42px;padding:9px 12px;font-size:9px}.product-view{background:#091827}.product-add .icon,.product-view .icon{width:14px;height:14px}
.product-card.product-row .favorite{top:12px;right:12px;background:rgba(4,11,18,.68);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.product-card.product-row .visual-version{font-size:7px;right:14px;bottom:13px}.product-card.product-row .badge{font-size:7px;letter-spacing:.11em}
.storefront-featured .section-head{margin-bottom:24px}.storefront-featured{padding-top:72px}

/* Product detail / cart / checkout polish */
.product-detail{border:1px solid #183650;border-radius:24px;background:linear-gradient(145deg,#071522,#06101a);padding:28px;box-shadow:var(--pro-shadow)}
.product-detail .product-visual{border-color:#17344e;background:#06111c}.detail-price{background:#071724;border-color:#1a3a55}.detail-copy h1{color:#f5f9fd}.detail-copy>p:not(.detail-tagline){color:#849bb0}.feature-item,.info-panel{border-color:#17334d;background:#07131f}.feature-item:hover{border-color:#275676}
.two-col,.payment-grid{gap:18px}.two-col>.panel:last-child,.payment-grid>.panel:last-child{position:sticky;top:114px;align-self:start}.panel{border-color:#18344d;background:linear-gradient(145deg,#07131f,#06111c);box-shadow:0 16px 42px rgba(0,0,0,.14)}
.cart-item{border-color:#173149}.summary-line{border-color:#173149}.summary-line.total{font-size:18px}
.account-tabs{padding:8px;background:#06111d;border:1px solid #173149;border-radius:14px;gap:7px}.account-tabs .chip{margin:0}.order-card,.ticket{border-color:#173149;background:#07131f}

/* Footer / brand story */
.brand-story-v4{border-color:#17344d;background:#06111d;box-shadow:var(--pro-shadow)}.story-copy{background:linear-gradient(145deg,#071420,#06101a)}.story-stats{border-color:#173149}.story-stats>div{border-color:#173149}.newsletter{border-color:#1a3953;background:radial-gradient(circle at 82% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 20rem),linear-gradient(135deg,#081827,#06111c)}
.footer{border-top-color:#173149}.footer h4{color:#617d95}.footer a{color:#8ba0b3}.footer a:hover{color:var(--accent-soft)}

/* Admin: denser, operational, professional. */
.admin-shell{border-color:#173149;background:#040c15;box-shadow:0 28px 70px rgba(0,0,0,.24)}.admin-sidebar{background:#06111d;border-color:#173149}.admin-nav a:hover,.admin-nav a.active{background:#0a1b2b;border-color:#214764}.admin-main{background:linear-gradient(180deg,#050d16,#040b13)}
.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stat{background:linear-gradient(145deg,#081725,#06111c);border-color:#18344d;box-shadow:none}.stat strong{font-size:24px}.stat small{color:#6e879d}.dashboard-chart{grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr)}
.table-wrap{border-color:#173149;background:#06111d}.table-wrap th{background:#081827}.table-wrap td{border-color:#142b40}.table-actions{flex-wrap:wrap}.appearance-preview{top:105px}

@media(max-width:1100px){
  .product-card.product-row{grid-template-columns:210px minmax(0,1fr)}
  .product-card.product-row .product-content{grid-template-columns:minmax(0,1fr) 205px;gap:22px;padding:21px}
  .product-commerce{padding-left:20px}.product-actions{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wrap{width:min(100% - 26px,1420px)}
  .header{top:0;min-height:66px}.toolbar{top:76px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .commerce-hero{padding:34px 23px 25px;border-radius:18px}.commerce-hero-copy h1{font-size:43px}.commerce-hero-stage{height:285px}
  .products,.products.premium-products,.products.flagship-products{gap:12px!important}
  .product-card.product-row{grid-template-columns:150px minmax(0,1fr);min-height:185px;border-radius:15px}
  .product-card.product-row .product-visual{min-height:185px}.product-card.product-row .product-art{width:82px;height:82px}
  .product-card.product-row .product-content{display:block;padding:16px 16px 15px}
  .product-main-copy{display:block}.product-card.product-row h3{font-size:17px;margin-bottom:6px}.product-card.product-row .product-main-copy>p{font-size:9px;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.product-card.product-row .product-meta{display:none!important}
  .product-commerce{border-left:0;border-top:1px solid #153149;padding:11px 0 0;margin-top:12px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}.price-label{display:none}.product-price-block .price{font-size:18px}.price-secondary{margin-top:5px}.product-actions{display:flex;gap:7px}.product-view{display:none}.product-actions .product-add{min-width:42px;width:42px;height:42px;padding:0;font-size:0}.product-actions .product-add .icon{width:16px;height:16px}
  .product-card.product-row .visual-version{display:none}.product-card.product-row .badge{top:10px;left:10px}.product-card.product-row .favorite{top:8px;right:8px;width:30px;height:30px}
  .two-col>.panel:last-child,.payment-grid>.panel:last-child{position:relative!important;top:auto!important}.stat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .page-header{padding-top:36px}.page-header h1{font-size:36px}.shop-meta{display:flex;gap:12px;justify-content:space-between;line-height:1.5}.shop-meta span:last-child{max-width:170px;text-align:right}
  .toolbar{top:67px;margin-top:12px}.filters{margin-bottom:16px}
  .product-card.product-row{grid-template-columns:1fr;min-height:0}
  .product-card-media{height:190px;border-right:0;border-bottom:1px solid #173149}
  .product-card.product-row .product-visual{height:190px;min-height:190px}.product-card.product-row .product-art{width:96px;height:96px}
  .product-card.product-row .product-content{padding:17px}.product-card.product-row h3{font-size:19px}.product-card.product-row .product-main-copy>p{display:block;font-size:10px;margin-bottom:0}.product-card.product-row .product-meta{display:flex!important;margin-top:12px;gap:9px}.product-card.product-row .product-meta span:nth-child(3){display:none}
  .product-commerce{grid-template-columns:1fr auto;margin-top:14px}.product-actions .product-add{width:auto;min-width:122px;font-size:9px;padding:0 13px}.product-actions .product-add .icon{width:14px}
  .price-secondary{min-height:18px}.stat-grid{grid-template-columns:1fr}.admin-main{padding:16px 10px}
}
@media(prefers-reduced-motion:reduce){.product-card.product-row:hover{transform:none}.product-card.product-row,.product-image{transition:none!important}}

/* ========================================================================== 
   TÊ SƠN VN V5.2 — WALLET + CARD GATEWAY
   ========================================================================== */
.topup-layout{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);gap:20px;align-items:start}.topup-form-panel{position:sticky;top:114px}.wallet-hero{position:relative;overflow:hidden;display:grid;gap:7px;padding:24px;margin:-4px -4px 24px;border:1px solid #214b6d;border-radius:14px;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 42%),linear-gradient(135deg,#0a2032,#07131f)}.wallet-hero:after{content:"TS";position:absolute;right:17px;bottom:-24px;font-size:92px;font-weight:950;letter-spacing:-.08em;color:#fff;opacity:.035}.wallet-hero span{font-size:8px;letter-spacing:.18em;color:#7fa5c5;font-weight:850}.wallet-hero strong{font-size:34px;letter-spacing:-.045em}.wallet-hero small{font-size:10px;color:#7f97ac;line-height:1.55}.card-history{display:grid;gap:10px}.card-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;padding:17px 18px;border:1px solid #17344d;border-radius:12px;background:#06121e}.card-history-row>div:first-child{display:grid;gap:6px}.card-history-row strong{font-size:13px}.card-history-row span{font-size:9px;color:#7189a0}.card-history-status{display:flex;align-items:center;gap:11px}.card-history-status>b{font-size:11px;color:#71e0a1}.card-history-row>p{grid-column:1/-1;padding-top:8px;border-top:1px solid #122d42;font-size:10px;color:#7890a6}.wallet-checkout{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0;padding:14px 15px;border:1px solid #1e4564;border-radius:11px;background:#071827}.wallet-checkout>div{display:grid;gap:5px}.wallet-checkout span{font-size:8px;letter-spacing:.1em;color:#6f8da8;text-transform:uppercase}.wallet-checkout strong{font-size:18px}.wallet-button{margin-top:9px;border-color:#24557a;background:#091b2a;color:#d9efff}.wallet-button:not(:disabled):hover{background:#0d263b;border-color:#3674a2}.wallet-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.wallet-chip{border-color:#255475!important;color:#c9e9ff!important}.wallet-chip .icon{width:14px;height:14px;color:var(--accent-soft)}.status-pill.success{background:#143527;color:#78e7aa}.status-pill.failed{background:#3c2329;color:#f2a6b2}.section-head.compact{margin-bottom:18px}.topup-form-panel .form-grid{grid-template-columns:1fr 1fr}.topup-form-panel select{width:100%}
@media(max-width:900px){.topup-layout{grid-template-columns:1fr!important}.topup-form-panel{position:relative!important;top:auto!important}.card-history-row{grid-template-columns:1fr auto}}
@media(max-width:520px){.topup-layout{gap:12px}.topup-form-panel .form-grid{grid-template-columns:1fr}.wallet-hero{padding:19px}.wallet-hero strong{font-size:29px}.card-history-row{grid-template-columns:1fr;padding:15px}.card-history-status{justify-content:space-between}.card-history-row>p{grid-column:1}.wallet-checkout{align-items:flex-start}.wallet-checkout .text-link{font-size:10px}.wallet-button{font-size:10px;padding-inline:12px}}

/* ========================================================================== 
   TÊ SƠN VN V6 — MOTION COMMERCE / REALTIME EXPERIENCE
   Refined 2026 interface: premium depth, restrained motion, instant feedback.
   ========================================================================== */
:root{
  --v6-bg:#040b12;
  --v6-surface:#071421;
  --v6-surface-2:#0a1b2b;
  --v6-line:rgba(130,186,232,.16);
  --v6-line-strong:rgba(130,186,232,.28);
  --v6-glow:color-mix(in srgb,var(--accent) 22%,transparent);
  --v6-shadow:0 26px 80px rgba(0,0,0,.32);
  --v6-ease:cubic-bezier(.22,1,.36,1);
  --v6-fast:cubic-bezier(.2,.8,.2,1);
}
body{
  background:
    radial-gradient(900px 540px at 78% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%),
    radial-gradient(720px 540px at -10% 38%,rgba(44,124,193,.075),transparent 70%),
    linear-gradient(180deg,#050d16 0%,#030912 55%,#040a11 100%);
}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.header{border-color:rgba(125,178,222,.13);box-shadow:0 12px 50px rgba(0,0,0,.12)}
.header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 35%,transparent),transparent);opacity:.5}
.button,.icon-btn,.chip,.product-card,.panel,.stat,.order-card,.ticket{will-change:transform}
.button{position:relative;overflow:hidden;transition:transform .22s var(--v6-fast),border-color .22s,background .22s,box-shadow .22s}
.button:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.15) 46%,transparent 67%);transform:translateX(-120%);transition:transform .55s var(--v6-ease)}
.button:hover:before{transform:translateX(120%)}
.button:hover{transform:translateY(-2px)}
.button.primary{box-shadow:0 10px 32px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 1px rgba(255,255,255,.35)}
.button.primary:active,.icon-btn:active{transform:scale(.975)}
.icon-btn{transition:transform .18s var(--v6-fast),background .18s,border-color .18s}

/* Route transitions: GPU-accelerated and guaranteed visible (no black screen hazard) */
.route-stage{opacity:1;transform:none;transition:opacity .25s var(--v6-ease),transform .25s var(--v6-ease);animation:v10-route-appear .28s var(--v6-ease) both}
.route-stage.route-ready{opacity:1;transform:none}
@keyframes v10-route-appear{from{opacity:.88;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation:none!important}

/* Home hero: professional kinetic atmosphere without expensive JS animation. */
.commerce-hero{isolation:isolate;overflow:hidden;border:1px solid var(--v6-line-strong);box-shadow:var(--v6-shadow),inset 0 1px rgba(255,255,255,.035)}
.commerce-hero:before{content:"";position:absolute;width:440px;height:440px;right:-110px;top:-190px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:0 0 100px color-mix(in srgb,var(--accent) 7%,transparent);animation:v6-orbit 14s ease-in-out infinite alternate;pointer-events:none}
.commerce-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.025) 49%,transparent 62%);transform:translateX(-40%);animation:v6-sheen 11s ease-in-out infinite}
.commerce-hero-copy>*{animation:v6-rise .64s var(--v6-ease) both}
.commerce-hero-copy>*:nth-child(2){animation-delay:.05s}.commerce-hero-copy>*:nth-child(3){animation-delay:.09s}.commerce-hero-copy>*:nth-child(4){animation-delay:.13s}.commerce-hero-copy>*:nth-child(5){animation-delay:.17s}.commerce-hero-copy>*:nth-child(6){animation-delay:.21s}
.commerce-hero-stage{animation:v6-stage-in .8s var(--v6-ease) .08s both}
.stage-device{animation:v6-float 5.8s ease-in-out infinite}
.floating-product{animation:v6-float-mini 4.8s ease-in-out infinite}.fp-b{animation-delay:-1.2s}.fp-c{animation-delay:-2.3s}
@keyframes v6-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes v6-stage-in{from{opacity:0;transform:translate3d(20px,12px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes v6-float{50%{transform:translateY(-7px) rotateX(1deg)}}
@keyframes v6-float-mini{50%{transform:translateY(-5px)}}
@keyframes v6-orbit{to{transform:translate(-16px,18px) scale(1.04)}}
@keyframes v6-sheen{0%,68%{transform:translateX(-55%)}86%,100%{transform:translateX(55%)}}

/* Storefront rows — one product per line, clear hierarchy, precise interactions. */
.product-card.product-row{border-color:var(--v6-line);background:linear-gradient(145deg,rgba(8,24,38,.96),rgba(5,15,25,.98));box-shadow:0 12px 38px rgba(0,0,0,.13);transition:transform .28s var(--v6-ease),border-color .28s,box-shadow .28s,background .28s}
.product-card.product-row:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.025) 49%,transparent 60%);opacity:0;transition:opacity .25s}
.product-card.product-row:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--v6-line));box-shadow:0 24px 64px rgba(0,0,0,.26),0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent)}
.product-card.product-row:hover:after{opacity:1}
.product-card.product-row .product-art{transition:transform .45s var(--v6-ease),filter .3s}
.product-card.product-row:hover .product-art{transform:translateY(-4px) scale(1.035);filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.product-stock.in i{animation:v6-status 2.4s ease-in-out infinite}
@keyframes v6-status{50%{box-shadow:0 0 0 5px rgba(113,224,161,0)}}

/* Panels & forms */
.panel{border-color:var(--v6-line);background:linear-gradient(145deg,rgba(8,22,35,.98),rgba(5,15,25,.98));box-shadow:0 18px 55px rgba(0,0,0,.12)}
input,select,textarea{border-color:rgba(120,173,216,.18);background:#05111d;transition:border-color .18s,box-shadow .18s,background .18s,transform .18s}
input:hover,select:hover,textarea:hover{border-color:rgba(120,173,216,.3)}
input:focus,select:focus,textarea:focus{background:#071624;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent)}
.form-row{position:relative}
.field-label{letter-spacing:.04em}

/* Auth v6: cinematic split modal + login/register transitions. */
.modal.wide:has(.auth-experience){width:min(980px,calc(100vw - 34px));max-width:980px;padding:0;overflow:hidden;border:1px solid rgba(116,180,232,.24);background:#050f19;box-shadow:0 44px 130px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025)}
.modal.wide:has(.auth-experience) .modal-close{position:absolute;top:18px;right:18px;z-index:8;background:rgba(5,14,23,.65);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.auth-experience{display:grid;grid-template-columns:.92fr 1.08fr;min-height:610px}
.auth-brand-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:37px;background:radial-gradient(circle at 70% 25%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 22rem),linear-gradient(155deg,#091e30,#06121e 65%,#07101a);border-right:1px solid rgba(124,177,221,.16)}
.auth-brand-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.auth-brand-panel:after{content:"TS";position:absolute;right:-24px;bottom:-42px;font-size:180px;line-height:1;font-weight:950;letter-spacing:-.12em;color:rgba(255,255,255,.035)}
.auth-orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.auth-orb-a{width:280px;height:280px;right:-90px;top:60px;animation:v6-auth-orbit 9s ease-in-out infinite alternate}
.auth-orb-b{width:150px;height:150px;left:-55px;bottom:80px;border-color:rgba(126,231,255,.18);animation:v6-auth-orbit 7s ease-in-out -2s infinite alternate-reverse}
@keyframes v6-auth-orbit{to{transform:translate(18px,-14px) scale(1.08)}}
.auth-brand-top,.auth-brand-copy,.auth-security-row{position:relative;z-index:2}
.auth-brand-top{display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:.16em;color:#82a0b9;font-weight:800}.auth-mini-mark{width:36px;height:36px;border:1px solid rgba(255,255,255,.13);border-radius:11px;display:grid;place-items:center;color:#eef8ff;font-size:13px;letter-spacing:-.08em;background:rgba(255,255,255,.025)}
.auth-brand-copy h3{font-size:clamp(35px,3.5vw,52px);line-height:.98;letter-spacing:-.055em;max-width:400px;margin:17px 0 19px}.auth-brand-copy p{font-size:11px;line-height:1.8;color:#8097aa;max-width:390px}.auth-security-row{display:flex;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:8px;color:#7892a7}.auth-security-row span{display:flex;align-items:center;gap:7px}.auth-security-row .icon{width:14px;color:var(--accent-soft)}
.auth-form-panel{position:relative;padding:54px 48px 42px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#071522,#050e18)}
.auth-mobile-brand{display:none}.auth-kicker{font-size:8px;letter-spacing:.2em;color:var(--accent-soft);font-weight:850;margin-bottom:14px}.auth-form-panel h2{font-size:35px;letter-spacing:-.045em;margin-bottom:9px}.auth-form-panel .modal-subtitle{font-size:11px;color:#7f94a7;margin-bottom:27px}.auth-form-panel .form-row{margin-bottom:15px}.auth-submit{min-height:50px;margin-top:5px}.auth-submit .icon{transition:transform .25s var(--v6-ease)}.auth-submit:hover .icon{transform:translateX(4px)}
.auth-success-layer{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transform:scale(.98);background:radial-gradient(circle at center,color-mix(in srgb,var(--accent) 12%,transparent),transparent 45%),rgba(5,14,23,.97);transition:opacity .3s var(--v6-ease),transform .3s var(--v6-ease),visibility .3s}.auth-success-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-soft));color:#04101a;box-shadow:0 18px 60px color-mix(in srgb,var(--accent) 24%,transparent);margin-bottom:22px}.auth-success-icon .icon{width:30px;height:30px;stroke-width:2.4}.auth-success-layer strong{font-size:22px}.auth-success-layer span{font-size:10px;color:#8199ad;margin-top:8px}
.modal.auth-processing .auth-submit span{opacity:.55}.modal.auth-processing .auth-submit:after{content:"";width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:v6-spin .7s linear infinite}.modal.auth-complete .auth-success-layer{opacity:1;visibility:visible;transform:none}.modal.auth-complete .auth-success-icon{animation:v6-success-pop .45s var(--v6-ease) both}
@keyframes v6-spin{to{transform:rotate(360deg)}}@keyframes v6-success-pop{from{transform:scale(.72) rotate(-7deg);opacity:0}to{transform:none;opacity:1}}

/* Wallet: instant realtime feedback. */
[data-wallet-balance]{font-variant-numeric:tabular-nums;transition:color .2s,text-shadow .2s,transform .2s}
.wallet-flash{animation:v6-wallet-flash 1.05s var(--v6-ease)}
@keyframes v6-wallet-flash{0%{transform:scale(1)}28%{transform:scale(1.055);color:#8ff0b5;text-shadow:0 0 22px rgba(113,224,161,.45)}100%{transform:scale(1);text-shadow:none}}
.wallet-hero{box-shadow:0 20px 65px rgba(0,0,0,.18);isolation:isolate}.wallet-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.055) 49%,transparent 66%);transform:translateX(-70%);animation:v6-wallet-scan 7s ease-in-out infinite}@keyframes v6-wallet-scan{0%,58%{transform:translateX(-75%)}82%,100%{transform:translateX(75%)}}
.card-history-row{transition:transform .22s var(--v6-ease),border-color .22s,background .22s}.card-history-row:hover{transform:translateY(-2px);border-color:rgba(86,161,216,.35);background:#081725}

/* Admin dashboard */
.admin-shell{border-color:rgba(112,173,220,.16);background:#030a12}.admin-sidebar{background:linear-gradient(180deg,#06111d,#040c15)}.admin-nav a{border:1px solid transparent;transition:background .18s,border-color .18s,color .18s,transform .18s}.admin-nav a:hover{transform:translateX(2px)}.admin-nav a.active{box-shadow:inset 3px 0 var(--accent)}
.stat{overflow:hidden;position:relative}.stat:after{content:"";position:absolute;width:110px;height:110px;right:-35px;top:-45px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);pointer-events:none}.stat:hover{transform:translateY(-2px);border-color:rgba(94,165,218,.27)}
.table-wrap{box-shadow:0 18px 55px rgba(0,0,0,.09)}

/* Toast feels like a system notification. */
#toast{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 70px rgba(0,0,0,.36)}

@media(max-width:760px){
  .commerce-hero:before{width:260px;height:260px;right:-110px;top:-100px}.commerce-hero:after{display:none}
  .modal.wide:has(.auth-experience){width:min(520px,calc(100vw - 22px));max-height:94dvh;overflow:auto;border-radius:22px}.auth-experience{grid-template-columns:1fr;min-height:0}.auth-brand-panel{display:none}.auth-form-panel{padding:48px 25px 28px}.auth-mobile-brand{display:block;margin-bottom:28px}.auth-form-panel h2{font-size:30px}.auth-form-panel .modal-subtitle{margin-bottom:22px}.modal.wide:has(.auth-experience) .modal-close{top:12px;right:12px}
  .product-card.product-row:hover{transform:none}.admin-nav a:hover{transform:none}
}
@media(max-width:520px){
  .route-stage{transform:translate3d(0,7px,0)}
  .auth-form-panel{padding:42px 20px 24px}.auth-success-icon{width:64px;height:64px}.auth-success-layer strong{font-size:20px}
  .button:before{display:none}.commerce-hero-copy>*{animation-duration:.45s}.floating-product{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .route-stage{opacity:1;transform:none}.commerce-hero-copy>*,.commerce-hero-stage,.stage-device,.floating-product,.commerce-hero:before,.commerce-hero:after,.auth-orb,.wallet-hero:before,.product-stock.in i{animation:none!important}.auth-success-layer{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* =========================================================
   TÊ SƠN VN — V8 NATIONAL RETAIL SYSTEM
   Final visual layer: premium commerce + operations console
   ========================================================= */
:root{
  --bg:#050b12;
  --panel:#08131f;
  --panel2:#0b1826;
  --line:#183047;
  --muted:#8296a9;
  --text:#f5f9fc;
  --lime:var(--accent,#36a7ff);
  --v8-cyan:#78ddff;
  --v8-success:#63dfa0;
  --v8-danger:#ff7384;
  --v8-radius:22px;
  --v8-ease:cubic-bezier(.22,1,.36,1);
}
html{background:#040910}
body{background:radial-gradient(circle at 72% -12%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 30rem),radial-gradient(circle at -5% 35%,rgba(36,89,135,.12),transparent 34rem),linear-gradient(180deg,#050b12 0%,#06101a 45%,#040a11 100%)}
body:before{opacity:.13;background-size:64px 64px}
.wrap{width:min(1380px,calc(100% - 64px))}
.topline{background:#06101a;border-bottom:1px solid #132639;color:#86a1b8}.topline-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.topline-status{display:flex;align-items:center;gap:9px}.topline-status i{width:7px;height:7px;border-radius:50%;background:var(--v8-success);box-shadow:0 0 0 5px rgba(99,223,160,.08)}.topline-promise{display:flex;align-items:center;gap:10px;color:#8da4b8!important}.topline-promise .icon{width:13px;height:13px;color:var(--accent)}.topline-promise i{width:1px;height:10px;background:#284259}
.header{height:82px;background:rgba(4,10,17,.84);border-bottom:1px solid rgba(92,142,181,.17);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.brand-mark{background:linear-gradient(145deg,#0e2234,#07121e);border:1px solid #28455f;color:var(--v8-cyan);box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.24)}.brand-mark b{background:linear-gradient(145deg,var(--accent),var(--v8-cyan));color:#03101a}.brand-word strong{font-weight:850}.brand-word small{color:#5f7890}
.nav a{font-weight:650}.nav a.active:after{background:linear-gradient(90deg,var(--accent),var(--v8-cyan));box-shadow:0 0 16px color-mix(in srgb,var(--accent) 35%,transparent)}
.button{border-radius:13px;background:#0c1a27;border-color:#1d3650;transition:transform .22s var(--v8-ease),background .22s,border-color .22s,box-shadow .22s}.button:hover{background:#102235;border-color:#31546f}.button.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#8de8ff));border-color:color-mix(in srgb,var(--accent) 80%,#fff);color:#03111d;box-shadow:0 12px 38px color-mix(in srgb,var(--accent) 17%,transparent)}.button.primary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--v8-cyan));box-shadow:0 18px 50px color-mix(in srgb,var(--accent) 24%,transparent)}

/* Storefront */
.commerce-hero{min-height:650px;border:1px solid #16314a;border-radius:30px;overflow:hidden;margin-top:34px;background:linear-gradient(118deg,#071522 0%,#07111b 53%,#081727 100%);box-shadow:0 32px 100px rgba(0,0,0,.26)}
.commerce-hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-80px;top:-180px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 17%,transparent),transparent 67%);filter:blur(2px);pointer-events:none}.commerce-hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(111,174,221,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(111,174,221,.035) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(90deg,transparent 3%,#000 58%,transparent 100%);pointer-events:none}
.commerce-hero-copy{position:relative;z-index:3}.commerce-hero-copy h1{font-size:clamp(52px,5.6vw,88px);line-height:.96;letter-spacing:-.065em}.commerce-hero-copy h2{font-size:clamp(21px,2.2vw,34px);letter-spacing:-.035em;color:var(--v8-cyan)}.commerce-hero-copy p{max-width:610px;font-size:14px;color:#8ea3b6}.hero-proof{border-top:1px solid rgba(112,171,215,.14);padding-top:22px}.hero-proof span{color:#8ba2b5}.hero-proof .icon{color:var(--accent)}
.stage-device{border-color:#264866;background:linear-gradient(160deg,#0c2133,#06121d);box-shadow:0 34px 100px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.03)}.stage-screen{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 45%),linear-gradient(145deg,#061524,#030b13)}.stage-screen strong{background:linear-gradient(135deg,#fff,var(--v8-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.floating-product{background:rgba(7,21,33,.8);border-color:#24415b;backdrop-filter:blur(18px);box-shadow:0 16px 45px rgba(0,0,0,.3)}
.commerce-benefits{border:1px solid #153048;border-radius:22px;background:rgba(7,18,29,.76);overflow:hidden}.commerce-benefits article{border-color:#153048}.commerce-benefits .icon{color:var(--accent)}
.section-head h2,.page-header h1{letter-spacing:-.052em}.section-head p,.page-header p{color:#8095a7}
.category-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;overflow:visible}.category-chip{min-height:74px;border-radius:16px!important;padding:15px 16px!important;display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;background:linear-gradient(145deg,#081522,#07111c)!important;border:1px solid #173149!important;color:#8fa4b5!important}.category-chip:hover{transform:translateY(-2px);border-color:#2b5574!important;color:#eaf7ff!important}.category-chip.active{border-color:color-mix(in srgb,var(--accent) 62%,#173149)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 9%,#081522),#07111c)!important;color:#fff!important}.category-index{font:800 9px/1 var(--font);color:var(--accent);letter-spacing:.08em}.category-chip b{font-size:10px;color:#60798e;background:#0b1d2c;border:1px solid #1c3a55;border-radius:99px;padding:5px 8px}.catalog-empty-inline{display:flex;align-items:center;gap:16px;border:1px dashed #28465f;border-radius:18px;padding:22px;background:#07131f;color:#8ca0b1}.catalog-empty-inline .icon{width:26px;height:26px;color:var(--accent)}.catalog-empty-inline strong{display:block;color:#eaf5fc;font-size:13px}.catalog-empty-inline span{display:block;font-size:10px;margin-top:5px}
.toolbar{position:sticky;top:94px;z-index:35;background:rgba(5,11,18,.85);backdrop-filter:blur(18px);padding:12px;border:1px solid #173149;border-radius:17px}.search-field{background:#07131f;border-color:#18344e}.shop-meta{color:#607d95;border-color:#162e44}
.product-card.product-row{grid-template-columns:minmax(250px,30%) 1fr;background:linear-gradient(145deg,#081521,#06101a);border:1px solid #173149;border-radius:24px;min-height:285px}.product-card.product-row:hover{border-color:#2e5a7b;box-shadow:0 28px 80px rgba(0,0,0,.31)}.product-card-media{border-right:1px solid #173149}.product-visual{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,currentColor 18%,transparent),transparent 56%),linear-gradient(145deg,#0a1b2a,#06111c)}.product-content{padding:30px 34px}.product-content h3{font-size:clamp(25px,2.2vw,34px)}.product-content p{color:#8499aa}.product-category{color:#87a5bc}.product-stock.in{color:var(--v8-success)}.product-meta span{background:#07131f;border:1px solid #17344d;border-radius:10px}.price{letter-spacing:-.045em}.discount-chip{background:rgba(99,223,160,.1);border:1px solid rgba(99,223,160,.24);color:var(--v8-success)}
.product-detail{border-radius:28px;background:linear-gradient(145deg,#081725,#06101a);border:1px solid #193650;box-shadow:0 30px 90px rgba(0,0,0,.24)}.detail-copy h1{font-size:clamp(42px,4vw,64px)}.info-panel,.feature-item{border:1px solid #17344c;background:#07131f}.detail-note{border-color:#19364f}.stock-text .dot{background:var(--v8-success)}

/* Checkout */
.live-payment-grid{align-items:start}.bank-qr-panel{position:relative;overflow:hidden}.bank-qr-panel:before{content:"";position:absolute;inset:auto -120px -160px auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 15%,transparent),transparent 68%);pointer-events:none}.qr-wrap{background:#fff;border-radius:22px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.28)}.payment-state{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;background:#061825;border:1px solid #1c3a55;border-radius:99px;color:#91a9bd}.payment-state .icon{width:15px;color:var(--accent)}.payment-summary-panel{position:sticky;top:112px}.total-row{margin-top:10px;padding-top:20px;border-top:1px solid #1a354d}.bank-detail-card{margin-top:20px;border:1px solid #1a3852;border-radius:16px;overflow:hidden}.bank-detail-card>div{display:flex;justify-content:space-between;gap:20px;padding:13px 15px;border-bottom:1px solid #132c41;font-size:11px}.bank-detail-card>div:last-child{border-bottom:0}.bank-detail-card span{color:#748da1}.order-code{color:var(--v8-cyan);letter-spacing:.04em}.payment-success-panel{padding:70px 30px}.payment-success-panel h2{font-size:38px;margin-top:12px}

/* Authentication polish */
.modal.wide:has(.auth-experience){border-color:#214766}.auth-brand-panel{background:radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 22rem),linear-gradient(155deg,#0a2033,#06131f 68%,#050f19)}.auth-form-panel{background:linear-gradient(160deg,#081725,#050e18)}.auth-form-panel input{min-height:49px}.auth-submit{min-height:54px}.auth-success-icon{background:linear-gradient(135deg,var(--accent),var(--v8-cyan))}

/* Operations Control Center */
.admin-view .header{position:sticky}.admin-shell{grid-template-columns:260px minmax(0,1fr);border:1px solid #132b40;border-radius:24px;overflow:hidden;margin-top:30px;background:#040b12;box-shadow:0 30px 100px rgba(0,0,0,.2)}.admin-sidebar{padding:26px 18px;background:linear-gradient(180deg,#071522,#050e17);border-right:1px solid #153049}.admin-label{padding:10px 12px 18px;color:#5f7d95;font-size:9px;letter-spacing:.18em}.admin-nav a{min-height:44px;border-radius:11px;padding:11px 12px}.admin-nav a.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),rgba(8,25,39,.3));border-color:#1d4665;color:#eaf7ff;box-shadow:inset 3px 0 var(--accent)}.admin-nav a .icon{color:#6e8da5}.admin-nav a.active .icon{color:var(--accent)}.admin-main{padding:34px;min-width:0}.admin-heading{padding-bottom:24px;border-bottom:1px solid #132d43}.admin-heading h1{font-size:34px}.admin-heading p{color:#748da1}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.stat{border-radius:16px;background:linear-gradient(145deg,#081623,#06111b);border:1px solid #16324a;min-height:128px}.stat strong{font-size:27px}.stat small{color:#637f96}.dashboard-chart{gap:16px}.chart-bar{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 38%,#07121d));box-shadow:0 0 20px color-mix(in srgb,var(--accent) 10%,transparent)}.table-wrap{border-color:#17324a;border-radius:17px;background:#07121d}.table-wrap th{background:#091826;color:#6f8ba2;border-color:#17324a;position:sticky;top:0;z-index:2}.table-wrap td{border-color:#132b40}.table-wrap tr:hover td{background:rgba(16,38,57,.34)}.admin-product-name .mini-art{border:1px solid #1c3b56;background:#071420}.admin-system-bar{position:fixed;right:18px;bottom:18px;z-index:65;display:flex;align-items:center;gap:14px;padding:9px 12px;border:1px solid #1a3a55;border-radius:99px;background:rgba(5,15,24,.86);backdrop-filter:blur(16px);box-shadow:0 18px 60px rgba(0,0,0,.32);font-size:9px;color:#718da4}.admin-system-bar span{display:flex;align-items:center;gap:7px;color:#8acfab;font-weight:800}.admin-system-bar i{width:7px;height:7px;border-radius:50%;background:var(--v8-success);box-shadow:0 0 12px rgba(99,223,160,.5)}.admin-system-bar b{font-weight:650;color:#a5b8c8}.status-pill{border:1px solid #254157;background:#0a1a27}.status-pill.paid{color:var(--v8-success);border-color:rgba(99,223,160,.25);background:rgba(99,223,160,.06)}.status-pill.cancelled{color:#ff8d9a;border-color:rgba(255,115,132,.24);background:rgba(255,115,132,.05)}

/* Footer */
.newsletter{border-radius:28px;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 25rem),linear-gradient(120deg,#081827,#06111b);border-color:#183650}.newsletter h2 span{color:var(--v8-cyan)}.footer{border-color:#163149}.footer h4{color:#7892a8}.footer-seal{border-color:#1b3851;color:#58738a}.footer-bottom{border-color:#132d43}

@media(max-width:1050px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-shell{grid-template-columns:220px minmax(0,1fr)}.admin-main{padding:26px}.product-card.product-row{grid-template-columns:260px 1fr}}
@media(max-width:760px){
  .wrap{width:calc(100% - 28px)}.topline-promise{display:none}.topline-inner{justify-content:center}.header{height:76px}.brand-word small{display:none}.brand-mark{width:44px;height:44px}.commerce-hero{margin-top:18px;min-height:0;border-radius:23px}.commerce-hero-copy h1{font-size:47px}.commerce-hero-copy h2{font-size:22px}.commerce-benefits{grid-template-columns:1fr 1fr}.category-filters{display:flex;overflow:auto;scroll-snap-type:x mandatory}.category-chip{min-width:190px;scroll-snap-align:start}.toolbar{top:84px}.product-card.product-row{grid-template-columns:1fr;min-height:0;border-radius:21px}.product-card-media{border-right:0;border-bottom:1px solid #173149}.product-card.product-row .product-visual{height:250px}.product-content{padding:23px}.product-content h3{font-size:27px}.product-commerce{border-top:1px solid #163149;padding-top:20px}.payment-summary-panel{position:static}.admin-shell{display:block;border-radius:19px;margin-top:18px}.admin-sidebar{border-right:0;border-bottom:1px solid #153049;padding:14px}.admin-label{display:none}.admin-nav{display:flex;overflow:auto;flex-direction:row;gap:8px}.admin-nav a{white-space:nowrap;min-height:40px}.admin-nav a.active{box-shadow:none;border-color:#275876}.admin-main{padding:20px 14px 32px}.admin-heading{align-items:flex-start}.admin-heading h1{font-size:28px}.stat-grid{grid-template-columns:1fr 1fr}.admin-system-bar{left:50%;right:auto;bottom:82px;transform:translateX(-50%);max-width:calc(100% - 24px);white-space:nowrap}.table-wrap{border-radius:14px}.modal.wide:has(.auth-experience){border-radius:22px}}
@media(max-width:520px){.commerce-benefits{grid-template-columns:1fr}.commerce-hero-copy h1{font-size:42px}.commerce-hero-copy p{font-size:12px}.hero-buttons{display:grid;grid-template-columns:1fr}.hero-buttons .button{width:100%}.product-card.product-row .product-visual{height:220px}.product-actions{display:grid;grid-template-columns:1fr 1fr}.product-actions .button{width:100%;padding-inline:10px}.stat-grid{grid-template-columns:1fr}.admin-heading{display:block}.admin-heading .button{margin-top:14px}.bank-detail-card>div{display:block}.bank-detail-card b{display:flex;margin-top:7px;align-items:center;justify-content:space-between}.payment-success-panel h2{font-size:30px}.category-chip{min-width:175px}.admin-system-bar b{display:none}}
@media(prefers-reduced-motion:reduce){.product-card.product-row:hover,.category-chip:hover{transform:none}.stage-device,.floating-product{animation:none!important}}

/* ============================================================
   TÊ SƠN VN v8.1 — PRODUCT COMMERCE REFINEMENT
   Product cards now read left-to-right: visual → product story →
   price & decisive Buy Now action anchored to the far right.
   ============================================================ */
.product-card.product-row{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:292px;
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 100%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 28rem),
    linear-gradient(145deg,#081622 0%,#06111b 100%);
}
.product-card.product-row:before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.012) 30% 31%,transparent 31%);
}
.product-card.product-row .product-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:31px 34px 29px;
}
.product-card.product-row .product-main-copy{
  display:block;
  min-width:0;
  max-width:780px;
}
.product-card.product-row .product-overline{margin-bottom:13px}
.product-card.product-row h3{
  max-width:760px;
  font-size:clamp(26px,2.35vw,36px);
  line-height:1.02;
  margin-bottom:11px;
}
.product-card.product-row .product-main-copy>p{
  max-width:720px;
  font-size:12px;
  line-height:1.72;
  color:#8499aa;
}
.product-card.product-row .product-meta{margin-top:18px!important}
.product-card.product-row .product-meta span{
  min-height:28px;
  padding:6px 9px!important;
  border:1px solid #17344d!important;
  border-radius:9px!important;
  background:#07131f!important;
}
.product-card.product-row .product-commerce{
  margin-top:auto;
  padding:22px 0 0;
  border-left:0;
  border-top:1px solid #173149;
  display:grid;
  grid-template-columns:minmax(170px,1fr) auto;
  grid-template-areas:
    "price actions"
    "note actions";
  column-gap:30px;
  row-gap:9px;
  align-items:end;
}
.product-card.product-row .product-price-block{grid-area:price;min-width:0}
.product-card.product-row .price-label{
  margin-bottom:7px;
  font-size:8px;
  letter-spacing:.16em;
  color:#617f97;
}
.product-card.product-row .product-price-block .price{
  font-size:clamp(28px,2.15vw,35px);
  line-height:.95;
  color:#f5f9fd;
}
.product-card.product-row .price-secondary{
  min-height:22px;
  margin-top:10px;
  gap:9px;
}
.product-card.product-row .old-price{font-size:12px;color:#536a7e}
.product-card.product-row .discount-chip{
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:8px!important;
  letter-spacing:.08em;
}
.product-card.product-row .product-actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  align-self:center;
  margin-left:auto;
}
.product-detail-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:0 3px;
  color:#7894aa;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:color .2s ease,transform .2s ease;
}
.product-detail-link .icon{width:14px;height:14px}
.product-detail-link:hover{color:#dcecf8;transform:translateX(2px)}
.product-buy-now{
  min-width:190px;
  min-height:56px;
  padding:0 22px;
  border-radius:15px;
  font-size:13px;
  font-weight:900;
  letter-spacing:-.01em;
  white-space:nowrap;
  justify-content:center;
}
.product-buy-now .icon{width:17px;height:17px}
.product-delivery-note{
  grid-area:note;
  display:flex;
  align-items:center;
  gap:7px;
  color:#607d93;
  font-size:9px;
  line-height:1.35;
}
.product-delivery-note .icon{width:13px;height:13px;color:var(--v8-success)}
.product-card.product-row:hover .product-buy-now{box-shadow:0 18px 46px color-mix(in srgb,var(--accent) 24%,transparent)}

/* Product detail purchase block: price left, decisive action right. */
.detail-purchase-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:22px;
  border:1px solid #1b3b56;
  border-radius:19px;
  background:linear-gradient(135deg,rgba(10,29,44,.9),rgba(7,19,31,.96));
}
.detail-purchase-panel .detail-price-copy{min-width:0}
.detail-purchase-panel .price{font-size:clamp(32px,3vw,44px)}
.detail-purchase-panel .term{margin-top:8px}
.detail-purchase-panel .stock-text{margin-top:12px}
.detail-buy-now{
  min-width:210px;
  min-height:58px;
  padding-inline:24px;
  border-radius:16px;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.detail-buy-now .icon{width:18px;height:18px}

@media(max-width:1050px){
  .product-card.product-row .product-content{padding:27px 27px 25px}
  .product-card.product-row .product-commerce{column-gap:22px}
  .product-buy-now{min-width:170px}
}
@media(max-width:760px){
  .product-card.product-row .product-content{padding:22px 21px 20px}
  .product-card.product-row .product-main-copy>p{font-size:11px}
  .product-card.product-row .product-commerce{
    margin-top:20px;
    padding-top:18px;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:18px;
  }
  .product-card.product-row .product-price-block .price{font-size:29px}
  .product-card.product-row .product-actions{gap:10px}
  .product-detail-link{display:none}
  .product-buy-now{min-width:168px;min-height:52px;padding:0 19px}
  .detail-purchase-panel{grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .detail-buy-now{width:100%;min-width:0}
  .product-detail{padding-bottom:70px}
}
@media(max-width:520px){
  .product-card.product-row{border-radius:22px}
  .product-card.product-row .product-content{padding:19px 18px 18px}
  .product-card.product-row h3{font-size:22px}
  .product-card.product-row .product-main-copy>p{font-size:10px;line-height:1.55}
  .product-card.product-row .product-meta{gap:7px!important;margin-top:13px!important}
  .product-card.product-row .product-meta span{font-size:7px;padding:5px 7px!important}
  .product-card.product-row .product-commerce{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"price actions" "note note";
    gap:12px 14px;
    align-items:center;
  }
  .product-card.product-row .product-price-block .price{font-size:26px}
  .product-card.product-row .old-price{font-size:10px}
  .product-buy-now{min-width:146px;min-height:50px;padding:0 16px;font-size:11px}
  .product-buy-now .icon:last-child{display:none}
  .product-delivery-note{font-size:8px;margin-top:1px}
}
@media(max-width:380px){
  .product-buy-now{min-width:132px;padding-inline:13px}
  .product-card.product-row .product-price-block .price{font-size:23px}
  .product-card.product-row .discount-chip{font-size:7px!important;padding:4px 7px!important}
}


/* v8.2 Wallet funding chooser + bank top-up flow */
.nav-fund-button,.footer-action-link{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.nav-fund-button{padding:8px 0;color:#8195a8;font-size:10px;font-weight:760;letter-spacing:.03em}.nav-fund-button:hover,.nav-fund-button.active{color:#eaf6ff}.footer-action-link{display:block;padding:0;margin:9px 0;color:#6f879d;text-align:left;font-size:10px}.footer-action-link:hover{color:#dff4ff}
.funding-picker{padding:4px}.funding-picker-head{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}.funding-mark{display:grid;place-items:center;width:52px;height:52px;border:1px solid #245276;border-radius:16px;background:linear-gradient(145deg,#0c2940,#071523);color:var(--accent-soft);box-shadow:inset 0 1px rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.24)}.funding-mark .icon{width:25px;height:25px}.funding-picker h2{font-size:30px;letter-spacing:-.045em;margin:4px 0 7px}.funding-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.funding-option{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;min-height:116px;padding:19px;border:1px solid #1c405e;border-radius:17px;background:linear-gradient(145deg,#091a28,#06111b);color:#eaf5ff;text-decoration:none;overflow:hidden;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}.funding-option:before{content:"";position:absolute;inset:auto -30px -55px auto;width:130px;height:130px;border-radius:50%;background:var(--accent);filter:blur(48px);opacity:.08;pointer-events:none}.funding-option:not(.disabled):hover{transform:translateY(-3px);border-color:#3779a9;background:linear-gradient(145deg,#0b2133,#071520);box-shadow:0 20px 50px rgba(0,0,0,.28)}.funding-option-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid #28587d;border-radius:14px;background:#0a2031;color:var(--accent-soft)}.funding-option-icon .icon{width:24px;height:24px}.funding-option-copy{display:grid;gap:7px}.funding-option-copy b{font-size:14px}.funding-option-copy small{color:#7891a7;font-size:9px;line-height:1.55}.funding-option-arrow{color:#8edcff}.funding-option-arrow .icon{width:20px;height:20px}.funding-option.disabled{opacity:.5;cursor:not-allowed}.funding-option-status{font-size:7px;letter-spacing:.12em;color:#8195a8}.funding-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;padding-top:17px;border-top:1px solid #173149;color:#7791a8;font-size:8px}.funding-trust span{display:flex;align-items:center;gap:7px}.funding-trust .icon{width:14px;height:14px;color:#71dff7}
.quick-amounts{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 18px}.quick-amounts button{border:1px solid #214967;border-radius:999px;padding:8px 11px;background:#071827;color:#a9c0d3;font-size:9px;font-weight:800;cursor:pointer;transition:.2s ease}.quick-amounts button:hover{border-color:var(--accent);color:#fff;background:#0c2639}.bank-topup-checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);gap:20px;align-items:start}.bank-topup-amount{margin:18px 0 4px;font-size:34px;font-weight:920;letter-spacing:-.05em}.topup-result{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:10px 13px;border-radius:999px;border:1px solid #285371;background:#081a28;color:#a9c2d6;font-size:10px}.topup-result.success{border-color:#2d7550;background:#0b2a1e;color:#75e5a6}.wallet-topup-live{display:flex;justify-content:space-between;align-items:center;margin:18px 0;padding:15px 16px;border:1px solid #1d4361;border-radius:12px;background:#071827}.wallet-topup-live span{font-size:9px;color:#7892aa}.wallet-topup-live strong{font-size:20px}.bank-history-row{color:inherit;text-decoration:none}.bank-history-row:hover{border-color:#285b80;background:#081827}
@media(max-width:760px){.funding-options{grid-template-columns:1fr}.funding-picker-head{grid-template-columns:1fr}.funding-mark{width:46px;height:46px}.funding-picker h2{font-size:27px}.funding-option{min-height:104px;padding:16px}.bank-topup-checkout{grid-template-columns:1fr}.bank-topup-amount{font-size:30px}}
@media(max-width:520px){.funding-option{grid-template-columns:auto 1fr}.funding-option-arrow,.funding-option-status{display:none}.funding-trust{display:grid;grid-template-columns:1fr}.quick-amounts{display:grid;grid-template-columns:1fr 1fr}.quick-amounts button{width:100%}}

@keyframes pulse-badge { 0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(29,122,242,0.4)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(29,122,242,1)); } 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(29,122,242,0.4)); } } .badge-pulse { animation: pulse-badge 1.5s infinite ease-in-out; }


.apple-entry{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:26px 0;padding:32px;border:1px solid #7b6ef04a;border-radius:24px;background:linear-gradient(120deg,#171338,#0d1729)}.apple-entry span{color:#aba0ff;font-size:11px;letter-spacing:2px}.apple-entry h2{font-size:25px;margin:8px 0}.apple-entry p{color:#abb8cc;max-width:660px;margin:0}.apple-entry a{flex-shrink:0}@media(max-width:700px){.apple-entry{align-items:flex-start;flex-direction:column;padding:24px}.apple-entry h2{font-size:22px}}

.mobile-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .mobile-menu-grid a, .mobile-menu-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px 8px; color: #fff; font-size: 12px; text-align: center; font-weight: 500; cursor: pointer; text-decoration: none; transition: 0.2s; } .mobile-menu-grid a:hover, .mobile-menu-grid button:hover { background: rgba(255,255,255,0.1); } .mobile-menu-grid svg { width: 24px; height: 24px; color: var(--accent, #2f9cff); opacity: 0.9; }


@media(max-width: 900px) { .header-actions button[data-action='register'], .header-actions button[data-action='login'] { display: inline-flex !important; } }
.hero-stage-img { cursor: pointer; transition: transform 0.25s ease, filter 0.25s ease; }
.hero-stage-img:hover { transform: scale(1.02); filter: brightness(1.06); }
.stage-screen[data-action="fund"]:hover { box-shadow: 0 0 25px rgba(47, 156, 255, 0.35); }
.image-manager-panel button[data-action="pick-image"]:hover { opacity: 0.92; transform: translateY(-1px); }

/* Hero Top-up Portal Widget (2 payment buttons: Bank Transfer & Scratch Card) */
.hero-topup-portal {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: portal-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes portal-fade-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.portal-combined-container {
  position: relative;
  width: 100%;
  border-radius: 24px;
  padding: 16px 18px 18px;
  background: radial-gradient(130% 100% at 50% 0%, #0d1e33 0%, #060c16 100%);
  border: 1.5px solid #1e3a5a;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(220, 38, 38, 0.15), 0 0 40px rgba(47, 156, 255, 0.15);
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.portal-combined-container:hover {
  transform: translateY(-2px);
  border-color: #2e5984;
  box-shadow: 0 36px 85px rgba(0, 0, 0, 0.72), 0 0 70px rgba(220, 38, 38, 0.25), 0 0 45px rgba(47, 156, 255, 0.2);
}
.portal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-left: 2px;
}
.portal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 14px #10b981;
  animation: pulse-badge 1.8s infinite ease-in-out;
}
.portal-title {
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.portal-banners-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.portal-banner-link {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  contain: paint layout;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.portal-banner-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.25s ease, filter 0.25s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.portal-banner-video {
  pointer-events: none;
  background: #060c16;
  border: 0;
  outline: none;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  object-fit: cover;
}
.portal-banner-link:hover {
  border-color: #ffd700;
  box-shadow: 0 0 0 2.5px #ffd700, 0 14px 36px rgba(255, 215, 0, 0.45);
  transform: translateY(-2px) scale(1.012);
}
.portal-banner-link:hover .portal-banner-img {
  filter: brightness(1.06);
}
.portal-banner-link:active {
  transform: scale(0.985);
}
.portal-banner-link .portal-hotspot-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  background: rgba(6, 14, 25, 0.94);
  color: #ffd700;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.65);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
}
.portal-banner-link:hover .portal-hotspot-badge {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 1101px) {
  .commerce-hero {
    gap: 38px;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    padding: 54px 48px;
  }
}
@media (max-width: 1100px) {
  .hero-topup-portal {
    max-width: 520px;
    margin: 32px auto 0;
  }
}
@media (max-width: 520px) {
  .hero-topup-portal {
    max-width: 100%;
    margin: 20px auto 0;
  }
  .portal-hotspot-badge {
    font-size: 10px;
    padding: 4px 10px;
    top: 8px;
    right: 10px;
  }
}

/* ============================================================
   💎 TESONVN v10.0 — MIDNIGHT SAPPHIRE FLAGSHIP DESIGN SUITE
   Ultra-Premium Digital Commerce Experience
   ============================================================ */

:root {
  /* Midnight Sapphire Master Palette */
  --bg: #060a14;
  --bg-deep: #03060c;
  --panel: #0d1629;
  --panel-glass: rgba(13, 22, 41, 0.78);
  --panel2: #121f38;
  --panel-card: #0b1426;
  --panel-card-hover: #111e38;
  --line: rgba(56, 114, 180, 0.22);
  --line-strong: rgba(94, 181, 255, 0.38);
  --muted: #8ca3c2;
  --muted-dark: #586f8c;
  --text: #f0f4fc;
  --text-pure: #ffffff;
  
  /* Sapphire & Cyber Highlights */
  --accent: #2f9cff;
  --accent-cyan: #5eb5ff;
  --accent-soft: #a8f0ff;
  --accent-glow: rgba(47, 156, 255, 0.38);
  --cyber-blue: #00d2ff;
  --gold: #ffdb4d;
  --gold-glow: rgba(255, 219, 77, 0.35);
  --success: #4ade80;
  --danger: #f87171;
  --lime: #5eb5ff; /* Seamless backward-compat */

  /* Master Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Global Shadows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 42px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.58);
  --shadow-sapphire: 0 16px 50px rgba(47, 156, 255, 0.25);
  --shadow-gold: 0 16px 50px rgba(255, 219, 77, 0.3);
}

html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
  font-family: var(--font);
}

body {
  background: 
    radial-gradient(circle at 50% -12%, rgba(47, 156, 255, 0.18), transparent 50rem),
    radial-gradient(circle at 88% 28%, rgba(0, 210, 255, 0.08), transparent 38rem),
    radial-gradient(circle at 10% 70%, rgba(30, 80, 160, 0.12), transparent 45rem),
    linear-gradient(180deg, #070d1a 0%, #050a14 38%, #03060c 100%);
  color: var(--text) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.16;
  background-image: 
    linear-gradient(rgba(94, 181, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 181, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 45%, transparent 85%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  font-weight: 850;
}

/* --- TOPLINE BANNER --- */
.topline {
  background: linear-gradient(90deg, #040812 0%, #09152a 50%, #040812 100%) !important;
  color: #92abc8 !important;
  border-bottom: 1px solid rgba(56, 114, 180, 0.22) !important;
  padding: 9px 24px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  font-weight: 550;
}
.topline-status i {
  background: var(--success) !important;
  box-shadow: 0 0 10px var(--success), 0 0 20px rgba(74, 222, 128, 0.4) !important;
  animation: pulse-dot 1.8s infinite ease-in-out;
}
.topline a {
  color: #cde4ff !important;
  font-weight: 750 !important;
  text-decoration: none;
  transition: color 0.2s;
}
.topline a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(94, 181, 255, 0.6);
}

/* --- HEADER & NAVIGATION --- */
.header {
  height: 84px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  background: rgba(5, 10, 20, 0.84) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(56, 114, 180, 0.22) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
.brand-mark {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #5eb5ff 0%, #1d72dc 100%) !important;
  box-shadow: 0 8px 24px rgba(47, 156, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.brand-mark b {
  background: #081224 !important;
  color: #7ee7ff !important;
}
.brand-word strong {
  font-family: var(--font-display) !important;
  font-weight: 850 !important;
  font-size: 21px !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, #ffffff 40%, #a8d5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand small {
  font-family: var(--font-mono) !important;
  font-size: 8px !important;
  letter-spacing: 2.2px !important;
  color: #6987ab !important;
}
.nav a {
  color: #8da4c4 !important;
  font-weight: 600 !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav a:hover {
  color: #ffffff !important;
  background: rgba(47, 156, 255, 0.1) !important;
}
.nav a.active {
  color: #ffffff !important;
  background: rgba(47, 156, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(94, 181, 255, 0.35), 0 0 18px rgba(47, 156, 255, 0.2) !important;
}
.nav a.active:after {
  display: none !important;
}

/* --- BUTTONS --- */
.button {
  font-family: var(--font) !important;
  border-radius: 13px !important;
  font-weight: 650 !important;
  padding: 13px 22px !important;
  background: linear-gradient(145deg, #101c32, #0c1527) !important;
  border: 1px solid rgba(56, 114, 180, 0.28) !important;
  color: #dbe9fc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, background 0.22s, border-color 0.22s !important;
}
.button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(94, 181, 255, 0.5) !important;
  background: linear-gradient(145deg, #152542, #0e1a30) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 22px rgba(47, 156, 255, 0.2) !important;
}
.button:active {
  transform: translateY(0) scale(0.98) !important;
}
.button.primary {
  background: linear-gradient(135deg, #2f9cff 0%, #1670e3 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(140, 210, 255, 0.65) !important;
  box-shadow: 0 8px 30px rgba(29, 114, 220, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.button.primary:hover {
  background: linear-gradient(135deg, #4aa6ff 0%, #1f7df2 100%) !important;
  box-shadow: 0 14px 40px rgba(29, 114, 220, 0.55), 0 0 30px rgba(94, 181, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}
.button.ghost {
  background: rgba(13, 22, 41, 0.55) !important;
  border-color: rgba(56, 114, 180, 0.3) !important;
  backdrop-filter: blur(12px) !important;
}
.button.ghost:hover {
  background: rgba(18, 32, 58, 0.8) !important;
  border-color: rgba(94, 181, 255, 0.55) !important;
}

/* --- CINEMATIC HERO SECTION --- */
.commerce-hero {
  min-height: 640px !important;
  border: 1px solid rgba(56, 114, 180, 0.32) !important;
  border-radius: 32px !important;
  margin-top: 24px !important;
  padding: 60px 54px !important;
  background: 
    radial-gradient(circle at 18% 25%, rgba(47, 156, 255, 0.15), transparent 42%),
    radial-gradient(circle at 86% 75%, rgba(0, 210, 255, 0.1), transparent 48%),
    linear-gradient(135deg, rgba(8, 16, 30, 0.96) 0%, rgba(5, 10, 20, 0.98) 100%) !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}
.commerce-hero:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  top: -140px;
  right: -90px;
  background: radial-gradient(circle, rgba(47, 156, 255, 0.2), transparent 70%);
  filter: blur(45px);
  pointer-events: none;
}
.commerce-hero-copy .eyebrow {
  color: var(--accent-cyan) !important;
  letter-spacing: 2px !important;
  font-weight: 750 !important;
  font-size: 11px !important;
}
.commerce-hero-copy .dot {
  background: var(--accent-cyan) !important;
  box-shadow: 0 0 14px var(--accent-cyan) !important;
}
.commerce-hero-copy h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(48px, 5.2vw, 82px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  margin: 18px 0 14px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
.commerce-hero-copy h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2.2vw, 32px) !important;
  line-height: 1.25 !important;
  margin: 0 0 20px !important;
  background: linear-gradient(135deg, #7ee7ff 0%, #2f9cff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 750 !important;
}
.commerce-hero-copy p {
  max-width: 580px !important;
  color: #9ab4d3 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.hero-proof {
  border-top: 1px solid rgba(56, 114, 180, 0.24) !important;
  margin-top: 36px !important;
  padding-top: 22px !important;
  color: #8da4c4 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  font-weight: 750 !important;
}
.hero-proof .icon {
  color: var(--accent-cyan) !important;
}
.hero-proof-extra {
  color: var(--gold) !important;
}
.hero-proof-extra .icon {
  color: var(--gold) !important;
}

/* --- CỔNG NẠP TIỀN TỰ ĐỘNG LUXURY FRAME --- */
.portal-combined-container {
  background: rgba(11, 20, 38, 0.86) !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  border-radius: 26px !important;
  padding: 24px 22px 22px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
}
.portal-live-pill {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.portal-banner-link {
  border: 2px solid transparent !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
  background: #060c16 !important;
}
.portal-banner-link:hover {
  border-color: #ffdb4d !important;
  box-shadow: 0 0 0 2.5px rgba(255, 219, 77, 0.8), 0 16px 45px rgba(255, 219, 77, 0.35) !important;
  transform: translateY(-3px) scale(1.012) !important;
}
.portal-banner-link:hover .portal-banner-img {
  filter: brightness(1.08) !important;
}

/* --- STEPPER PROGRESS BAR (CHECKOUT & CART) --- */
.checkout-stepper-wrap {
  margin: 18px 0 32px;
  padding: 22px 28px;
  background: rgba(13, 22, 41, 0.75);
  border: 1px solid rgba(56, 114, 180, 0.25);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.checkout-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stepper-step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #69829f;
  transition: all 0.25s ease;
}
.stepper-step.active {
  color: #ffffff;
}
.stepper-step.completed {
  color: var(--accent-cyan);
}
.stepper-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 850;
  background: #081120;
  border: 1.5px solid rgba(56, 114, 180, 0.35);
  color: #728ea8;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.stepper-step.active .stepper-num {
  background: linear-gradient(135deg, #2f9cff, #1670e3);
  border-color: #7ee7ff;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(47, 156, 255, 0.45);
}
.stepper-step.completed .stepper-num {
  background: rgba(74, 222, 128, 0.15);
  border-color: #4ade80;
  color: #4ade80;
}
.stepper-text b {
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.stepper-text small {
  display: block;
  font-size: 10px;
  color: #718da9;
  margin-top: 2px;
}
.stepper-line {
  flex: 1;
  height: 2px;
  background: rgba(56, 114, 180, 0.25);
  position: relative;
  border-radius: 2px;
}
.stepper-line.active {
  background: linear-gradient(90deg, #2f9cff, #5eb5ff);
  box-shadow: 0 0 10px rgba(47, 156, 255, 0.4);
}

/* --- PRODUCT CARDS (FLAGSHIP ROW & GRID) --- */
.product-card.product-row {
  display: grid !important;
  grid-template-columns: minmax(260px, 30%) 1fr !important;
  background: linear-gradient(145deg, #0d172b 0%, #09101f 100%) !important;
  border: 1px solid rgba(56, 114, 180, 0.26) !important;
  border-radius: 26px !important;
  min-height: 285px !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s, box-shadow 0.28s !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32) !important;
}
.product-card.product-row:hover {
  transform: translateY(-4px) scale(1.004) !important;
  border-color: rgba(94, 181, 255, 0.55) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 35px rgba(47, 156, 255, 0.18) !important;
}
.product-card-media {
  position: relative !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(56, 114, 180, 0.22) !important;
  background: radial-gradient(circle at 50% 50%, rgba(47, 156, 255, 0.12), transparent 70%), #070e1a !important;
}
.product-visual {
  height: 100% !important;
  min-height: 250px !important;
  overflow: hidden !important;
  position: relative !important;
}
.product-visual .badge {
  background: rgba(6, 12, 24, 0.9) !important;
  border: 1px solid rgba(94, 181, 255, 0.38) !important;
  color: #7ee7ff !important;
  font-family: var(--font-mono) !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: 1px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  backdrop-filter: blur(10px) !important;
}
.product-corner-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  background: linear-gradient(135deg, #ffdb4d, #f59e0b);
  color: #0b1426;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 219, 77, 0.4);
}
.product-content h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(23px, 2.2vw, 30px) !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  margin: 6px 0 10px !important;
}
.product-content h3 a {
  color: #ffffff !important;
  transition: color 0.2s !important;
}
.product-content h3 a:hover {
  color: var(--accent-cyan) !important;
}
.product-category {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: 1.5px !important;
  color: #7ee7ff !important;
}
.product-stock.in {
  background: rgba(74, 222, 128, 0.12) !important;
  border: 1px solid rgba(74, 222, 128, 0.28) !important;
  color: #4ade80 !important;
}
.product-stock.in i {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  box-shadow: 0 0 10px #4ade80 !important;
}
.product-meta span {
  background: #081120 !important;
  border: 1px solid rgba(56, 114, 180, 0.25) !important;
  color: #8da4c4 !important;
  border-radius: 10px !important;
}
.meta-instant {
  color: var(--gold) !important;
  border-color: rgba(255, 219, 77, 0.3) !important;
}
.meta-instant .icon {
  color: var(--gold) !important;
}
.product-price-block .price {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}
.discount-chip {
  background: rgba(255, 219, 77, 0.15) !important;
  border: 1px solid rgba(255, 219, 77, 0.35) !important;
  color: #ffdb4d !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
.product-delivery-note {
  font-size: 11px !important;
  color: #8da4c4 !important;
}
.product-delivery-note .icon {
  color: #4ade80 !important;
}

/* --- CATEGORY CHIPS --- */
.category-chip {
  background: linear-gradient(145deg, #091324, #070e1c) !important;
  border: 1px solid rgba(56, 114, 180, 0.24) !important;
  color: #8fa6c2 !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.category-chip:hover {
  background: rgba(18, 32, 58, 0.85) !important;
  border-color: rgba(94, 181, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}
.category-chip.active {
  background: linear-gradient(135deg, rgba(47, 156, 255, 0.22), rgba(13, 22, 41, 0.95)) !important;
  border-color: #2f9cff !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(47, 156, 255, 0.25) !important;
}

/* --- CHECKOUT QR CODE & COUNTDOWN --- */
.qr-cyber-wrap {
  position: relative;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  max-width: 290px;
  margin: 20px auto;
}
.qr-cyber-wrap img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 12px !important;
}
@media (max-width: 480px) {
  .qr-cyber-wrap {
    max-width: 250px !important;
    padding: 12px !important;
    margin: 14px auto !important;
  }
  .cart-email-block input,
  #pending-checkout-email,
  #post-checkout-email {
    font-size: 16px !important; /* Prevents iOS Safari input focus auto-zoom */
  }
}
.qr-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 219, 77, 0.12);
  border: 1px solid rgba(255, 219, 77, 0.35);
  color: #ffdb4d;
  font-size: 11.5px;
  font-weight: 750;
  margin-top: 14px;
}
.qr-timer-badge b {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #ffffff;
}
.bank-detail-card {
  border: 1px solid rgba(56, 114, 180, 0.3) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #070e1c !important;
}
.bank-detail-card>div {
  border-bottom: 1px solid rgba(56, 114, 180, 0.18) !important;
  padding: 14px 18px !important;
}
.order-code {
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
}

/* --- TOAST & MODAL --- */
#toast {
  background: linear-gradient(135deg, #0e1d35, #0a1426) !important;
  color: #ffffff !important;
  border: 1px solid rgba(94, 181, 255, 0.5) !important;
  border-radius: 14px !important;
  padding: 15px 28px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(47, 156, 255, 0.28) !important;
  backdrop-filter: blur(18px) !important;
}
.modal {
  background: linear-gradient(145deg, #0f1c32 0%, #0b1426 100%) !important;
  border: 1px solid rgba(56, 114, 180, 0.38) !important;
  border-radius: 26px !important;
  box-shadow: 0 35px 110px rgba(0, 0, 0, 0.7), 0 0 45px rgba(47, 156, 255, 0.15) !important;
}

/* --- BENEFITS SECTION --- */
.commerce-benefits {
  border: 1px solid rgba(56, 114, 180, 0.25) !important;
  border-radius: 22px !important;
  background: rgba(11, 20, 36, 0.78) !important;
  margin-top: 24px !important;
  backdrop-filter: blur(16px) !important;
}
.commerce-benefits article {
  border-color: rgba(56, 114, 180, 0.22) !important;
}
.commerce-benefits .icon {
  color: var(--accent-cyan) !important;
  filter: drop-shadow(0 0 10px rgba(94, 181, 255, 0.35)) !important;
}

/* --- RESPONSIVE MOBILE TWEAKS --- */
@media (max-width: 768px) {
  .checkout-stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .stepper-line {
    display: none;
  }
  .commerce-hero {
    padding: 34px 22px !important;
    border-radius: 24px !important;
  }
  .product-card.product-row {
    grid-template-columns: 1fr !important;
  }
  .product-card-media {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(56, 114, 180, 0.22) !important;
  }
  .product-content {
    padding: 22px !important;
  }
}

/* ============================================================
   TESONVN v10.0 — PRODUCT RATING & SOCIAL PROOF BADGE
   ============================================================ */
.product-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 219, 77, 0.08);
  border: 1px solid rgba(255, 219, 77, 0.22);
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: #ffdb4d;
}
.product-rating-badge .stars {
  color: #ffdb4d;
  letter-spacing: 1px;
  font-size: 10px;
}
.product-rating-badge b {
  color: #ffffff;
  font-weight: 800;
}
.product-rating-badge .sold-count {
  color: #9cb3cb;
  font-weight: 500;
  font-size: 10px;
}

/* ============================================================
   TESONVN v10.0 — CATEGORY FILTER CHIPS LUXURY DESIGN
   ============================================================ */
.category-filters {
  display: flex !important;
  gap: 10px !important;
  margin: 18px 0 28px !important;
  padding-bottom: 6px !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}
.category-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 18px !important;
  background: rgba(13, 22, 41, 0.8) !important;
  border: 1px solid rgba(56, 114, 180, 0.25) !important;
  border-radius: 12px !important;
  color: #94adcb !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}
.category-chip:hover {
  background: rgba(22, 36, 66, 0.95) !important;
  border-color: rgba(94, 181, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}
.category-chip.active {
  background: linear-gradient(135deg, rgba(47, 156, 255, 0.22), rgba(15, 34, 64, 0.85)) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(47, 156, 255, 0.25), inset 0 0 12px rgba(47, 156, 255, 0.15) !important;
}
.category-chip b {
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(47, 156, 255, 0.18) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid rgba(94, 181, 255, 0.25) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 99px !important;
  min-width: 20px !important;
}
.category-chip.active b {
  background: var(--accent) !important;
  color: #060a14 !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   TESONVN v10.0 — ADMIN COMMAND CENTER & QUICK BAR
   ============================================================ */
.admin-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  background: linear-gradient(135deg, rgba(14, 25, 48, 0.85) 0%, rgba(9, 16, 31, 0.95) 100%);
  border: 1px solid rgba(56, 114, 180, 0.32);
  border-radius: 18px;
  margin-bottom: 24px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.quick-status-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.admin-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 99px;
  text-transform: uppercase;
}
.live-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
  animation: ledPulse 1.6s infinite ease-in-out;
}
@keyframes ledPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #4ade80; }
  50% { opacity: 0.45; transform: scale(0.85); box-shadow: 0 0 3px #4ade80; }
}
.system-metric-pill {
  font-size: 12px;
  color: #8da4be;
  font-family: var(--font-sans);
}
.system-metric-pill b {
  color: var(--accent-cyan);
  font-weight: 750;
}
.quick-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quick-actions-group .button {
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ============================================================
   TESONVN v10.0 — LICENSE KEY BOX & COPY ANIMATION
   ============================================================ */
.license-box {
  background: linear-gradient(135deg, #091222, #060b17) !important;
  border: 1px dashed rgba(94, 181, 255, 0.4) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  transition: all 0.25s ease !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.license-box:hover {
  border-color: var(--accent) !important;
  border-style: solid !important;
  box-shadow: 0 0 20px rgba(47, 156, 255, 0.2), inset 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.license-box code {
  color: var(--accent-soft) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}
.license-box .icon-btn {
  background: rgba(47, 156, 255, 0.12) !important;
  color: var(--accent-cyan) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}
.license-box .icon-btn:hover {
  background: var(--accent) !important;
  color: #060a14 !important;
  transform: scale(1.08) !important;
}

/* ============================================================
   TESONVN v10.0 — CART ITEM & PRODUCT THUMBNAIL BEAUTIFICATION
   Fixes squished/tall container bug and formats image as luxury square card
   ============================================================ */
.cart-item {
  display: grid !important;
  grid-template-columns: 84px 1fr auto !important;
  gap: 20px !important;
  align-items: center !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(56, 114, 180, 0.2) !important;
}
.cart-item:first-child {
  padding-top: 6px !important;
}
.cart-thumb {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  max-width: 84px !important;
  max-height: 84px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 50%, rgba(47, 156, 255, 0.15), transparent 70%), linear-gradient(145deg, #091322, #050b14) !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(47, 156, 255, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}
.cart-thumb:hover {
  transform: scale(1.04) !important;
  border-color: var(--accent) !important;
}
.cart-thumb a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 15px !important;
  display: block !important;
}
.cart-thumb svg {
  width: 44px !important;
  height: 44px !important;
  color: var(--accent-cyan) !important;
}
.cart-item-info h3 {
  font-size: 17px !important;
  font-weight: 750 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.02em !important;
}
.cart-item-info h3 a {
  color: #ffffff !important;
  transition: color 0.2s !important;
}
.cart-item-info h3 a:hover {
  color: var(--accent-cyan) !important;
}
.cart-item-term {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #8da4be !important;
  margin-bottom: 10px !important;
}
.cart-item-term svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--accent) !important;
}
.cart-item .quantity {
  border: 1px solid rgba(56, 114, 180, 0.3) !important;
  background: rgba(9, 19, 34, 0.8) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.cart-item .quantity button {
  padding: 6px 12px !important;
  color: #9cb5cb !important;
  transition: background 0.2s, color 0.2s !important;
}
.cart-item .quantity button:hover {
  background: rgba(47, 156, 255, 0.15) !important;
  color: #ffffff !important;
}
.cart-item .quantity span {
  font-weight: 700 !important;
  color: #ffffff !important;
}
.cart-item-right .price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}
.cart-remove-btn {
  color: #6b8299 !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
.cart-remove-btn:hover {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
}

/* Fallback for legacy .product-visual in cart */
.cart-item .product-visual {
  width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.cart-item .product-visual:after,
.cart-item .product-visual:before,
.cart-item .badge,
.cart-item .favorite,
.cart-item .visual-version {
  display: none !important;
}

@media (max-width: 560px) {
  .cart-item {
    grid-template-columns: 68px 1fr auto !important;
    gap: 14px !important;
    padding: 16px 0 !important;
  }
  .cart-thumb,
  .cart-item .product-visual {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    border-radius: 14px !important;
  }
  .cart-thumb svg {
    width: 34px !important;
    height: 34px !important;
  }
  .cart-item-info h3 {
    font-size: 15px !important;
  }
  .cart-item-right .price {
    font-size: 15px !important;
  }
}

/* ============================================================
   TESONVN v10.0 — PRODUCT DETAIL & PACKAGE SELECTOR
   ============================================================ */
.product-detail {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 40px !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(8, 19, 34, 0.95), rgba(5, 11, 20, 0.98)) !important;
  padding: 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
}
.product-detail .product-visual {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 460px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(56, 114, 180, 0.4) !important;
  background: radial-gradient(circle at 50% 50%, rgba(47, 156, 255, 0.12), transparent 70%), linear-gradient(145deg, #091322, #050b14) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(47, 156, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
.product-detail .product-visual:after {
  display: none !important;
}
.product-detail .product-visual > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.product-detail .product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: inherit !important;
  transition: transform 0.35s ease !important;
}
.product-detail .product-visual:hover .product-image {
  transform: scale(1.02) !important;
}
.product-detail .product-visual .favorite {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(5, 12, 22, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}
.product-detail .product-visual .favorite:hover {
  background: rgba(47, 156, 255, 0.3) !important;
  border-color: #2f9cff !important;
  transform: scale(1.08) !important;
}
.product-detail .product-visual .favorite.selected {
  color: #ff4757 !important;
  border-color: rgba(255, 71, 87, 0.5) !important;
}
.product-detail .product-visual .favorite.selected svg {
  fill: #ff4757 !important;
}
.product-detail .product-visual .badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 10 !important;
  background: rgba(5, 12, 22, 0.8) !important;
  border: 1px solid rgba(56, 114, 180, 0.5) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.product-detail .product-visual .visual-version {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 10 !important;
  background: rgba(5, 12, 22, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #cbd5e1 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.package-select-box {
  background: linear-gradient(135deg, rgba(14, 25, 48, 0.85), rgba(9, 16, 31, 0.95)) !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin: 14px 0 !important;
}
.package-select-box label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent-cyan) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}
.package-select-box label svg {
  width: 14px !important;
  height: 14px !important;
}
.package-select-box select {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #060c18 !important;
  border: 1px solid rgba(56, 114, 180, 0.4) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}
.package-select-box select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 15px rgba(47, 156, 255, 0.3) !important;
}

/* ============================================================
   TESONVN v10.0 — INTERACTIVE PACKAGE RADIO CARDS
   ============================================================ */
.package-selection-wrap {
  margin: 14px 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.package-selection-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  text-transform: uppercase !important;
}
.package-selection-title svg {
  width: 14px !important;
  height: 14px !important;
}
.package-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 10px !important;
}
.package-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  background: rgba(14, 25, 48, 0.75) !important;
  border: 1.5px solid rgba(56, 114, 180, 0.3) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}
.package-card:hover {
  border-color: rgba(47, 156, 255, 0.6) !important;
  background: rgba(20, 36, 68, 0.85) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}
.package-card.selected {
  border-color: #2f9cff !important;
  background: linear-gradient(135deg, rgba(47, 156, 255, 0.16), rgba(14, 25, 48, 0.95)) !important;
  box-shadow: 0 0 0 1px #2f9cff, 0 8px 24px rgba(47, 156, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}
.package-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.package-card-radio {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}
.package-card.selected .package-card-radio {
  border-color: #2f9cff !important;
  background: #2f9cff !important;
  box-shadow: inset 0 0 0 3px #060c18 !important;
}
.package-card-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.package-card-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  letter-spacing: -0.01em !important;
}
.package-card-badge {
  position: absolute !important;
  top: -7px !important;
  right: 8px !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}
.package-active-display {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding-top: 6px !important;
  color: #8ba9cb !important;
  font-size: 13px !important;
}
.package-active-display strong {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  /* Cho phép .wrap mở rộng sát viền màn hình (8px lề mỗi bên), loại bỏ cảm giác nền bị thu hẹp */
  .wrap {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ẩn nút desktop-favorite ở header trên mobile */
  .desktop-favorite {
    display: none !important;
  }

  /* Thu gọn khoảng cách page-header trên mobile */
  .page-header {
    padding: 10px 0 8px !important;
  }
  .breadcrumbs {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }

  /* Chi tiết sản phẩm trên mobile: chiếm trọn bề ngang màn hình, đệm vừa vặn, nền thoáng đãng */
  .product-detail {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 12px 12px 160px !important;
    border-radius: 18px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(56, 114, 180, 0.3) !important;
    background: linear-gradient(180deg, rgba(8, 19, 34, 0.95), rgba(5, 11, 20, 0.98)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  }

  /* Ảnh banner sản phẩm trên mobile: 16:9 sắc nét, căn giữa hoàn toàn, không lọt thỏm hay thừa viền đen */
  .product-detail .product-visual {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: 240px !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    margin: 0 !important;
    border: 1px solid rgba(56, 114, 180, 0.3) !important;
  }
  .product-detail .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
  }

  .product-detail .product-visual .favorite {
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .product-detail .product-visual .badge {
    top: 10px !important;
    left: 10px !important;
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  .product-detail .product-visual .visual-version {
    bottom: 10px !important;
    right: 10px !important;
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  /* 3 ô thông số dưới ảnh: chia 3 cột đều tăm tắp, cân xứng với banner */
  .detail-thumbs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .detail-thumbs > div {
    padding: 10px 4px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(14, 25, 48, 0.75) !important;
    border: 1px solid rgba(56, 114, 180, 0.25) !important;
  }

  /* Nội dung mô tả sản phẩm */
  .detail-copy {
    position: static !important;
    padding: 0 !important;
  }
  .detail-copy h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin: 6px 0 !important;
    letter-spacing: -0.02em !important;
  }
  .detail-copy .eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
  }
  .detail-price.detail-purchase-panel {
    padding: 14px !important;
    margin: 14px 0 !important;
    border-radius: 14px !important;
  }

  /* Danh sách gói bản quyền hiển thị 1 cột dạng thẻ chọn radio hiện đại */
  .package-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .package-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }
  .package-card-header {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .package-card-name {
    font-size: 14px !important;
  }
  .package-card-price {
    font-size: 15px !important;
    font-weight: 850 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
  .package-card-badge {
    position: static !important;
    margin-left: 8px !important;
    font-size: 9px !important;
    padding: 2px 7px !important;
    display: inline-block !important;
  }
  .package-active-display {
    padding-top: 12px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(56, 114, 180, 0.2) !important;
  }

  .detail-description {
    grid-template-columns: 1fr !important;
    margin-top: 24px !important;
    gap: 20px !important;
  }
  .feature-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   TESONVN v10.0 — VIP LOYALTY TIER SYSTEM
   ============================================================ */
.vip-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 750 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
}
.vip-chip svg {
  width: 14px !important;
  height: 14px !important;
}
.vip-bronze {
  background: rgba(180, 83, 9, 0.15) !important;
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
}
.vip-silver {
  background: rgba(203, 213, 225, 0.15) !important;
  color: #e2e8f0 !important;
  border-color: rgba(226, 232, 240, 0.4) !important;
  box-shadow: 0 0 10px rgba(226, 232, 240, 0.1) !important;
}
.vip-gold {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(202, 138, 4, 0.12)) !important;
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, 0.5) !important;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.18) !important;
}
.vip-diamond {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(168, 85, 247, 0.2)) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25) !important;
  animation: vipShine 3s infinite alternate !important;
}
@keyframes vipShine {
  0% { filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.4)); }
  100% { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6)); }
}
.vip-pill-pct {
  background: rgba(255, 255, 255, 0.18) !important;
  color: inherit !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  margin-left: 3px !important;
}
.vip-banner-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  background: linear-gradient(135deg, #0b172a, #070e1c) !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
.vip-banner-card.vip-gold {
  border-color: rgba(250, 204, 21, 0.45) !important;
  background: linear-gradient(135deg, #181507, #0b172a) !important;
}
.vip-banner-card.vip-diamond {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: linear-gradient(135deg, #091a2e, #130a24) !important;
}
.vip-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.vip-banner-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
}
.vip-banner-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.vip-banner-left strong {
  display: block !important;
  font-size: 15px !important;
  color: #fff !important;
  margin-bottom: 3px !important;
}
.vip-banner-left p {
  font-size: 12px !important;
  color: #8ba9cb !important;
  margin: 0 !important;
}
.vip-banner-pct {
  font-size: 18px !important;
  font-weight: 900 !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}
.vip-discount-line {
  color: #38bdf8 !important;
}
.vip-discount-line b {
  color: #38bdf8 !important;
}

/* ============================================================
   TESONVN v10.0 — REAL-TIME FOMO SOCIAL PROOF TICKER
   ============================================================ */
.fomo-ticker {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.95) !important;
}
.fomo-ticker.fomo-show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.fomo-ticker-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(9, 17, 32, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(47, 156, 255, 0.15) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  max-width: 340px !important;
}
.fomo-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(47, 156, 255, 0.2), rgba(14, 25, 48, 0.9)) !important;
  border: 1px solid rgba(56, 114, 180, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  flex-shrink: 0 !important;
}
.fomo-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.fomo-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #fff !important;
  margin-bottom: 2px !important;
}
.fomo-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  display: inline-block !important;
  animation: fomoPulse 1.8s infinite !important;
}
@keyframes fomoPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}
.fomo-city {
  color: #7e9bb9 !important;
  font-size: 11px !important;
}
.fomo-desc {
  font-size: 12px !important;
  color: #cbd5e1 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fomo-highlight {
  font-weight: 750 !important;
  color: var(--accent-cyan, #7ee7ff) !important;
}
.fomo-time {
  font-size: 10px !important;
  color: #64748b !important;
  margin-top: 3px !important;
}
.fomo-close-btn {
  background: transparent !important;
  border: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  transition: color 0.15s !important;
  align-self: flex-start !important;
}
.fomo-close-btn:hover {
  color: #fff !important;
}

@media (max-width: 560px) {
  .fomo-ticker {
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
  }
  .fomo-ticker-inner {
    max-width: 100% !important;
  }
}

/* ============================================================
   TESONVN v10.0 — RECENTLY VIEWED SECTION
   ============================================================ */
.recently-viewed-section {
  margin-top: 48px !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(56, 114, 180, 0.2) !important;
}

/* ============================================================
   TESONVN v10.0 — HERO BUTTONS STACKED (XEM SẢN PHẨM & APPLE DEVELOPER)
   ============================================================ */
.hero-buttons-stacked {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 28px !important;
  max-width: 360px !important;
  width: 100% !important;
}

.hero-btn-main {
  width: 100% !important;
  justify-content: center !important;
  min-height: 52px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-btn-main:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5) !important;
}

.hero-btn-apple {
  width: 100% !important;
  justify-content: center !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  color: #ffffff !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.32) !important;
  font-weight: 750 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-btn-apple:hover {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  border-color: rgba(147, 197, 253, 0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5) !important;
  color: #ffffff !important;
}

.hero-btn-apple .icon,
.hero-btn-main .icon {
  width: 17px !important;
  height: 17px !important;
  transition: transform 0.2s ease !important;
}

.hero-btn-apple:hover .icon,
.hero-btn-main:hover .icon {
  transform: translateX(3px) !important;
}

@media (max-width: 720px) {
  .hero-buttons-stacked {
    max-width: 100% !important;
    margin-top: 20px !important;
  }
}

/* ============================================================
   BACKGROUND MUSIC WIDGET (OVER SUPPORT BUTTON)
   ============================================================ */
.music-hub-widget {
  display: none !important;
}

.m-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, rgba(8, 20, 36, 0.95) 0%, rgba(13, 28, 52, 0.92) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(56, 189, 248, 0.22) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.m-pill:hover {
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.m-disk-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.m-disk {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #0f172a 0%, #030712 50%, #1e293b 72%, #0284c7 90%, #38bdf8 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
  position: relative !important;
  transition: transform 0.3s ease !important;
}

.m-disk.spinning {
  animation: spinVinyl 3.6s linear infinite !important;
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.m-disk-groove {
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
}

.m-disk-hole {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 7px !important;
  height: 7px !important;
  margin: -3.5px 0 0 -3.5px !important;
  border-radius: 50% !important;
  background: #0284c7 !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 4px #38bdf8 !important;
}

.m-bars {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  pointer-events: none !important;
}

.m-bars span {
  width: 2px !important;
  height: 3px !important;
  background: #38bdf8 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 4px #38bdf8 !important;
  transition: height 0.2s ease !important;
}

.m-bars.playing span:nth-child(1) { animation: eqBounce 0.7s ease-in-out infinite alternate !important; }
.m-bars.playing span:nth-child(2) { animation: eqBounce 0.5s ease-in-out infinite alternate 0.12s !important; }
.m-bars.playing span:nth-child(3) { animation: eqBounce 0.8s ease-in-out infinite alternate 0.25s !important; }
.m-bars.playing span:nth-child(4) { animation: eqBounce 0.6s ease-in-out infinite alternate 0.38s !important; }

@keyframes eqBounce {
  0% { height: 3px; }
  100% { height: 13px; }
}

.m-track-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  max-width: 140px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

.m-title-text {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45) !important;
}

.m-vol-badge {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  margin-top: 1px !important;
}

.m-ctrl-btn, .m-expand-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: #38bdf8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.m-ctrl-btn:hover, .m-expand-btn:hover {
  background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
  color: #ffffff !important;
  border-color: #7ee7ff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

/* VOLUME POPOVER */
.m-vol-popover {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
  width: 220px !important;
  background: rgba(9, 17, 32, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(56, 189, 248, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(0.95) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 9999 !important;
}

.m-vol-popover.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.m-vol-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.m-vol-icon-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  transition: transform 0.18s ease !important;
}

.m-vol-icon-btn:hover {
  transform: scale(1.15) !important;
}

.m-vol-label {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  color: #cbd5e1 !important;
  flex: 1 !important;
  letter-spacing: 0.01em !important;
}

.m-vol-percent {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.4) !important;
}

.m-popover-close {
  background: none !important;
  border: none !important;
  color: #64748b !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  line-height: 1 !important;
  transition: color 0.18s ease !important;
}

.m-popover-close:hover {
  color: #ffffff !important;
}

.m-slider-wrap {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.m-vol-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  outline: none !important;
  accent-color: #38bdf8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.m-vol-presets {
  display: flex !important;
  gap: 6px !important;
  justify-content: space-between !important;
}

.m-quick-vol {
  flex: 1 !important;
  padding: 4px 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  text-align: center !important;
}

.m-quick-vol:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   TESONVN v10.0 — FLOATING MULTI-CHANNEL SUPPORT HUB
   ============================================================ */
.support-hub {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9995 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.support-trigger-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.4), 0 0 20px rgba(56, 189, 248, 0.25) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.support-trigger-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 34px rgba(2, 132, 199, 0.55), 0 0 25px rgba(56, 189, 248, 0.35) !important;
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
}

.support-trigger-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.support-trigger-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
}

.support-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  display: inline-block !important;
  animation: fomoPulse 1.8s infinite !important;
}

.support-flyout {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  width: 320px !important;
  background: rgba(9, 17, 32, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(47, 156, 255, 0.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(16px) scale(0.95) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.support-hub.support-open .support-flyout {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.support-flyout-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(56, 114, 180, 0.25) !important;
  background: rgba(14, 25, 48, 0.7) !important;
}

.support-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.support-live-indicator {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 10px #22c55e !important;
  animation: fomoPulse 1.8s infinite !important;
}

.support-header-title strong {
  display: block !important;
  font-size: 13px !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.support-header-title small {
  display: block !important;
  font-size: 10px !important;
  color: #8da4be !important;
}

.support-flyout-close {
  background: transparent !important;
  border: 0 !important;
  color: #8da4be !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  transition: color 0.15s !important;
}

.support-flyout-close:hover {
  color: #fff !important;
}

.support-channels-list {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.support-channel-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(13, 23, 42, 0.75) !important;
  border: 1px solid rgba(56, 114, 180, 0.25) !important;
  text-decoration: none !important;
  color: #fff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.support-channel-item:hover {
  background: rgba(22, 38, 70, 0.9) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.channel-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.tg-bg { background: linear-gradient(135deg, #0088cc, #229ed9) !important; color: #fff !important; }
.zalo-bg { background: linear-gradient(135deg, #0068ff, #0052cc) !important; color: #fff !important; }
.facebook-bg { background: linear-gradient(135deg, #1877f2, #0d65d9) !important; color: #fff !important; }
.messenger-bg { background: linear-gradient(135deg, #00b2fe 0%, #006aff 35%, #a033ff 70%, #ff5280 100%) !important; color: #fff !important; }
.discord-bg { background: linear-gradient(135deg, #5865F2, #4752C4) !important; color: #fff !important; }
.youtube-bg { background: linear-gradient(135deg, #FF0000, #CC0000) !important; color: #fff !important; }
.tiktok-bg { background: linear-gradient(135deg, #010101, #111827) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(254, 44, 85, 0.4), 0 0 10px rgba(37, 244, 238, 0.3) !important; }
.instagram-bg { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; color: #fff !important; }
.ticket-bg { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; }
.phone-bg { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important; }
.custom-bg { background: linear-gradient(135deg, #a855f7, #6366f1) !important; color: #fff !important; }
.custom2-bg { background: linear-gradient(135deg, #06b6d4, #0284c7) !important; color: #fff !important; }
.image-icon-bg { background: #0b1528 !important; border: 1.5px solid rgba(56, 189, 248, 0.4) !important; overflow: hidden !important; padding: 2px !important; }
.channel-img-icon { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; display: block !important; }

.channel-svg { width: 20px !important; height: 20px !important; }
.channel-icon-wrap svg { width: 19px !important; height: 19px !important; }

.channel-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.channel-info strong {
  display: block !important;
  font-size: 12px !important;
  color: #fff !important;
  font-weight: 750 !important;
}

.channel-info span {
  display: block !important;
  font-size: 10px !important;
  color: #8da4be !important;
}

.channel-action-badge {
  font-size: 10px !important;
  font-weight: 750 !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  white-space: nowrap !important;
}

.support-flyout-footer {
  padding: 10px 14px !important;
  background: rgba(6, 12, 23, 0.7) !important;
  border-top: 1px solid rgba(56, 114, 180, 0.2) !important;
  text-align: center !important;
  font-size: 10px !important;
  color: #7993af !important;
}

/* ============================================================
   TESONVN Mobile Floating Support Hub (Compact FAB)
   ============================================================ */
@media (max-width: 768px) {
  .support-hub {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 82px) !important;
    right: 16px !important;
  }
  .support-trigger-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.5), 0 0 16px rgba(56, 189, 248, 0.3) !important;
  }
  .support-trigger-label {
    display: none !important;
  }
  .support-pulse-dot {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 9px !important;
    height: 9px !important;
    border: 1.5px solid #0369a1 !important;
  }
  .support-trigger-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .support-flyout {
    bottom: 58px !important;
    right: 0 !important;
    width: min(calc(100vw - 32px), 340px) !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
  }
  main.wrap {
    padding-bottom: 160px !important;
  }
  .product-detail {
    padding-bottom: 140px !important;
  }
}

/* ============================================================
   TESONVN v10.0 — VOUCHER WALLET & QUICK APPLY
   ============================================================ */
.detail-vouchers-card {
  margin: 16px 0 18px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, rgba(14, 25, 48, 0.75), rgba(8, 16, 32, 0.85)) !important;
  border: 1px solid rgba(56, 114, 180, 0.3) !important;
  border-radius: 14px !important;
}

.detail-vouchers-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.voucher-head-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.voucher-head-title svg {
  width: 13px !important;
  height: 13px !important;
}

.voucher-head-sub {
  font-size: 10px !important;
  color: #8da4be !important;
}

.detail-vouchers-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.voucher-item-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(6, 12, 23, 0.8) !important;
  border: 1px dashed rgba(56, 189, 248, 0.35) !important;
  border-radius: 10px !important;
}

.voucher-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.voucher-badge-pct {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  padding: 2px 5px !important;
  border-radius: 5px !important;
}

.voucher-code {
  display: block !important;
  font-size: 12px !important;
  color: #fff !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 0.04em !important;
}

.voucher-item-left small {
  display: block !important;
  font-size: 9px !important;
  color: #7e9bb9 !important;
}

.voucher-btn-act {
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s !important;
}

.voucher-btn-act svg {
  width: 11px !important;
  height: 11px !important;
}

.voucher-btn-act:hover {
  background: var(--accent, #2f9cff) !important;
  color: #000 !important;
  transform: scale(1.05) !important;
}

/* Quick Vouchers in Cart */
.cart-quick-vouchers-box {
  margin: 12px 0 !important;
}

.cart-vouchers-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #8da4be !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.cart-vouchers-title svg {
  width: 13px !important;
  height: 13px !important;
  color: var(--accent-cyan, #7ee7ff) !important;
}

.cart-vouchers-chips {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.cart-voucher-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 12px !important;
  background: rgba(14, 25, 48, 0.8) !important;
  border: 1px dashed rgba(56, 189, 248, 0.35) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.cart-voucher-pill:hover {
  border-style: solid !important;
  border-color: var(--accent, #2f9cff) !important;
  background: rgba(22, 38, 70, 0.9) !important;
  transform: translateY(-2px) !important;
}

.cart-voucher-pill.applied {
  border-style: solid !important;
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.15) !important;
}

.cp-pct {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.cp-state {
  font-size: 10px !important;
  color: var(--accent-cyan, #7ee7ff) !important;
  font-weight: 700 !important;
}

.cart-voucher-pill.applied .cp-state {
  color: #22c55e !important;
}

/* ============================================================
   TESONVN v10.0 — PRODUCT REVIEWS & 5-STAR RATINGS
   ============================================================ */
.product-reviews-section {
  margin-top: 48px !important;
  padding-top: 36px !important;
  border-top: 1px solid rgba(56, 114, 180, 0.22) !important;
}

.reviews-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.reviews-score-card {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 32px !important;
  padding: 24px 28px !important;
  background: linear-gradient(135deg, #091424, #060c18) !important;
  border: 1px solid rgba(56, 114, 180, 0.3) !important;
  border-radius: 18px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35) !important;
}

.score-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid rgba(56, 114, 180, 0.22) !important;
  padding-right: 24px !important;
  text-align: center !important;
}

.score-number {
  font-size: 48px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 6px !important;
}

.score-stars {
  font-size: 16px !important;
  margin-bottom: 6px !important;
  letter-spacing: 2px !important;
}

.score-count {
  font-size: 11px !important;
  color: #8da4be !important;
  margin-bottom: 4px !important;
}

.score-recommend {
  font-size: 11px !important;
  font-weight: 750 !important;
  color: #4ade80 !important;
}

.score-breakdown {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

.breakdown-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 11px !important;
  color: #8da4be !important;
}

.breakdown-row span:first-child {
  width: 36px !important;
  text-align: right !important;
}

.breakdown-row span:last-child {
  width: 32px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

.bar-track {
  flex: 1 !important;
  height: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}

.bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  border-radius: 99px !important;
}

/* Review Form Card */
.review-form-card {
  padding: 22px 24px !important;
  background: linear-gradient(135deg, rgba(14, 25, 48, 0.85), rgba(9, 16, 31, 0.95)) !important;
  border: 1px solid rgba(56, 114, 180, 0.35) !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important;
}

.star-rating-picker {
  display: inline-flex !important;
  gap: 4px !important;
  margin-top: 4px !important;
}

.picker-star {
  font-size: 26px !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: transform 0.15s, color 0.15s !important;
  user-select: none !important;
}

.picker-star:hover {
  transform: scale(1.2) !important;
}

.picker-star.active {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4) !important;
}

/* Review Items */
.reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.review-item-card {
  padding: 18px 22px !important;
  background: rgba(11, 20, 36, 0.75) !important;
  border: 1px solid rgba(56, 114, 180, 0.22) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s !important;
}

.review-item-card:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
}

.review-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.review-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.review-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  flex-shrink: 0 !important;
}

.review-author-name {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.review-author-name strong {
  font-size: 13px !important;
  color: #fff !important;
  font-weight: 750 !important;
}

.vip-tag-mini {
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
  background: rgba(250, 204, 21, 0.15) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250, 204, 21, 0.3) !important;
}

.verified-buyer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  color: #4ade80 !important;
}

.verified-buyer-badge svg {
  width: 11px !important;
  height: 11px !important;
}

.review-meta {
  color: #64748b !important;
  font-size: 11px !important;
}

.review-stars-static {
  color: #fbbf24 !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
}

.review-comment-text {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 680px) {
  .reviews-score-card {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .score-main {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(56, 114, 180, 0.22) !important;
    padding-right: 0 !important;
    padding-bottom: 18px !important;
  }
  .detail-vouchers-grid {
    grid-template-columns: 1fr !important;
  }
  .support-hub {
    bottom: 16px !important;
    right: 16px !important;
  }
  .support-flyout {
    width: 290px !important;
    right: -4px !important;
  }
  .music-hub-widget {
    margin-bottom: 6px !important;
  }
  .m-pill {
    padding: 4px 8px 4px 5px !important;
    gap: 6px !important;
  }
  .m-track-info {
    max-width: 110px !important;
  }
  .m-title-text {
    font-size: 10px !important;
  }
  .m-vol-popover {
    width: 210px !important;
    right: 0 !important;
  }
}

/* ============================================================
   HEADER ACCOUNT BALANCE PILL (REPLACING CART BUTTON)
   ============================================================ */
.header-balance-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 12px 0 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(8, 20, 36, 0.95), rgba(13, 31, 56, 0.85)) !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.header-balance-btn:hover {
  background: linear-gradient(135deg, rgba(14, 32, 58, 0.98), rgba(20, 48, 86, 0.92)) !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

.header-balance-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.header-balance-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  flex-shrink: 0 !important;
}

.header-balance-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}

.header-balance-val {
  font-family: 'JetBrains Mono', monospace, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}

.header-balance-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  background: rgba(56, 189, 248, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.header-balance-btn:hover .header-balance-plus {
  background: #38bdf8 !important;
  color: #031024 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

@media (max-width: 600px) {
  .header-balance-btn {
    height: 36px !important;
    padding: 0 8px 0 6px !important;
    gap: 6px !important;
  }
  .header-balance-val {
    font-size: 12px !important;
  }
  .header-balance-icon {
    width: 20px !important;
    height: 20px !important;
  }
  .header-balance-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  .header-balance-plus {
    width: 16px !important;
    height: 16px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 400px) {
  .header-balance-plus {
    display: none !important;
  }
}

/* ========================================================
   v11.0 ULTIMATE FLAGSHIP SUITE STYLES
   Spotlight Command Palette, Sound FX, AI Bot, Affiliate
   ======================================================== */

.spotlight-trigger {
  position: relative !important;
}

.spotlight-badge-hint {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #7ee7ff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 5px;
  line-height: 1;
  pointer-events: none;
}

.sound-toggle-btn.sound-off svg {
  opacity: 0.35;
  filter: grayscale(1);
}
.sound-toggle-btn.sound-on svg {
  color: #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}

.spotlight-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(2, 6, 15, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 24px;
  animation: spotlightFadeIn 0.18s ease-out;
}

@keyframes spotlightFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.spotlight-palette {
  width: 100%;
  max-width: 640px;
  background: rgba(10, 18, 36, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(47, 156, 255, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spotlight-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.spotlight-search-icon {
  color: #38bdf8;
  display: flex;
  align-items: center;
}
.spotlight-search-icon svg {
  width: 20px;
  height: 20px;
}

.spotlight-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.spotlight-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  padding: 3px 6px;
  border-radius: 6px;
}

.spotlight-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spotlight-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
}

.spotlight-item:hover,
.spotlight-item.active {
  background: rgba(56, 189, 248, 0.12);
  border-left: 3px solid #38bdf8;
  transform: translateX(2px);
}

.spotlight-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.spotlight-item-icon svg {
  width: 18px;
  height: 18px;
}
.spotlight-item-icon.product-icon {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}

.spotlight-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.spotlight-item-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spotlight-cat-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.spotlight-item-text small {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight-item-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  color: #34d399;
}

.spotlight-enter-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #64748b;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.spotlight-item.active .spotlight-enter-kbd,
.spotlight-item:hover .spotlight-enter-kbd {
  opacity: 1;
  color: #38bdf8;
}

.spotlight-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: #64748b;
  font-size: 13.5px;
}
.spotlight-empty svg {
  width: 28px;
  height: 28px;
  opacity: 0.5;
}

.spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  color: #64748b;
}

.spotlight-footer kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 4px;
  border-radius: 4px;
  color: #94a3b8;
}

/* --- 2. Tê Sơn AI Assistant 24/7 --- */
.ai-chat-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  height: 580px;
  max-height: 85vh;
  margin: 0 auto;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ai-chat-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f9cff, #7ee7ff);
  color: #031024;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(47, 156, 255, 0.4);
}
.ai-chat-avatar svg {
  width: 22px;
  height: 22px;
}

.ai-chat-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-live-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
  letter-spacing: 0.3px;
}

.ai-chat-sub {
  font-size: 11.5px;
  color: #94a3b8;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-msg {
  display: flex;
  width: 100%;
}
.ai-msg-bot {
  justify-content: flex-start;
}
.ai-msg-user {
  justify-content: flex-end;
}

.ai-bubble {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.ai-msg-bot .ai-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  border-bottom-left-radius: 4px;
}
.ai-msg-bot .ai-bubble a {
  color: #38bdf8;
  font-weight: 700;
  text-decoration: underline;
}
.ai-msg-bot .ai-bubble code {
  background: rgba(0, 0, 0, 0.35);
  color: #7ee7ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.ai-msg-user .ai-bubble {
  background: linear-gradient(135deg, #2f9cff, #38bdf8);
  color: #031024;
  font-weight: 600;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(47, 156, 255, 0.3);
}

.ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px !important;
}
.ai-typing-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  animation: aiBounce 1.4s infinite ease-in-out both;
}
.ai-typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes aiBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* --- AI Reasoning & Thinking Box (DeepSeek / Gemini style) --- */
.ai-thought-box {
  margin-bottom: 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.ai-thought-box.is-thinking {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}
.ai-thought-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  background: rgba(56, 189, 248, 0.08);
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #7ee7ff;
}
.ai-thought-summary::-webkit-details-marker {
  display: none;
}
.ai-thought-sum-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ai-thought-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  letter-spacing: 0.2px;
}
.ai-thought-steps {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ai-thought-step {
  font-size: 11.5px;
  line-height: 1.45;
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ai-thought-step .ai-step-icon {
  color: #34d399;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.ai-thought-pulse-ring {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
  animation: aiPulseRing 1.2s infinite ease-in-out;
  flex-shrink: 0;
}
@keyframes aiPulseRing {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}
.ai-typing-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: aiSpin 0.7s infinite linear;
  margin-top: 2px;
  flex-shrink: 0;
}
@keyframes aiSpin {
  to { transform: rotate(360deg); }
}
.ai-bubble-thinking {
  padding: 4px 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
}

.ai-chat-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 16px;
  scrollbar-width: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}
.ai-chat-chips-scroll::-webkit-scrollbar {
  display: none;
}

.ai-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #7ee7ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ai-chip:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.ai-chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ai-chat-input-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

.ai-send-btn {
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  flex-shrink: 0;
}

.ai-live-tag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  letter-spacing: 0.3px;
}

/* --- 3. Affiliate / CTV Portal Pro --- */
.topline-aff-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24 !important;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  transition: all 0.2s ease;
  margin-right: 8px;
}
.topline-aff-pill:hover {
  background: rgba(251, 191, 36, 0.28);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.affiliate-chip {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: #fbbf24 !important;
}

.affiliate-hero {
  padding: 32px 0 24px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.affiliate-hero h1 {
  font-size: 32px;
  font-weight: 900;
  margin: 8px 0 12px;
  background: linear-gradient(135deg, #fff 40%, #7ee7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.affiliate-hero p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.6;
}

.affiliate-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.affiliate-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(10, 18, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.aff-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aff-stat-icon svg {
  width: 24px;
  height: 24px;
}

.aff-stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aff-stat-info span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
}
.aff-stat-info strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #f1f5f9;
}
.aff-stat-info strong small {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
}

.affiliate-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(14, 28, 56, 0.8), rgba(6, 12, 26, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(47, 156, 255, 0.12);
}

.aff-link-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aff-link-left h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.aff-link-left p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 8px;
}

.aff-input-group {
  display: flex;
  gap: 8px;
  max-width: 520px;
}
.aff-link-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #7ee7ff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}

.aff-code-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
}
.aff-code-badge code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.aff-link-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.aff-qr-frame {
  width: 140px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: #060a14;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.aff-qr-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.aff-link-qr small {
  font-size: 11px;
  color: #64748b;
}

.affiliate-steps-section {
  margin-bottom: 32px;
}
.affiliate-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.aff-step-card {
  background: rgba(10, 18, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aff-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 900;
  color: #38bdf8;
  opacity: 0.8;
}
.aff-step-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.aff-step-card p {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

.affiliate-history-section {
  margin-bottom: 40px;
}
.affiliate-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.affiliate-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(10, 18, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.affiliate-h-friend {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.affiliate-h-friend strong {
  font-size: 14px;
  color: #f1f5f9;
}
.affiliate-h-friend small {
  font-size: 12px;
  color: #64748b;
}
.affiliate-h-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.affiliate-h-amount span {
  font-size: 11.5px;
  color: #64748b;
}
.affiliate-h-amount b.positive {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 800;
  color: #34d399;
}

@media (max-width: 768px) {
  .affiliate-stats-grid,
  .affiliate-steps-grid {
    grid-template-columns: 1fr;
  }
  .affiliate-link-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .aff-input-group {
    flex-direction: column;
    width: 100%;
  }
}


/* ==========================================================================
   TÊ SƠN VN V10 — LUXE DIGITAL COMMERCE
   Premium visual override: glassmorphism, holographic FX, cinematic hero,
   refined admin console, Apple HIG spacing. Pure CSS cascade — no JS edits.
   ========================================================================== */

:root {
  --v10-bg: #020810;
  --v10-surface: #06101d;
  --v10-surface-2: #0a1829;
  --v10-surface-3: #0e2035;
  --v10-line: rgba(100,170,230,.14);
  --v10-line-strong: rgba(100,170,230,.28);
  --v10-text: #f0f6fc;
  --v10-text-2: #c8d6e5;
  --v10-muted: #6b8299;
  --v10-accent: var(--accent,#3b9eff);
  --v10-accent-soft: var(--accent-soft,#7ce8ff);
  --v10-success: #5cf0a8;
  --v10-danger: #ff6b7f;
  --v10-warning: #ffbe45;
  --v10-glass: rgba(8,18,32,.72);
  --v10-glass-border: rgba(130,190,240,.12);
  --v10-glass-blur: blur(24px) saturate(180%);
  --v10-shadow-xs: 0 4px 12px rgba(0,0,0,.12);
  --v10-shadow-sm: 0 8px 24px rgba(0,0,0,.16);
  --v10-shadow-md: 0 16px 48px rgba(0,0,0,.22);
  --v10-shadow-lg: 0 28px 80px rgba(0,0,0,.3);
  --v10-shadow-xl: 0 40px 120px rgba(0,0,0,.38);
  --v10-shadow-glow: 0 0 60px color-mix(in srgb,var(--v10-accent) 12%,transparent);
  --v10-r-xs: 8px; --v10-r-sm: 12px; --v10-r-md: 16px;
  --v10-r-lg: 22px; --v10-r-xl: 28px; --v10-r-2xl: 34px;
  --v10-ease: cubic-bezier(.22,1,.36,1);
  --v10-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --v10-ease-out: cubic-bezier(.16,1,.3,1);
  --v10-duration: .28s;
}

html { background: var(--v10-bg); scrollbar-color: color-mix(in srgb,var(--v10-accent) 25%,#0a1829) var(--v10-bg); }
body {
  background:
    radial-gradient(ellipse 900px 600px at 75% -10%,color-mix(in srgb,var(--v10-accent) 14%,transparent),transparent),
    radial-gradient(ellipse 600px 500px at -8% 40%,rgba(40,100,180,.08),transparent),
    radial-gradient(ellipse 400px 400px at 50% 100%,rgba(92,240,168,.03),transparent),
    linear-gradient(180deg,#030a14,#020810 50%,#030912);
  color: var(--v10-text);
}
body:before { opacity:.08; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
body:after { content:""; position:fixed; z-index:-2; width:50vw; height:50vw; max-width:600px; max-height:600px; right:-12vw; bottom:-20vh; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--v10-accent) 5%,transparent),transparent 60%); pointer-events:none; animation:v10-ambient 20s ease-in-out infinite alternate; }
@keyframes v10-ambient { to { transform:translate(-30px,20px) scale(1.1); } }
.route-stage { opacity:1; transform:none; transition:opacity .3s var(--v10-ease),transform .3s var(--v10-ease); animation:v10-route-appear .28s var(--v10-ease) both; }
.route-stage.route-ready { opacity:1; transform:none; }
::selection { background:color-mix(in srgb,var(--v10-accent) 40%,transparent); color:#fff; }

/* Topline */
.topline { background:linear-gradient(90deg,rgba(3,10,20,.95),rgba(8,18,32,.95)); border-bottom:1px solid var(--v10-line); backdrop-filter:blur(8px); position:relative; overflow:hidden; }
.topline:after { content:""; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v10-accent) 40%,transparent) 50%,transparent); }
.topline-status i { width:7px; height:7px; background:var(--v10-success); box-shadow:0 0 12px rgba(92,240,168,.5),0 0 4px rgba(92,240,168,.8); animation:v10-glow 2.5s ease-in-out infinite; }
@keyframes v10-glow { 0%,100%{box-shadow:0 0 8px rgba(92,240,168,.4)} 50%{box-shadow:0 0 16px rgba(92,240,168,.7),0 0 4px rgba(92,240,168,.9)} }

/* Header frosted glass */
.header { height:80px; background:rgba(3,9,18,.78); backdrop-filter:var(--v10-glass-blur); -webkit-backdrop-filter:var(--v10-glass-blur); border-bottom:1px solid var(--v10-glass-border); box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 -1px rgba(255,255,255,.02); position:sticky; top:0; z-index:90; }
.header:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v10-accent) 35%,transparent),transparent); opacity:.5; }
.brand-mark { width:44px; height:44px; border-radius:var(--v10-r-sm); background:linear-gradient(145deg,color-mix(in srgb,var(--v10-accent) 90%,#fff),var(--v10-accent)); box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 12px 28px color-mix(in srgb,var(--v10-accent) 22%,transparent),0 0 40px color-mix(in srgb,var(--v10-accent) 8%,transparent); transition:transform .3s var(--v10-ease),box-shadow .3s; }
.brand-mark:hover { transform:scale(1.05) rotate(-2deg); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 16px 36px color-mix(in srgb,var(--v10-accent) 28%,transparent),0 0 50px color-mix(in srgb,var(--v10-accent) 12%,transparent); }
.brand-word strong { font-weight:900; background:linear-gradient(135deg,#fff 20%,var(--v10-text-2) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Nav pills glassmorphism */
.nav { gap:4px; margin-left:22px; padding:4px; border:1px solid rgba(255,255,255,.04); border-radius:999px; background:rgba(255,255,255,.02); }
.nav a { padding:9px 15px; border-radius:999px; font-size:11px; font-weight:650; color:#8ca0b5; transition:all .2s var(--v10-ease); }
.nav a:hover { color:#e0ecf6; background:rgba(255,255,255,.04); }
.nav a.active { color:#fff; background:color-mix(in srgb,var(--v10-accent) 14%,rgba(255,255,255,.03)); box-shadow:0 0 20px color-mix(in srgb,var(--v10-accent) 6%,transparent); }
.nav a.active:after { display:none; }

/* Buttons — Glass + Glow */
.icon-btn { width:42px; height:42px; min-width:42px; min-height:42px; border:1px solid rgba(120,180,230,.1); border-radius:var(--v10-r-sm); background:rgba(8,18,30,.6); color:var(--v10-text-2); transition:all .2s var(--v10-ease); }
.icon-btn:hover { background:rgba(15,30,48,.8); border-color:rgba(120,180,230,.2); color:#fff; transform:translateY(-1px); box-shadow:var(--v10-shadow-xs); }
.cart-count { background:linear-gradient(135deg,var(--v10-accent),var(--v10-accent-soft)); color:#031220; font-weight:900; border:2px solid var(--v10-bg); box-shadow:0 0 12px color-mix(in srgb,var(--v10-accent) 30%,transparent); }
.button { border-radius:var(--v10-r-sm); border:1px solid rgba(100,170,230,.15); background:rgba(10,22,38,.8); color:var(--v10-text); min-height:46px; font-weight:700; position:relative; overflow:hidden; transition:all var(--v10-duration) var(--v10-ease); }
.button:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.12) 45%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--v10-ease); }
.button:hover:before { transform:translateX(120%); }
.button:hover { transform:translateY(-2px); border-color:rgba(100,170,230,.25); background:rgba(14,28,46,.9); box-shadow:var(--v10-shadow-sm); }
.button:active { transform:translateY(0) scale(.98); }
.button.primary { background:linear-gradient(135deg,var(--v10-accent),color-mix(in srgb,var(--v10-accent) 65%,var(--v10-accent-soft))); border-color:color-mix(in srgb,var(--v10-accent) 80%,#fff); color:#021220; font-weight:800; box-shadow:0 12px 32px color-mix(in srgb,var(--v10-accent) 20%,transparent),inset 0 1px rgba(255,255,255,.3); }
.button.primary:hover { filter:brightness(1.12); box-shadow:0 18px 44px color-mix(in srgb,var(--v10-accent) 28%,transparent),inset 0 1px rgba(255,255,255,.35),0 0 30px color-mix(in srgb,var(--v10-accent) 10%,transparent); }
.button.ghost { background:rgba(5,12,22,.5); border-color:rgba(100,170,230,.12); }
.button.ghost:hover { background:rgba(10,22,38,.7); border-color:rgba(100,170,230,.22); }
.button.danger { color:var(--v10-danger); border-color:rgba(255,107,127,.2); }
.eyebrow { color:var(--v10-accent-soft); font-weight:850; letter-spacing:.2em; }

/* Hero cinematic */
.commerce-hero { min-height:670px; border:1px solid rgba(80,150,210,.18); border-radius:var(--v10-r-2xl); margin-top:28px; padding:68px 64px; background:radial-gradient(ellipse 700px 500px at 80% 30%,color-mix(in srgb,var(--v10-accent) 18%,transparent),transparent),radial-gradient(ellipse 400px 300px at 20% 80%,rgba(92,240,168,.04),transparent),linear-gradient(115deg,rgba(5,14,26,.99),rgba(8,20,35,.97) 48%,rgba(4,12,22,.94)); box-shadow:var(--v10-shadow-xl),inset 0 1px rgba(255,255,255,.03); isolation:isolate; overflow:hidden; }
.commerce-hero:before { content:""; position:absolute; width:550px; height:550px; right:-100px; top:-200px; border-radius:50%; border:1px solid color-mix(in srgb,var(--v10-accent) 18%,transparent); box-shadow:0 0 80px color-mix(in srgb,var(--v10-accent) 5%,transparent); animation:v10-orbit 18s ease-in-out infinite alternate; pointer-events:none; }
.commerce-hero:after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.03) 48%,transparent 66%); transform:translateX(-50%); animation:v10-sheen 14s ease-in-out infinite; }
.hero-atmosphere:after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(100,170,230,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(100,170,230,.03) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(100deg,transparent 5%,#000 55%,transparent 100%); pointer-events:none; }
.commerce-hero-copy { position:relative; z-index:3; }
.commerce-hero-copy>* { animation:v10-rise .7s var(--v10-ease) both; }
.commerce-hero-copy>*:nth-child(2){animation-delay:.06s} .commerce-hero-copy>*:nth-child(3){animation-delay:.12s} .commerce-hero-copy>*:nth-child(4){animation-delay:.18s} .commerce-hero-copy>*:nth-child(5){animation-delay:.24s} .commerce-hero-copy>*:nth-child(6){animation-delay:.3s} .commerce-hero-copy>*:nth-child(7){animation-delay:.36s}
.commerce-hero-copy h1 { font-size:clamp(52px,5.8vw,92px); line-height:.94; letter-spacing:-.068em; color:#f7fbff; }
.commerce-hero-copy h2 { font-size:clamp(20px,2.2vw,32px); letter-spacing:-.035em; background:linear-gradient(90deg,var(--v10-accent-soft),var(--v10-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.commerce-hero-copy>p { color:#8da5ba; font-size:14.5px; line-height:1.85; max-width:620px; }
.hero-proof { border-top:1px solid rgba(100,170,230,.1); }
.hero-proof .icon { color:var(--v10-accent-soft); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--v10-accent-soft) 30%,transparent)); }
.stage-device { border:1px solid rgba(60,130,200,.25); border-radius:24px; background:linear-gradient(155deg,#10253c,#06121e); box-shadow:0 50px 100px rgba(0,0,0,.5),0 0 80px color-mix(in srgb,var(--v10-accent) 6%,transparent),inset 0 1px rgba(255,255,255,.04); animation:v10-float 7s ease-in-out infinite; }
.stage-screen strong { background:linear-gradient(135deg,#fff,var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.floating-product { background:var(--v10-glass); border:1px solid var(--v10-glass-border); backdrop-filter:var(--v10-glass-blur); -webkit-backdrop-filter:var(--v10-glass-blur); box-shadow:var(--v10-shadow-md); animation:v10-float-mini 5.5s ease-in-out infinite; }
.fp-b{animation-delay:-1.4s} .fp-c{animation-delay:-2.8s}
@keyframes v10-orbit { to{transform:translate(-25px,22px) rotate(6deg) scale(1.06)} }
@keyframes v10-sheen { 0%,60%{transform:translateX(-60%)} 80%,100%{transform:translateX(60%)} }
@keyframes v10-rise { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes v10-float { 50%{transform:perspective(1000px) rotateY(-14deg) rotateX(7deg) rotateZ(-2deg) translateY(-8px)} }
@keyframes v10-float-mini { 50%{transform:translateY(-6px)} }

/* Topup portal glass */
.portal-combined-container { border:1.5px solid var(--v10-glass-border); border-radius:var(--v10-r-lg); background:radial-gradient(130% 100% at 50% 0%, #0d1e33 0%, #060c16 100%); box-shadow:var(--v10-shadow-lg); overflow:hidden; }
.portal-banner-link { transition:transform .3s var(--v10-ease),filter .3s; }
.portal-banner-link:hover { transform:scale(1.02); filter:brightness(1.08); }

/* Benefits strip */
.commerce-benefits { border:1px solid var(--v10-line); border-radius:var(--v10-r-lg); background:var(--v10-glass); backdrop-filter:blur(12px); overflow:hidden; margin-top:18px; }
.commerce-benefits article { border-color:var(--v10-line); transition:background .2s; padding:22px 24px; }
.commerce-benefits article:hover { background:rgba(255,255,255,.02); }
.commerce-benefits .icon { color:var(--v10-accent); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--v10-accent) 25%,transparent)); }

/* Product cards — Holographic */
.product-card.product-row { background:linear-gradient(155deg,rgba(8,22,38,.97),rgba(5,14,26,.98)); border:1px solid var(--v10-line); border-radius:var(--v10-r-xl); overflow:hidden; position:relative; box-shadow:var(--v10-shadow-sm); transition:all .32s var(--v10-ease); }
.product-card.product-row:before { content:""!important; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,transparent 20%,color-mix(in srgb,var(--v10-accent) 25%,transparent) 40%,rgba(255,255,255,.1) 50%,color-mix(in srgb,var(--v10-accent-soft) 20%,transparent) 60%,transparent 80%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s var(--v10-ease); }
.product-card.product-row:hover:before { opacity:1; }
.product-card.product-row:after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.035) 48%,transparent 62%); opacity:0; transition:opacity .35s; }
.product-card.product-row:hover:after { opacity:1; }
.product-card.product-row:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--v10-accent) 30%,var(--v10-line)); box-shadow:var(--v10-shadow-lg),0 0 40px color-mix(in srgb,var(--v10-accent) 4%,transparent); }
.product-card.product-row .product-visual { background:radial-gradient(circle at 50% 45%,color-mix(in srgb,currentColor 16%,transparent),transparent 50%),linear-gradient(150deg,#0a1c2d,#06111c); }
.product-card.product-row .product-art { transition:transform .45s var(--v10-ease),filter .35s; }
.product-card.product-row:hover .product-art { transform:translateY(-5px) scale(1.04) rotate(-2deg); filter:drop-shadow(0 20px 32px rgba(0,0,0,.5)); }
.product-card.product-row .product-image { transition:transform .5s var(--v10-ease),filter .3s; }
.product-card.product-row:hover .product-image { transform:scale(1.04); filter:brightness(1.06) contrast(1.02); }
.product-card.product-row .product-content h3 { font-size:clamp(22px,2.2vw,30px); letter-spacing:-.04em; line-height:1.1; }
.product-card.product-row .product-content h3 a { background-image:linear-gradient(var(--v10-accent-soft),var(--v10-accent-soft)); background-position:0 100%; background-size:0 1.5px; background-repeat:no-repeat; transition:background-size .3s var(--v10-ease); }
.product-card.product-row:hover .product-content h3 a { background-size:100% 1.5px; }
.product-stock.in i { background:var(--v10-success); box-shadow:0 0 10px rgba(92,240,168,.5); animation:v10-pulse 2.8s ease-in-out infinite; }
@keyframes v10-pulse { 0%,100%{box-shadow:0 0 6px rgba(92,240,168,.3)} 50%{box-shadow:0 0 0 4px rgba(92,240,168,0),0 0 12px rgba(92,240,168,.5)} }
.product-price-block .price { font-weight:900; background:linear-gradient(135deg,#fff,var(--v10-text-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.discount-chip { background:rgba(92,240,168,.08)!important; border:1px solid rgba(92,240,168,.2)!important; color:var(--v10-success)!important; font-weight:900!important; }
.add-button { background:linear-gradient(135deg,var(--v10-accent),color-mix(in srgb,var(--v10-accent) 70%,var(--v10-accent-soft))); border:none; color:#021220; box-shadow:0 8px 24px color-mix(in srgb,var(--v10-accent) 18%,transparent); transition:all .2s var(--v10-ease); }
.add-button:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 14px 32px color-mix(in srgb,var(--v10-accent) 26%,transparent); filter:brightness(1.12); }

/* Category chips premium */
.category-chip { background:linear-gradient(145deg,rgba(8,22,38,.9),rgba(6,16,28,.9))!important; border:1px solid var(--v10-line)!important; border-radius:var(--v10-r-md)!important; backdrop-filter:blur(8px); transition:all .25s var(--v10-ease)!important; }
.category-chip:hover { transform:translateY(-2px); border-color:rgba(100,170,230,.25)!important; box-shadow:var(--v10-shadow-xs); }
.category-chip.active { border-color:color-mix(in srgb,var(--v10-accent) 50%,var(--v10-line))!important; background:linear-gradient(145deg,color-mix(in srgb,var(--v10-accent) 12%,rgba(8,22,38,.95)),rgba(6,16,28,.95))!important; box-shadow:0 0 24px color-mix(in srgb,var(--v10-accent) 6%,transparent),inset 0 0 20px color-mix(in srgb,var(--v10-accent) 4%,transparent); }

/* Brand story immersive */
.brand-story-v4 { border:1px solid var(--v10-line); border-radius:var(--v10-r-xl); background:var(--v10-surface); box-shadow:var(--v10-shadow-lg); overflow:hidden; }
.story-visual { background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--v10-accent) 22%,transparent),transparent 35%),linear-gradient(145deg,#071522,#040d16); }
.story-visual>span { background:linear-gradient(135deg,#fff,var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 50px color-mix(in srgb,var(--v10-accent) 30%,transparent)); }
.story-stats>div { border-color:var(--v10-line); transition:background .2s; }
.story-stats>div:hover { background:rgba(255,255,255,.02); }
.story-stats strong { background:linear-gradient(135deg,var(--v10-accent),var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Panels, forms — refined glass */
.panel,.info-panel,.ticket,.order-card { border:1px solid var(--v10-line); border-radius:var(--v10-r-lg); background:linear-gradient(155deg,rgba(8,22,38,.95),rgba(5,14,26,.98)); box-shadow:var(--v10-shadow-sm); }
.toolbar { position:relative; top:auto; z-index:35; background:rgba(5,12,22,.85); backdrop-filter:var(--v10-glass-blur); -webkit-backdrop-filter:var(--v10-glass-blur); border:1px solid var(--v10-line); border-radius:var(--v10-r-md); padding:12px; }
input,select,textarea { background:rgba(5,14,26,.8); border:1px solid rgba(100,170,230,.14); border-radius:var(--v10-r-sm); color:var(--v10-text); transition:all .2s var(--v10-ease); }
input:hover,select:hover,textarea:hover { border-color:rgba(100,170,230,.25); }
input:focus,select:focus,textarea:focus { border-color:var(--v10-accent); background:rgba(8,20,34,.9); box-shadow:0 0 0 4px color-mix(in srgb,var(--v10-accent) 8%,transparent),0 0 20px color-mix(in srgb,var(--v10-accent) 4%,transparent); }

/* Product detail premium */
.product-detail { border:1px solid var(--v10-line-strong); border-radius:var(--v10-r-2xl); background:linear-gradient(155deg,rgba(8,24,40,.98),rgba(5,14,26,.99)); box-shadow:var(--v10-shadow-lg); padding:32px; }
.product-detail .product-visual { border-radius:var(--v10-r-xl); box-shadow:var(--v10-shadow-lg); }
.detail-price { border-radius:var(--v10-r-lg); background:linear-gradient(145deg,rgba(8,24,38,.95),rgba(6,16,28,.98)); border:1px solid var(--v10-line); box-shadow:var(--v10-shadow-sm); }
.detail-price .price { background:linear-gradient(135deg,#fff,var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.feature-item { border:1px solid var(--v10-line); background:rgba(7,20,34,.7); border-radius:var(--v10-r-md); transition:all .25s var(--v10-ease); }
.feature-item:hover { transform:translateY(-3px); border-color:rgba(100,170,230,.25); box-shadow:var(--v10-shadow-sm); }
.feature-item .icon { color:var(--v10-accent); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--v10-accent) 20%,transparent)); }

/* Modal cinematic */
.modal-backdrop { background:rgba(2,6,14,.75); backdrop-filter:blur(12px) saturate(130%); -webkit-backdrop-filter:blur(12px) saturate(130%); }
.modal { border:1px solid var(--v10-line-strong); border-radius:var(--v10-r-xl); background:linear-gradient(165deg,rgba(10,24,40,.98),rgba(6,14,26,.99)); box-shadow:var(--v10-shadow-xl); animation:v10-modal .35s var(--v10-ease) both; }
@keyframes v10-modal { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }
.auth-brand-panel { background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--v10-accent) 22%,transparent),transparent 22rem),linear-gradient(155deg,#0a2438,#06141f 68%,#050f18); }
.auth-success-icon { background:linear-gradient(135deg,var(--v10-accent),var(--v10-accent-soft)); box-shadow:0 20px 60px color-mix(in srgb,var(--v10-accent) 25%,transparent); }

/* Footer premium */
.newsletter { border-radius:var(--v10-r-2xl); border:1px solid var(--v10-line-strong); background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--v10-accent) 14%,transparent),transparent 24rem),linear-gradient(125deg,#081c2e,#06121d); box-shadow:var(--v10-shadow-lg); position:relative; overflow:hidden; }
.newsletter:before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.02) 48%,transparent 66%); animation:v10-sheen 12s ease-in-out infinite; pointer-events:none; }
.newsletter h2 span { background:linear-gradient(90deg,var(--v10-accent-soft),var(--v10-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer { border-top:1px solid var(--v10-line); }
.footer h4 { color:var(--v10-muted); }
.footer a:hover { color:var(--v10-accent-soft); }
.footer-seal { border:1px solid var(--v10-line); color:var(--v10-muted); transition:all .2s; }
.footer-seal:hover { border-color:var(--v10-line-strong); color:var(--v10-text-2); }
.footer-bottom { border-color:var(--v10-line); }

/* Admin console premium */
.admin-shell { border:1px solid var(--v10-line); border-radius:var(--v10-r-xl); background:var(--v10-bg); overflow:hidden; margin-top:28px; box-shadow:var(--v10-shadow-lg); }
.admin-sidebar { background:linear-gradient(180deg,rgba(7,18,30,.98),rgba(4,11,20,.99)); border-right:1px solid var(--v10-line); padding:26px 16px; }
.admin-label { color:var(--v10-muted); font-size:8px; letter-spacing:.2em; font-weight:850; }
.admin-nav a { min-height:46px; border-radius:var(--v10-r-sm); padding:11px 14px; border:1px solid transparent; transition:all .2s var(--v10-ease); font-weight:650; }
.admin-nav a:hover { background:rgba(255,255,255,.02); border-color:rgba(100,170,230,.06); transform:translateX(3px); }
.admin-nav a.active { background:linear-gradient(90deg,color-mix(in srgb,var(--v10-accent) 12%,transparent),rgba(8,28,44,.3)); border-color:rgba(100,170,230,.15); color:#eaf7ff; box-shadow:inset 3px 0 var(--v10-accent); }
.admin-nav a .icon { color:var(--v10-muted); transition:color .2s; }
.admin-nav a.active .icon { color:var(--v10-accent); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--v10-accent) 30%,transparent)); }
.admin-main { padding:36px; background:linear-gradient(180deg,rgba(5,12,20,.6),rgba(3,9,16,.8)); }
.admin-heading { padding-bottom:26px; border-bottom:1px solid var(--v10-line); }
.admin-heading h1 { font-size:36px; letter-spacing:-.05em; background:linear-gradient(135deg,#fff,var(--v10-text-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Stats cards */
.stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stat { border-radius:var(--v10-r-lg); background:linear-gradient(155deg,rgba(8,24,38,.9),rgba(5,16,28,.95)); border:1px solid var(--v10-line); min-height:130px; position:relative; overflow:hidden; transition:all .25s var(--v10-ease); }
.stat:hover { transform:translateY(-2px); border-color:rgba(100,170,230,.22); box-shadow:var(--v10-shadow-sm); }
.stat:after { content:""; position:absolute; width:120px; height:120px; right:-40px; top:-50px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--v10-accent) 8%,transparent),transparent 65%); pointer-events:none; }
.stat strong { font-size:28px; font-weight:900; letter-spacing:-.04em; background:linear-gradient(135deg,#fff,var(--v10-text-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .icon { color:var(--v10-accent); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--v10-accent) 20%,transparent)); }
.stat small { color:var(--v10-muted); }

/* Tables */
.table-wrap { border:1px solid var(--v10-line); border-radius:var(--v10-r-lg); background:rgba(7,18,30,.7); box-shadow:var(--v10-shadow-sm); overflow:hidden; }
.table-wrap th { background:rgba(8,24,38,.9); color:var(--v10-muted); border-color:var(--v10-line); position:sticky; top:0; z-index:2; font-weight:750; letter-spacing:.03em; }
.table-wrap td { border-color:rgba(100,170,230,.08); transition:background .15s; }
.table-wrap tr:hover td { background:rgba(15,35,55,.3); }
.chart-bar { background:linear-gradient(180deg,var(--v10-accent),color-mix(in srgb,var(--v10-accent) 30%,#071521)); box-shadow:0 0 18px color-mix(in srgb,var(--v10-accent) 12%,transparent); border-radius:6px 6px 0 0; }

/* Status pills refined */
.status-pill { border:1px solid rgba(100,170,230,.15); background:rgba(10,22,36,.8); font-weight:800; letter-spacing:.04em; }
.status-pill.paid,.status-pill.matched,.status-pill.answered,.status-pill.resolved { color:var(--v10-success); border-color:rgba(92,240,168,.2); background:rgba(92,240,168,.06); }
.status-pill.cancelled,.status-pill.expired,.status-pill.refunded { color:var(--v10-danger); border-color:rgba(255,107,127,.2); background:rgba(255,107,127,.05); }
.status-pill.pending,.status-pill.review,.status-pill.open { color:var(--v10-warning); border-color:rgba(255,190,69,.2); background:rgba(255,190,69,.05); }

/* System bar */
.admin-system-bar { border:1px solid var(--v10-line); background:var(--v10-glass); backdrop-filter:var(--v10-glass-blur); -webkit-backdrop-filter:var(--v10-glass-blur); box-shadow:var(--v10-shadow-md); }
.admin-system-bar i { background:var(--v10-success); box-shadow:0 0 10px rgba(92,240,168,.5); animation:v10-glow 2.5s ease-in-out infinite; }

/* Toast premium */
#toast { background:var(--v10-glass); backdrop-filter:var(--v10-glass-blur); -webkit-backdrop-filter:var(--v10-glass-blur); border:1px solid var(--v10-glass-border); box-shadow:var(--v10-shadow-lg); border-radius:var(--v10-r-md); color:var(--v10-text); font-weight:600; }
#toast.show { animation:v10-toast .35s var(--v10-ease-bounce); }
@keyframes v10-toast { from{transform:translate(-50%,20px) scale(.96);opacity:0} to{transform:translate(-50%,0) scale(1);opacity:1} }

/* Wallet refined */
.wallet-hero { border:1px solid color-mix(in srgb,var(--v10-accent) 25%,var(--v10-line)); border-radius:var(--v10-r-lg); background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--v10-accent) 22%,transparent),transparent 40%),linear-gradient(135deg,#0a2438,#071521); box-shadow:var(--v10-shadow-md); position:relative; overflow:hidden; isolation:isolate; }
.wallet-hero:before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.04) 48%,transparent 66%); animation:v10-sheen 8s ease-in-out infinite; pointer-events:none; }
.wallet-hero strong { background:linear-gradient(135deg,#fff,var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-wallet-balance] { font-variant-numeric:tabular-nums; }
.wallet-flash { animation:v10-wallet 1s var(--v10-ease); }
@keyframes v10-wallet { 0%{transform:scale(1)} 25%{transform:scale(1.06);color:var(--v10-success);text-shadow:0 0 24px rgba(92,240,168,.4)} 100%{transform:scale(1);text-shadow:none} }

/* Apple entry card */
.apple-entry { border:1px solid var(--v10-line); border-radius:var(--v10-r-xl); background:radial-gradient(circle at 80% 30%,color-mix(in srgb,var(--v10-accent) 10%,transparent),transparent 30%),var(--v10-surface); box-shadow:var(--v10-shadow-sm); transition:all .3s var(--v10-ease); }
.apple-entry:hover { border-color:var(--v10-line-strong); box-shadow:var(--v10-shadow-md); transform:translateY(-2px); }

/* Boot */
.boot { background:radial-gradient(circle,color-mix(in srgb,var(--v10-accent) 6%,transparent),transparent 20rem); }
.boot b { background:linear-gradient(135deg,#fff,var(--v10-accent-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; animation:v10-boot 2s ease-in-out infinite; }
@keyframes v10-boot { 0%,100%{opacity:1} 50%{opacity:.7} }

/* Performance */
@supports(content-visibility:auto) { .product-card.product-row,.commerce-benefits article,.stat,.order-card,.ticket { content-visibility:auto; contain-intrinsic-size:1px 300px; } }

/* V10 Responsive */
@media(max-width:1100px) { .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .commerce-hero{padding:52px 44px;min-height:580px} .commerce-hero-copy h1{font-size:clamp(48px,5.2vw,72px)} }
@media(max-width:760px) { .wrap{width:min(100% - 26px,1480px)} .header{height:72px} .nav,.desktop-favorite,.account-button{display:none} .topline-promise{display:none} .commerce-hero{margin-top:14px;padding:36px 24px 28px;border-radius:var(--v10-r-xl);min-height:0} .commerce-hero-copy h1{font-size:44px} .commerce-hero-copy h2{font-size:19px} .commerce-hero-copy>p{font-size:12px} .commerce-hero .hero-buttons{display:grid;grid-template-columns:1fr} .commerce-hero-stage{height:280px} .commerce-benefits{grid-template-columns:1fr 1fr;border-radius:var(--v10-r-md)} .category-filters{display:flex;overflow:auto;scroll-snap-type:x mandatory} .category-chip{min-width:180px;scroll-snap-align:start} .product-card.product-row{border-radius:var(--v10-r-lg);min-height:0} .toolbar{top:80px} .stat-grid{grid-template-columns:1fr 1fr} .admin-shell{display:block;border-radius:var(--v10-r-lg);margin-top:14px} .admin-sidebar{border-right:0;border-bottom:1px solid var(--v10-line);padding:14px} .admin-nav{display:flex;overflow:auto;flex-direction:row;gap:7px} .admin-nav a{white-space:nowrap;min-height:40px} .admin-nav a:hover{transform:none} .admin-main{padding:20px 14px 32px} .admin-heading h1{font-size:28px} }
@media(max-width:520px) { .commerce-hero-copy h1{font-size:40px} .commerce-benefits{grid-template-columns:1fr} .stat-grid{grid-template-columns:1fr} .page-header h1{font-size:34px} .brand-mark{width:38px;height:38px} .header{height:66px} }
@media(prefers-reduced-motion:reduce) { .route-stage{opacity:1;transform:none;transition:none} body:after,.commerce-hero:before,.commerce-hero:after,.floating-product,.stage-device,.newsletter:before,.wallet-hero:before,.product-stock.in i,.topline-status i,.boot b,.admin-system-bar i{animation:none!important} .product-card.product-row,.button,.icon-btn{transition:none!important} .product-card.product-row:hover{transform:none} .button:before{display:none} }

/* Khóa cố định thanh tìm kiếm / phân loại sản phẩm, không chạy bám theo khi cuộn */
.toolbar,
.filters.category-filters,
.section .toolbar {
  position: relative !important;
  top: auto !important;
  box-shadow: none !important;
}

/* Khắc phục lỗi nút gửi thẻ / nạp tiền bị panel lịch sử đè lên trên mobile & tablet */
.topup-layout {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
  gap: 20px;
  align-items: start;
}

#card-form button,
#bank-topup-form button {
  margin-top: 14px;
}

@media (min-width: 901px) {
  .topup-form-panel {
    position: sticky !important;
    top: 114px !important;
    align-self: start;
  }
}

@media (max-width: 900px) {
  .topup-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .topup-form-panel,
  .topup-layout > .panel:first-child,
  .topup-layout > section:first-child {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0 !important;
    align-self: auto !important;
  }
}

@media (max-width: 520px) {
  .topup-layout {
    gap: 14px !important;
  }
  .topup-form-panel .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ẨN TRIỆT ĐỂ THANH CUỘN SCROLLBAR TRÊN DANH MỤC VÀ BỘ LỌC */
.category-filters,
.category-strip,
.filters {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.category-filters::-webkit-scrollbar,
.category-strip::-webkit-scrollbar,
.filters::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* TỐI ƯU CẢM ỨNG VÀ CHUYỂN ĐỘNG CHO CHIP DANH MỤC */
.category-chip {
  touch-action: pan-x !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: pointer !important;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.16s ease, border-color 0.16s ease !important;
}
.category-chip:active {
  transform: scale(0.96) !important;
}

/* ==========================================================================
   TESON HYPERDIMENSION V16 5D INTEGRATED STYLING SYSTEM
   ========================================================================== */

/* 1. Spatial Background & Hyperfield Depth Layers */
#world-gpu {
  position: fixed;
  inset: 0;
  z-index: -10;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: #020617;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#world {
  position: fixed;
  inset: 0;
  z-index: -9;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: transparent;
}

.world-tint {
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(35, 110, 240, 0.12), transparent 50%),
              radial-gradient(circle at 85% 65%, rgba(168, 85, 247, 0.08), transparent 45%),
              linear-gradient(180deg, rgba(2, 6, 23, 0.25) 0%, rgba(3, 7, 24, 0.75) 100%);
}

.hyperfield {
  position: fixed;
  inset: 0;
  z-index: -7;
  pointer-events: none;
  overflow: hidden;
}

.field-core {
  position: absolute;
  width: 600px;
  height: 600px;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 255, 0.06), rgba(99, 102, 241, 0.04) 40%, transparent 70%);
  filter: blur(40px);
  animation: v16CorePulse 8s ease-in-out infinite alternate;
}

.field-ring {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%) rotateX(70deg);
  width: 750px;
  height: 750px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 245, 255, 0.15);
  box-shadow: 0 0 50px rgba(0, 245, 255, 0.08), inset 0 0 50px rgba(168, 85, 247, 0.05);
  animation: v16RingSpin 40s linear infinite;
}

.field-ring.secondary {
  width: 950px;
  height: 950px;
  border-style: solid;
  border-color: rgba(168, 85, 247, 0.12);
  animation-duration: 60s;
  animation-direction: reverse;
}

.field-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100vh;
  background: linear-gradient(180deg, transparent, rgba(0, 245, 255, 0.3) 30%, rgba(168, 85, 247, 0.3) 70%, transparent);
  opacity: 0.4;
  transform: translateX(-50%);
  filter: blur(1px);
}

@keyframes v16CorePulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes v16RingSpin {
  to { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}

/* 2. Adaptive FPS Governor HUD & Controls */
.fps-hud {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(7, 16, 39, 0.90);
  border: 1px solid rgba(0, 245, 255, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 245, 255, 0.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: none;
  pointer-events: auto;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.fps-hud:hover {
  border-color: rgba(0, 245, 255, 0.7);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 245, 255, 0.3);
  transform: translateY(-2px);
}

.fps-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow: 0 0 10px #00f5ff, 0 0 20px #00f5ff;
  animation: v16LedBlink 2.4s infinite;
}

@keyframes v16LedBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.fps-big {
  font-size: 14.5px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.fps-big span {
  color: #00f5ff;
}

.fps-sub {
  font-size: 9.5px;
  color: #8da4c4;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.fps-hud[data-fps-tier="tier-ultra"] .fps-big span { color: #38bdf8; }
.fps-hud[data-fps-tier="tier-high"] .fps-big span { color: #34d399; }
.fps-hud[data-fps-tier="tier-mid"] .fps-big span { color: #fbbf24; }
.fps-hud[data-fps-tier="tier-low"] .fps-big span { color: #f87171; }

.fx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(0, 245, 255, 0.35);
  background: rgba(14, 28, 64, 0.7);
  color: #a5f3fc;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
}

.fx-btn:hover {
  background: rgba(0, 245, 255, 0.18);
  border-color: #00f5ff;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 245, 255, 0.35);
  transform: translateY(-1px);
}

.fx-btn.eco-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border-color: #f59e0b;
  color: #fef3c7;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35);
}

/* 3. Cinematic 5D Portal Traversal Screen (#transit) */
#transit {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #020412;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
  perspective: 1000px;
}

#transit.on {
  opacity: 1;
  pointer-events: auto;
}

.transit-sky {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 245, 255, 0.25), rgba(168, 85, 247, 0.2) 30%, transparent 65%);
  transform-origin: 50% 50%;
  animation: v16TransitSpin 20s linear infinite;
}

.transit-ring {
  position: absolute;
  width: min(78vmin, 720px);
  height: min(78vmin, 720px);
  border-radius: 50%;
  border: 3px solid rgba(0, 245, 255, 0.6);
  box-shadow: 0 0 45px rgba(0, 245, 255, 0.5), inset 0 0 50px rgba(0, 245, 255, 0.3);
  transform: perspective(1000px) rotateX(68deg) scale(0.05);
  opacity: 0;
}

#transit .transit-ring:nth-of-type(2n) {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.5), inset 0 0 35px rgba(168, 85, 247, 0.35);
}

#transit.on .transit-ring {
  animation: v16TransitZoom 1.25s cubic-bezier(0.1, 0.65, 0.05, 1) both;
}

#transit.on .transit-ring:nth-of-type(1) { animation-delay: 0s; }
#transit.on .transit-ring:nth-of-type(2) { animation-delay: 0.07s; }
#transit.on .transit-ring:nth-of-type(3) { animation-delay: 0.14s; }
#transit.on .transit-ring:nth-of-type(4) { animation-delay: 0.21s; }
#transit.on .transit-ring:nth-of-type(5) { animation-delay: 0.28s; }
#transit.on .transit-ring:nth-of-type(6) { animation-delay: 0.35s; }

.transit-center {
  position: relative;
  z-index: 10;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}

#transit.on .transit-center {
  animation: v16TransitCaption 1.15s ease-in-out both;
}

.transit-hex {
  font-size: 52px;
  line-height: 1;
  color: #00f5ff;
  text-shadow: 0 0 35px #00f5ff, 0 0 60px rgba(0, 245, 255, 0.8);
}

.transit-title {
  font-weight: 900;
  font-size: clamp(24px, 4.5vw, 48px);
  letter-spacing: -1.5px;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(0, 245, 255, 0.6), 0 0 50px rgba(168, 85, 247, 0.4);
}

.transit-eyebrow {
  font: 800 11px ui-monospace, monospace;
  color: #93c5fd;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#transit:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(220, 250, 255, 0.7), rgba(0, 245, 255, 0.2) 30%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

#transit.on:after {
  animation: v16TransitFlash 1.2s ease-in both;
}

@keyframes v16TransitZoom {
  0% { transform: perspective(1000px) rotateX(72deg) scale(0.04); opacity: 0; }
  25% { opacity: 0.95; }
  75% { opacity: 1; }
  100% { transform: perspective(1000px) rotateX(0deg) scale(5); opacity: 0; }
}

@keyframes v16TransitSpin {
  to { transform: rotate(360deg); }
}

@keyframes v16TransitCaption {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 1; transform: scale(1.04); }
  75% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes v16TransitFlash {
  0%, 55% { opacity: 0; }
  70% { opacity: 0.65; }
  100% { opacity: 0; }
}

/* 4. 3D Holographic Viewport & Real Commerce Modal (#dimension-modal) */
#dimension-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: v16ModalBackdrop 0.35s ease both;
}

#dimension-modal[hidden] {
  display: none !important;
}

.dimension-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  width: min(920px, 100%);
  max-height: min(92vh, 860px);
  overflow: auto;
  border-radius: 28px;
  background: radial-gradient(ellipse at 25% 30%, rgba(30, 64, 175, 0.25), transparent 60%),
              linear-gradient(135deg, #0d1533, #080d24 60%, #150f33);
  border: 1px solid rgba(0, 245, 255, 0.4);
  box-shadow: 0 0 100px rgba(0, 245, 255, 0.2), 0 30px 100px rgba(0, 0, 0, 0.75), inset 0 1px rgba(255, 255, 255, 0.2);
  animation: v16DialogIn 0.5s cubic-bezier(0.18, 0.8, 0.18, 1) both;
}

.dimension-dialog.purple {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 100px rgba(168, 85, 247, 0.25), 0 30px 100px rgba(0, 0, 0, 0.75), inset 0 1px rgba(255, 255, 255, 0.2);
}

.dimension-art {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(0, 245, 255, 0.12), transparent 70%);
  display: grid;
  place-items: center;
}

.dimension-art::before {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(0, 245, 255, 0.35);
  border-radius: 50%;
  animation: v16OrbitTurn 22s linear infinite;
}

.dimension-art::after {
  content: '';
  position: absolute;
  width: 72%;
  height: 72%;
  border: 2px solid rgba(0, 245, 255, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(0, 245, 255, 0.2), inset 0 0 35px rgba(0, 245, 255, 0.15);
  transform: rotateX(65deg);
  animation: v16DialogOrbit 7s linear infinite;
}

.dimension-art canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 420px;
  touch-action: pan-y;
  cursor: grab;
}

.dimension-art canvas:active {
  cursor: grabbing;
}

.art-label {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 24px;
  color: #00f5ff;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(4, 10, 28, 0.65);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 245, 255, 0.3);
}

.dimension-copy {
  padding: 50px 36px 36px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  position: relative;
  z-index: 4;
}

.dimension-copy .eyebrow {
  font: 800 11px ui-monospace, monospace;
  letter-spacing: 2px;
  color: #38bdf8;
  text-transform: uppercase;
}

.dimension-copy h2 {
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -1.2px;
  color: #ffffff;
  margin: 0;
}

.dimension-copy p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

.dimension-price {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #34d399;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.dimension-status {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 245, 255, 0.2);
  background: rgba(14, 28, 64, 0.4);
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}

.dimension-status i {
  flex: none;
  width: 8px;
  height: 8px;
  background: #00f5ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #00f5ff;
}

.dimension-controls {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.dim-btn-buy {
  flex: 1;
  height: 48px;
  border: 1px solid rgba(0, 245, 255, 0.5);
  border-radius: 12px;
  background: linear-gradient(120deg, #0284c7, #2563eb 50%, #4f46e5);
  color: #ffffff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 25px rgba(2, 132, 199, 0.4);
}

.dim-btn-buy:hover {
  background: linear-gradient(120deg, #0369a1, #1d4ed8 50%, #4338ca);
  box-shadow: 0 0 35px rgba(0, 245, 255, 0.6);
  transform: translateY(-1px);
}

.dim-btn-cart {
  padding: 0 18px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dim-btn-cart:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.dimension-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(14, 28, 64, 0.85);
  color: #e2e8f0;
  font-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dimension-close:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #ffffff;
  transform: rotate(90deg);
}

/* 3D Deposit Object */
.dimension-deposit .dimension-art {
  background: radial-gradient(circle, rgba(14, 116, 144, 0.3), transparent 70%);
}

.deposit-object {
  position: relative;
  width: 230px;
  height: 148px;
  z-index: 3;
  transform-style: preserve-3d;
  transform: perspective(700px) rotateY(-18deg) rotateX(12deg);
  animation: v16DepositFloat 4.8s ease-in-out infinite;
}

.deposit-object .deposit-face {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(0, 245, 255, 0.5);
  background: linear-gradient(145deg, rgba(2, 132, 199, 0.9), rgba(15, 23, 42, 0.95) 75%);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.5), 0 0 40px rgba(0, 245, 255, 0.3);
}

.deposit-object.purple .deposit-face {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.85), rgba(30, 27, 75, 0.95) 75%);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px rgba(255, 255, 255, 0.5), 0 0 40px rgba(168, 85, 247, 0.35);
}

.deposit-face .chip-icon {
  width: 36px;
  height: 26px;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.6), rgba(99, 102, 241, 0.5));
}

.deposit-face .card-letters {
  font: 850 16px ui-monospace, monospace;
  letter-spacing: 2px;
  color: #f8fafc;
}

.deposit-face .card-foot {
  font: 800 10px ui-monospace, monospace;
  color: #93c5fd;
  letter-spacing: 2px;
}

.deposit-ring {
  position: absolute;
  z-index: 1;
  width: 85%;
  height: 50%;
  border: 2px solid rgba(0, 245, 255, 0.6);
  border-radius: 50%;
  transform: rotateX(60deg);
  box-shadow: 0 0 30px rgba(0, 245, 255, 0.4);
  animation: v16OrbitTurn 6s linear infinite;
}

.dimension-deposit .dimension-art canvas {
  display: none;
}

@keyframes v16ModalBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes v16DialogIn {
  from { opacity: 0; transform: translateY(50px) scale(0.8) rotateX(-15deg); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes v16DialogOrbit {
  to { transform: rotateX(65deg) rotateZ(360deg); }
}

@keyframes v16OrbitTurn {
  to { transform: rotate(360deg); }
}

@keyframes v16DepositFloat {
  50% { transform: perspective(700px) rotateY(16deg) rotateX(-8deg) translateY(-12px); }
}

/* 5. 3D Hero Showcase & Quantum Reactor Panel */
#hero-showcase {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 50%, rgba(14, 165, 233, 0.15), rgba(7, 16, 40, 0.8) 65%),
              linear-gradient(180deg, rgba(13, 20, 50, 0.65), rgba(3, 7, 24, 0.95));
  border: 1px solid rgba(0, 245, 255, 0.28);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.12), 0 0 45px rgba(0, 245, 255, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
  cursor: grab;
}

#hero-showcase:active {
  cursor: grabbing;
}

#reactor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.kinetic-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(2, 6, 23, 0.7) 100%);
}

.orbit-circles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(0, 245, 255, 0.18);
  pointer-events: none;
  box-shadow: 0 0 35px rgba(0, 245, 255, 0.08);
  animation: v16OrbitTurn 25s linear infinite;
}

.orbit-circles::before {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.2);
  animation: v16OrbitTurn 35s linear infinite reverse;
}

.scene-head {
  position: absolute;
  top: 22px;
  left: 24px;
  font: 850 10px ui-monospace, monospace;
  letter-spacing: 2px;
  color: #00f5ff;
  text-transform: uppercase;
  background: rgba(4, 10, 28, 0.7);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 245, 255, 0.25);
  pointer-events: none;
}

.scene-foot {
  position: absolute;
  bottom: 22px;
  right: 24px;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: 1.5px;
  color: #94a3b8;
  background: rgba(4, 10, 28, 0.7);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.scene-foot span {
  color: #38bdf8;
}

.hyper-coordinates {
  position: absolute;
  bottom: 22px;
  left: 24px;
  font: 800 10px ui-monospace, monospace;
  letter-spacing: 1.5px;
  color: #64748b;
  pointer-events: none;
}

.reactor-chip {
  position: absolute;
  background: rgba(7, 16, 39, 0.85);
  border: 1px solid rgba(0, 245, 255, 0.25);
  border-radius: 12px;
  padding: 8px 12px;
  font: 800 10px ui-monospace, monospace;
  color: #cbd5e1;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.chip-left {
  top: 48%;
  left: 20px;
  transform: translateY(-50%);
}

.chip-right {
  top: 48%;
  right: 20px;
  transform: translateY(-50%);
}

.chip-label {
  font-size: 8px;
  color: #00f5ff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* 6. Product Card 3D Button & Payment Badges */
.view-3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 245, 255, 0.35);
  background: rgba(0, 245, 255, 0.08);
  color: #00f5ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-3d-btn:hover {
  background: rgba(0, 245, 255, 0.2);
  border-color: #00f5ff;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  transform: translateY(-1px);
}

.portal-payment-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(0, 245, 255, 0.12);
  border: 1px solid rgba(0, 245, 255, 0.3);
  color: #00f5ff;
}

/* 7. Responsive Breakpoints */
@media (max-width: 900px) {
  #hero-showcase {
    height: 380px;
  }
  .dimension-dialog {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }
  .dimension-art {
    min-height: 300px;
    height: 300px;
  }
  .dimension-art canvas {
    min-height: 300px;
  }
  .dimension-copy {
    padding: 20px 24px 28px;
    gap: 12px;
  }
}

@media (max-width: 680px) {
  .fps-hud {
    bottom: 12px;
    right: 12px;
    padding: 5px 10px;
    gap: 6px;
  }
  .fps-big {
    font-size: 13px;
  }
  .fps-sub {
    display: none;
  }
  #hero-showcase {
    height: 320px;
  }
  .scene-head {
    top: 14px;
    left: 14px;
    font-size: 8px;
  }
  .scene-foot {
    bottom: 14px;
    right: 14px;
    font-size: 8px;
  }
  .chip-left, .chip-right, .hyper-coordinates {
    display: none;
  }
  .deposit-object {
    transform: scale(0.85) perspective(700px) rotateY(-16deg);
  }
}

/* ==========================================================================
   TESON HYPERDIMENSION V17 — MOBILE-FIRST FIXES & CINEMATIC EXTREME CSS
   ========================================================================== */

/* 1. MOBILE VIEWPORT & SAFE AREA FIXES */
@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}
@supports not (height: 100dvh) {
  :root { --app-height: calc(var(--vh, 1vh) * 100); }
}

html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  height: auto;
  min-height: 100%;
}

body {
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

body.modal-open {
  overflow: hidden !important;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .header { padding-top: calc(env(safe-area-inset-top) + 8px) !important; }
  .footer-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 20px) !important; }
  .fps-hud { bottom: calc(env(safe-area-inset-bottom) + 12px) !important; right: calc(env(safe-area-inset-right) + 12px) !important; }
  #toast { bottom: calc(env(safe-area-inset-bottom) + 26px) !important; }
}

#world-gpu, #world {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  pointer-events: none !important;
  touch-action: auto !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  contain: strict;
  z-index: 0 !important;
}

#transit:not(.on) {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
#transit.on {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app, main, footer, .wrap {
  position: relative;
  z-index: 5;
}

.header {
  position: relative;
  z-index: 1000;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  text-decoration: none !important;
}

.brand-mark {
  flex-shrink: 0 !important;
}

.brand-word {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.brand-word strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.brand-word small {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Mobile Menu Button - Guaranteed 44x44px touch target, flex-shrink 0 */
.mobile-menu {
  display: none;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(149, 179, 250, 0.12) !important;
  border: 1px solid rgba(149, 179, 250, 0.28) !important;
  color: #deedff !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  z-index: 1002 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.mobile-menu:hover, .mobile-menu:active {
  background: rgba(149, 179, 250, 0.25) !important;
  border-color: rgba(0, 242, 254, 0.6) !important;
  color: #00f2fe !important;
}

.mobile-menu svg, .mobile-menu .icon {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  .nav { display: none !important; }
  .mobile-menu { display: inline-flex !important; }
}

#overlay {
  position: relative;
  z-index: 10000;
}

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10001 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal {
  position: relative !important;
  max-height: 90dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 10002 !important;
}

#toast {
  position: fixed !important;
  bottom: 26px !important;
  left: 50% !important;
  transform: translate(-50%, 30px) !important;
  z-index: 20000 !important;
}
#toast.show {
  transform: translate(-50%, 0) !important;
}

/* 2. MOBILE LAYOUT CENTERING & OVERFLOW FIXES */
@media (max-width: 768px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 0 32px !important;
    gap: 16px !important;
    min-height: auto !important;
  }
  .hero-copy { order: 1; max-width: 100% !important; }
  .hero-art {
    order: 2;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    height: 300px !important;
    transform: none !important;
  }
  .hero h1 {
    font-size: clamp(36px, 9vw, 52px) !important;
    letter-spacing: -2px !important;
    text-align: center !important;
  }
  .hero p { text-align: center !important; max-width: 100% !important; margin: 0 auto !important; }
  .hero-buttons { justify-content: center !important; flex-wrap: wrap !important; }
  .hero-foot { justify-content: center !important; }

  /* Commerce Hero Mobile Fixes */
  .commerce-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 24px 16px 28px !important;
    gap: 20px !important;
    min-height: auto !important;
    margin-top: 12px !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .commerce-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .commerce-hero-copy h1 {
    font-size: clamp(26px, 7vw, 38px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    word-break: break-word !important;
  }
  .commerce-hero-copy h2 {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    line-height: 1.3 !important;
  }
  .commerce-hero-copy p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
  #hero-showcase {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .hero-topup-portal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
  }
  .portal-combined-container {
    padding: 14px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .portal-banners-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .portal-banner-link {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Product Cards Mobile Optimization */
  .products { grid-template-columns: 1fr !important; gap: 16px !important; }
  .product-card { max-width: 100% !important; overflow: hidden !important; }
  .product-card.product-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .product-card-media {
    width: 100% !important;
    height: 220px !important;
    min-height: 0 !important;
    max-height: 240px !important;
    overflow: hidden !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .product-card.product-row .product-visual {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .product-card.product-row .product-visual > a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .product-card.product-row .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .product-content {
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .product-card.product-row .product-overline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 0 10px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .product-card.product-row h3 {
    margin: 0 0 10px 0 !important;
    line-height: 1.25 !important;
    font-size: clamp(22px, 2.4vw, 30px) !important;
  }
  .product-commerce {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .product-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .product-actions .product-buy-now {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .product-actions .view-3d-btn {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    margin-top: 0 !important;
  }
  .product-actions .product-detail-link {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }
  .product-visual { max-width: 100% !important; }
  .product-detail { grid-template-columns: 1fr !important; gap: 20px !important; }

  .dimension-dialog {
    grid-template-columns: 1fr !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
  .dimension-art { min-height: 260px !important; height: 260px !important; }
  .dimension-art canvas { min-height: 260px !important; }
  .dimension-copy { padding: 16px 20px 24px !important; }

  .toolbar { position: relative !important; top: auto !important; }
  .topup-form-panel,
  .topup-layout > .panel:first-child,
  .topup-layout > section:first-child {
    position: relative !important; top: auto !important;
  }
  .admin-shell { grid-template-columns: 1fr !important; }
  .header {
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 0 !important;
    gap: 8px !important;
  }
  .brand { font-size: 19px !important; gap: 8px !important; }
  .feature-banner { grid-template-columns: 1fr !important; padding: 24px !important; }
  .wrap { width: calc(100% - 24px) !important; }
  .header-actions { gap: 6px !important; }
  .header-actions .search-trigger,
  .header-actions .desktop-favorite {
    display: none !important;
  }
  .header-actions .fx-btn {
    padding: 0 8px !important;
    min-height: 38px !important;
    font-size: 9px !important;
  }
  .header-actions .sound-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
  }
}

@media (max-width: 520px) {
  .header-actions .fx-btn { display: none !important; }
  .header-actions .sound-toggle-btn { display: none !important; }
  .header-actions button[data-action="register"] { display: none !important; }
  .header-actions button[data-action="login"] {
    display: inline-flex !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
    min-height: 38px !important;
  }
  .header-actions .header-balance-btn {
    padding: 0 8px !important;
    min-height: 38px !important;
    font-size: 11px !important;
    gap: 5px !important;
  }
  .header-actions .account-button {
    padding: 7px 10px !important;
    min-height: 38px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 375px) {
  .hero h1 { font-size: 32px !important; letter-spacing: -1.5px !important; }
  .hero-art { height: 250px !important; }
  .brand { font-size: 17px !important; gap: 6px !important; }
  .brand-mark { width: 24px !important; height: 26px !important; font-size: 26px !important; line-height: 26px !important; }
  .brand-word small { display: none !important; }
  .header-actions { gap: 5px !important; }
  .header-actions button[data-action="login"] { padding: 6px 9px !important; font-size: 10.5px !important; }
  .header-actions .header-balance-btn { padding: 0 6px !important; font-size: 10px !important; }
  .header-actions .header-balance-icon { display: none !important; }
  .header-actions .account-button span { display: none !important; }
  .header-actions .account-button { padding: 0 !important; width: 38px !important; height: 38px !important; min-width: 38px !important; justify-content: center !important; }
  .wrap { width: calc(100% - 16px) !important; }
}

@media (max-width: 330px) {
  .wrap { width: calc(100% - 12px) !important; }
  .brand strong { font-size: 15px !important; }
  .brand-mark { display: none !important; }
  .header-actions button[data-action="login"] { padding: 5px 8px !important; font-size: 10px !important; }
  .mobile-menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* 3. V17 THREE.JS CANVAS ENHANCEMENTS */
#world-gpu { background: #010308 !important; image-rendering: auto; }

.aura-orb {
  position: fixed !important;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.04), rgba(99, 102, 241, 0.02) 50%, transparent 70%);
  pointer-events: none !important;
  z-index: -5;
  top: 20%; left: 60%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  animation: v17AuraFloat 12s ease-in-out infinite alternate;
}

@keyframes v17AuraFloat {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  50% { transform: translate(-40%, -55%) scale(1.1); opacity: 0.8; }
  100% { transform: translate(-60%, -45%) scale(1.0); opacity: 0.6; }
}

/* 4. V17 CINEMATIC PRODUCT CARD HOVER */
.product-card {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}
.product-card:hover {
  transform: translateY(-10px) scale(1.01) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35),
              0 0 40px rgba(0, 242, 254, 0.08),
              0 0 0 1px rgba(0, 242, 254, 0.12) !important;
}

/* 5. V17 TRANSIT PORTAL DEBRIS */
#transit .warp-debris {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
#transit.on .warp-debris::before {
  content: '';
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(0, 242, 254, 0.8), transparent),
    radial-gradient(2px 2px at 40% 60%, rgba(168, 85, 247, 0.6), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(56, 189, 248, 0.9), transparent),
    radial-gradient(2px 2px at 80% 80%, rgba(99, 102, 241, 0.7), transparent);
  background-size: 200px 200px;
  animation: v17DebrisFloat 1.2s ease-in both;
}
@keyframes v17DebrisFloat {
  0% { transform: scale(0.5); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* 6. V17 BUTTON GLOW BORDER */
.button.primary { position: relative !important; overflow: hidden !important; }
.button.primary::before {
  content: '' !important;
  position: absolute !important; inset: -2px !important;
  border-radius: inherit !important; padding: 2px !important;
  background: linear-gradient(135deg, rgba(213,255,120,0.5), rgba(190,241,98,0.2) 30%, rgba(213,255,120,0.5) 60%, rgba(190,241,98,0.2)) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.button.primary:hover::before { opacity: 1 !important; }

/* 7. V17 ANIMATIONS */
@keyframes v17FadeInUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v17GlowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 242, 254, 0.1); }
  50% { box-shadow: 0 0 40px rgba(0, 242, 254, 0.25), 0 0 60px rgba(168, 85, 247, 0.1); }
}

/* 8. V17 DARK DEPTH ENHANCEMENT */
body { background-color: #010308 !important; }
.wrap { position: relative; z-index: 5; }
.panel, .order-card, .info-panel {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(17, 21, 18, 0.75) !important;
  border-color: rgba(41, 48, 41, 0.7) !important;
}

/* 9. V17 BOOT SCREEN */
.boot {
  background: radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.06), transparent 50%) !important;
  height: 100dvh !important;
  height: var(--app-height, 70vh) !important;
}
.boot b {
  background: linear-gradient(135deg, #00f2fe, #6366f1, #a855f7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: v17BootGlow 2s ease-in-out infinite alternate !important;
}
@keyframes v17BootGlow {
  0% { filter: brightness(1) drop-shadow(0 0 10px rgba(0, 242, 254, 0.3)); }
  100% { filter: brightness(1.2) drop-shadow(0 0 25px rgba(168, 85, 247, 0.5)); }
}

/* 10. V17 REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #world-gpu, #world, .hyperfield, .perspective-grid-floor, .aura-orb, .world-tint { display: none !important; }
  .fps-hud { display: none !important; }
  #transit { transition: none !important; }
  .product-card { transition: none !important; }
  .product-card:hover { transform: none !important; }
  .studio-beam-ready::before { animation: none !important; }
  .button.primary::after { animation: none !important; }
}

/* 11. V17 LANDSCAPE MOBILE */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto !important; padding: 16px 0 !important; }
  .hero-art { display: none !important; }
  #hero-showcase { height: 200px !important; }
  .fps-hud { bottom: 4px !important; right: 4px !important; padding: 3px 8px !important; }
}

/* 12. V17 TABLET OPTIMIZATIONS */
@media (min-width: 769px) and (max-width: 1024px) {
  .products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .hero { grid-template-columns: 1fr 1fr !important; min-height: 500px !important; }
  .dimension-dialog { width: min(90vw, 800px) !important; }
}

/* 13. TESON HYPERDIMENSION 5D — FUNDING MODAL & PAYMENT CARDS */
.modal.wide:has(.hyper-payment-portal) {
  width: min(780px, calc(100vw - 28px)) !important;
  max-width: 780px !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.15), transparent 70%),
              radial-gradient(ellipse at 100% 100%, rgba(168, 85, 247, 0.1), transparent 60%),
              linear-gradient(165deg, rgba(10, 22, 38, 0.98), rgba(6, 12, 22, 0.99)) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85), 0 0 50px rgba(14, 165, 233, 0.15) !important;
  border-radius: 26px !important;
  padding: 32px 30px 28px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.funding-picker.hyper-payment-portal {
  width: 100% !important;
}

.funding-picker-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

.funding-picker-head .funding-mark {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.25), rgba(3, 105, 161, 0.4)) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.funding-picker-head .funding-mark svg,
.funding-picker-head .funding-mark .icon {
  width: 26px !important;
  height: 26px !important;
  stroke: #38bdf8 !important;
  fill: none !important;
  stroke-width: 2 !important;
}

.funding-picker-head .eyebrow {
  font: 850 11px/1.2 ui-monospace, SFMono-Regular, monospace !important;
  letter-spacing: 2px !important;
  color: #38bdf8 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

.funding-picker-head h2 {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.6px !important;
  color: #ffffff !important;
  margin: 2px 0 6px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
}

.funding-picker-head .modal-subtitle {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #8da4b8 !important;
  margin: 0 !important;
}

/* Payment Grid */
.payment-grid.holographic-funding-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  margin-top: 22px !important;
  perspective: 1000px !important;
}

/* Payment Button Base */
.holographic-funding-grid .payment {
  position: relative !important;
  overflow: hidden !important;
  min-height: 175px !important;
  padding: 24px 26px !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  cursor: pointer !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  background: radial-gradient(ellipse at 85% 15%, rgba(14, 165, 233, 0.22), transparent 60%),
              linear-gradient(135deg, rgba(10, 26, 48, 0.95), rgba(6, 15, 28, 0.98)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(14, 165, 233, 0.1) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
  font-family: inherit !important;
  color: #ffffff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Card 1: Bank Transfer (Cyan / Blue Neon) */
.holographic-funding-grid .payment[data-action="portal-deposit-bank"] {
  border-color: rgba(56, 189, 248, 0.38) !important;
  background: radial-gradient(ellipse at 85% 15%, rgba(14, 165, 233, 0.25), transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(37, 99, 235, 0.18), transparent 50%),
              linear-gradient(135deg, #091a2e 0%, #0c2742 50%, #061524 100%) !important;
}

/* Card 2: Scratch Card (Violet / Purple Neon) */
.holographic-funding-grid .payment[data-action="portal-deposit-card"],
.holographic-funding-grid .payment:nth-child(2) {
  border-color: rgba(168, 85, 247, 0.38) !important;
  background: radial-gradient(ellipse at 85% 15%, rgba(168, 85, 247, 0.25), transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(126, 34, 206, 0.18), transparent 50%),
              linear-gradient(135deg, #180d2e 0%, #251242 50%, #100824 100%) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(168, 85, 247, 0.1) !important;
}

/* Hover States */
.holographic-funding-grid .payment:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-bank"]:hover {
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-card"]:hover,
.holographic-funding-grid .payment:nth-child(2):hover {
  border-color: rgba(192, 132, 252, 0.75) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Animated Background Rings */
.holographic-funding-grid .payment::after {
  content: "" !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  right: -60px !important;
  top: -70px !important;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.02), 0 0 0 75px rgba(255, 255, 255, 0.01) !important;
  animation: hyperOrbitTurn 28s linear infinite !important;
  pointer-events: none !important;
}

@keyframes hyperOrbitTurn {
  to { transform: rotate(360deg); }
}

/* Glowing 3D Graphic Badge */
.holographic-funding-grid .pay-graphic {
  position: relative !important;
  z-index: 2 !important;
  width: 96px !important;
  height: 96px !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  border-radius: 20px !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-bank"] .pay-graphic {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.88), rgba(2, 132, 199, 0.85)) !important;
  border: 1px solid rgba(186, 230, 253, 0.45) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45), 0 0 30px rgba(56, 189, 248, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  transform: rotate(-10deg) perspective(500px) rotateY(12deg) !important;
  animation: hyperPayFloat 5s ease-in-out infinite !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-card"] .pay-graphic,
.holographic-funding-grid .payment:nth-child(2) .pay-graphic {
  background: linear-gradient(145deg, rgba(192, 132, 252, 0.88), rgba(126, 34, 206, 0.85)) !important;
  border: 1px solid rgba(233, 213, 255, 0.45) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45), 0 0 30px rgba(168, 85, 247, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
  transform: rotate(10deg) perspective(500px) rotateY(-12deg) !important;
  animation: hyperPayFloat 5s ease-in-out infinite -2.5s !important;
}

@keyframes hyperPayFloat {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-8px) rotate(-8deg); }
}

.holographic-funding-grid .payment:hover .pay-graphic {
  transform: rotate(0deg) scale(1.08) !important;
}

/* SVG Line Icon Styling - CRITICAL: eliminates any black fill */
.holographic-funding-grid .pay-graphic svg {
  width: 52px !important;
  height: 52px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.4)) !important;
}

.holographic-funding-grid .pay-graphic svg rect {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.2 !important;
}

.holographic-funding-grid .pay-graphic svg path {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.2 !important;
}

/* Copy text */
.holographic-funding-grid .pay-copy {
  position: relative !important;
  z-index: 2 !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}

.holographic-funding-grid .pay-copy small {
  font: 850 11px/1.2 ui-monospace, SFMono-Regular, monospace !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-bank"] .pay-copy small {
  color: #7ee7ff !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-card"] .pay-copy small,
.holographic-funding-grid .payment:nth-child(2) .pay-copy small {
  color: #e0b3ff !important;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.5) !important;
}

.holographic-funding-grid .pay-copy h3 {
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  color: #ffffff !important;
  margin: 6px 0 10px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.holographic-funding-grid .pay-copy span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.25s ease !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-bank"] .pay-copy span {
  border: 1px solid rgba(118, 228, 255, 0.45) !important;
  background: rgba(70, 185, 245, 0.16) !important;
  color: #d5f4ff !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-card"] .pay-copy span,
.holographic-funding-grid .payment:nth-child(2) .pay-copy span {
  border: 1px solid rgba(192, 117, 255, 0.45) !important;
  background: rgba(168, 85, 247, 0.16) !important;
  color: #f3e8ff !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-bank"]:hover .pay-copy span {
  background: rgba(70, 185, 245, 0.35) !important;
  border-color: rgba(118, 228, 255, 0.9) !important;
  box-shadow: 0 0 18px rgba(118, 228, 255, 0.45) !important;
  color: #ffffff !important;
}

.holographic-funding-grid .payment[data-action="portal-deposit-card"]:hover .pay-copy span,
.holographic-funding-grid .payment:nth-child(2):hover .pay-copy span {
  background: rgba(168, 85, 247, 0.35) !important;
  border-color: rgba(192, 117, 255, 0.9) !important;
  box-shadow: 0 0 18px rgba(192, 117, 255, 0.45) !important;
  color: #ffffff !important;
}

/* Disabled state */
.holographic-funding-grid .payment.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5) !important;
  pointer-events: none !important;
}

.holographic-funding-grid .payment.disabled .pay-copy span {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #888888 !important;
}

/* Trust Badges Footer */
.funding-trust {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #7f97ab !important;
  font-size: 12px !important;
}

.funding-trust span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.funding-trust .icon,
.funding-trust svg {
  width: 15px !important;
  height: 15px !important;
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
  fill: none !important;
}

/* Responsive adjustments */
@media (max-width: 680px) {
  .modal.wide:has(.hyper-payment-portal) {
    padding: 24px 18px 20px !important;
    border-radius: 20px !important;
  }
  .funding-picker-head h2 {
    font-size: 23px !important;
  }
  .payment-grid.holographic-funding-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .holographic-funding-grid .payment {
    min-height: 140px !important;
    padding: 18px 20px !important;
  }
  .holographic-funding-grid .pay-graphic {
    width: 80px !important;
    height: 80px !important;
  }
  .holographic-funding-grid .pay-graphic svg {
    width: 44px !important;
    height: 44px !important;
  }
  .holographic-funding-grid .pay-copy h3 {
    font-size: 19px !important;
    margin: 4px 0 8px !important;
  }
  .funding-trust {
    font-size: 11px !important;
    gap: 8px 14px !important;
  }
/* 14. UNIVERSAL MODAL CLOSE BUTTON & SCROLL POSITION FIXES */
.modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10008 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.modal-close:hover {
  background: rgba(30, 41, 59, 1) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: scale(1.08) !important;
}

.modal-close svg,
.modal-close .icon {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.bot-notice-direct-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10009 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.bot-notice-direct-close:hover {
  background: rgba(30, 41, 59, 1) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  transform: scale(1.08) !important;
}

.modal:has(.bot-notice-experience) {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   TESON V6 — EMAIL DELIVERY CENTER RESPONSIVE STYLING (LỖI 3 FIX)
   Viewports: 320px, 375px, 390px, 430px, Tablet, Desktop
   ========================================================================== */
.email-delivery-center {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.email-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

.email-history-head {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
}

.email-history-head h2 {
  font-size: clamp(16px, 3.8vw, 20px) !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  word-break: break-word !important;
  margin: 0 0 6px 0 !important;
  color: #ffffff !important;
  text-wrap: normal !important;
}

.email-history-head p.help {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

.email-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 640px) {
  .email-history-head {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .email-filter-bar {
    width: 100% !important;
  }
  .email-filter-bar input,
  .email-filter-bar select {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

@media (max-width: 480px) {
  .email-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .email-stat-grid .stat {
    padding: 12px !important;
  }
  .email-stat-grid .stat strong {
    font-size: 20px !important;
  }
  .email-stat-grid .stat span {
    font-size: 11px !important;
  }
  .email-history-head h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 360px) {
  .email-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   AI SHOP CHECKOUT PROMINENT EMAIL CARD (24/7 GMAIL INTEGRATION)
   ========================================================================== */
.checkout-email-card {
  margin: 10px 0 14px 0 !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(168, 85, 247, 0.08)) !important;
  border: 1px solid rgba(129, 140, 248, 0.38) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.checkout-email-card .checkout-email-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
}

.checkout-email-card .email-header-title {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #c7d2fe !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0.3px !important;
}

.checkout-email-card .email-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
}

.checkout-email-card .email-badge.connected {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
}

.checkout-email-card .email-badge.prompt {
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
}

.checkout-email-input-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.checkout-email-input-row input.ai-input-email {
  flex: 1 !important;
  background: rgba(13, 17, 23, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  color: #ffffff !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.checkout-email-input-row input.ai-input-email:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25) !important;
}

.checkout-email-input-row button.btn-save-ai-email {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}

.checkout-email-input-row button.btn-save-ai-email:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
}

.checkout-email-input-row button.btn-save-ai-email:active {
  transform: translateY(0) !important;
}

.checkout-email-status {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}