/* SmartWeb – CSS mẫu giao diện (Template Engine), dùng chung cho trang chủ & trang preview */
/* ===== Template engine: giao diện mẫu + chuyển động ===== */
.tp{--pt:#fff;--r:14px;--hf:'Inter';container-type:inline-size;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;line-height:1.5;position:relative;overflow:hidden;text-align:left;font-size:15px}
.tp *{box-sizing:border-box}
.tp h1,.tp h2,.tp h3,.tp .hf{font-family:var(--hf),Inter,serif;margin:0;font-weight:700;letter-spacing:-.01em}
.tp p{margin:0}.tp a{color:inherit}
.tp .mu{color:color-mix(in srgb,var(--tx) 68%,transparent)}
.tp .sm{font-size:13px}
.tp .b{position:relative;padding:clamp(30px,7cqw,64px) clamp(18px,5cqw,44px);overflow:hidden}
.tp .alt{background:var(--sf)}
.tp .h1{font-size:clamp(30px,6.2cqw,54px);line-height:1.08}
.tp .h1.big{font-size:clamp(36px,10cqw,86px);line-height:1;letter-spacing:-.03em;margin-top:14px}
.tp .h2{font-size:clamp(22px,4cqw,34px);margin-bottom:22px}
.tp .h3{font-size:17px}
.tp .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(20px,4cqw,40px);align-items:center;position:relative;z-index:1}
.tp .ctr{text-align:center}
.tp .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tp .ctr .row{justify-content:center}
.tp p.mu{margin-top:14px;max-width:520px}
.tp .ctr p.mu{margin-inline:auto}
.tp .btn1{background:var(--pr);color:var(--pt);padding:11px 22px;border-radius:var(--r);font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;white-space:nowrap}
.tp .btn1:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--pr) 45%,transparent)}
.tp .btn1::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:tpshim 3.2s infinite}
.tp .btn1.sm{padding:7px 14px;font-size:12px}
.tp .btn2{border:1.5px solid var(--pr);color:var(--pr);padding:10px 20px;border-radius:var(--r);font-weight:600;font-size:14px;transition:.25s}
.tp .btn2:hover{background:var(--pr);color:var(--pt)}
.tp .btn1.inv{background:var(--bg);color:var(--tx)}
.tp .pill{display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--pr) 16%,transparent);color:var(--pr);border:1px solid color-mix(in srgb,var(--pr) 35%,transparent)}
.tp .grad{font-style:normal;background:linear-gradient(90deg,var(--pr),var(--ac),var(--pr));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tpgrad 5s linear infinite}
.tp .chip{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--sf) 80%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--tx) 14%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.18);color:var(--tx)}
.tp .chip i{color:var(--pr)}
/* nav */
.tp .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(18px,5cqw,44px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);position:relative;z-index:3;border-bottom:1px solid color-mix(in srgb,var(--tx) 9%,transparent)}
.tp .brand{display:flex;gap:8px;align-items:center;font-size:17px}.tp .brand i{color:var(--pr)}
.tp .nl{display:flex;gap:22px;font-size:13px;opacity:.75}
@container (max-width:560px){.nl{display:none}}
/* blobs, visuals */
.tp .blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;animation:tpblob 9s ease-in-out infinite alternate}
.tp .blob.b1{width:300px;height:300px;background:var(--pr);top:-90px;left:-70px}
.tp .blob.b2{width:260px;height:260px;background:var(--ac);bottom:-80px;right:-50px;animation-delay:-4s}
.tp .vis{position:relative;min-height:250px;display:grid;place-items:center}
.tp .vcard{position:relative;width:min(100%,300px);aspect-ratio:1;border-radius:min(var(--r),40px);background:linear-gradient(135deg,var(--pr),var(--ac));display:grid;place-items:center;color:var(--pt);font-size:84px;box-shadow:0 30px 60px color-mix(in srgb,var(--pr) 35%,transparent);animation:tpfloat 6s ease-in-out infinite;overflow:hidden}
.tp .vcard i{position:relative;z-index:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.tp .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 1.5px,transparent 1.5px);background-size:18px 18px;opacity:.6}
.tp .vis .chip{position:absolute;animation:tpfloat 5s ease-in-out infinite}
.tp .c1{left:0;top:14%}.tp .c2{right:0;bottom:12%;animation-delay:-2s}
.tp .chip.fl{position:absolute;animation:tpfloat 5s ease-in-out infinite}
.tp .ctr .c1{left:6%;top:30%}.tp .ctr .c2{right:7%;top:24%}.tp .ctr .c3{right:12%;bottom:12%;animation-delay:-3s}
@container (max-width:620px){.chip.fl{display:none}}
/* bento */
.tp .bento{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto;gap:12px}
.tp .bento .t{border-radius:min(var(--r),24px);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;transition:transform .3s;background:var(--sf);border:1px solid color-mix(in srgb,var(--tx) 10%,transparent)}
.tp .bento .t:hover{transform:translateY(-4px) rotate(-.6deg)}
.tp .bento .t b{font-size:26px}
.tp .bento .t1{grid-row:span 2;min-height:200px;background:linear-gradient(150deg,var(--pr),var(--ac));color:var(--pt);font-size:64px;position:relative;overflow:hidden;align-items:center;justify-content:center;animation:tpfloat 7s ease-in-out infinite}
.tp .bento .t3{background:var(--pr);color:var(--pt)}
.tp .bento .t4{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;font-weight:600}.tp .bento .t4 i{color:var(--pr);font-size:20px}
/* editorial */
.tp .edtop{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--tx) 30%,transparent);margin-bottom:clamp(20px,4cqw,36px);opacity:.8}
.tp .ital{font-style:italic;font-weight:600}
.tp .arch{position:relative;aspect-ratio:3/4;max-height:380px;margin-inline:auto;width:min(100%,280px);border-radius:999px 999px 0 0;background:linear-gradient(170deg,var(--ac),var(--pr));display:grid;place-items:center;color:var(--pt);font-size:80px;overflow:hidden}
.tp .arch i{animation:tpfloat 6s ease-in-out infinite}
.tp .ring{position:absolute;inset:14px;border:1.5px dashed rgba(255,255,255,.55);border-radius:999px 999px 0 0;animation:tppulse 3s ease-in-out infinite}
/* mesh */
.tp .mesh{background:radial-gradient(circle at 20% 20%,var(--pr),transparent 45%),radial-gradient(circle at 80% 30%,var(--ac),transparent 45%),radial-gradient(circle at 50% 90%,color-mix(in srgb,var(--pr) 60%,var(--ac)),transparent 50%),var(--bg);background-size:140% 140%;animation:tpmesh 12s ease-in-out infinite alternate;padding-block:clamp(40px,10cqw,90px)}
.tp .glass{max-width:640px;margin-inline:auto;padding:clamp(22px,5cqw,44px);border-radius:min(var(--r),32px);background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--tx) 18%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.tp .glass .h1{margin-top:14px}
/* brutal */
.tp.s-brutal{--r:6px}
.tp .bru{position:relative;background:var(--sf);border:3px solid var(--tx);box-shadow:8px 8px 0 var(--tx);padding:clamp(20px,4cqw,34px);border-radius:8px}
.tp .sticker{position:absolute;top:-16px;right:-8px;background:var(--ac);color:var(--tx);font-weight:800;font-size:12px;padding:6px 12px;border:2.5px solid var(--tx);transform:rotate(6deg);animation:tpwob 3s ease-in-out infinite}
.tp .bsq{position:relative;min-height:240px;border:3px solid var(--tx);background:var(--pr);color:var(--pt);display:grid;place-items:center;font-size:84px;box-shadow:8px 8px 0 var(--tx);border-radius:8px;overflow:hidden}
.tp .bsq i{animation:tpspin 14s linear infinite}
.tp .bsq .s1,.tp .bsq .s2{position:absolute;border:3px solid var(--tx);background:var(--ac)}
.tp .bsq .s1{width:54px;height:54px;left:14px;bottom:14px;border-radius:50%;animation:tpfloat 4s ease-in-out infinite}
.tp .bsq .s2{width:44px;height:44px;right:18px;top:18px;transform:rotate(18deg);animation:tpwob 3.5s ease-in-out infinite}
.tp.s-brutal .card,.tp.s-brutal .btn1,.tp.s-brutal .btn2,.tp.s-brutal .tile{border:2.5px solid var(--tx);box-shadow:4px 4px 0 var(--tx)}
.tp.s-brutal .btn1::after{display:none}
/* luxe */
.tp .eyebrow{font-size:11px;letter-spacing:.35em;text-transform:uppercase;opacity:.75}
.tp .thin{font-weight:500;letter-spacing:.01em;margin-top:16px}
.tp .orbit{position:relative;width:150px;height:150px;margin:26px auto 4px;border-radius:50%;display:grid;place-items:center;font-size:46px;color:var(--pr);background:radial-gradient(circle,color-mix(in srgb,var(--pr) 18%,transparent),transparent 70%)}
.tp .orbit::before,.tp .orbit::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--pr) 60%,transparent);animation:tpspin 18s linear infinite}
.tp .orbit::after{inset:-18px;border-style:solid;border-color:color-mix(in srgb,var(--ac) 40%,transparent);animation-direction:reverse;animation-duration:26s}
/* neon */
.tp .neon{background-image:linear-gradient(color-mix(in srgb,var(--pr) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pr) 12%,transparent) 1px,transparent 1px);background-size:34px 34px}
.tp .scan{position:absolute;left:0;right:0;height:120px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--pr) 22%,transparent),transparent);animation:tpscan 5s linear infinite;pointer-events:none}
.tp.s-neon .h1{text-shadow:0 0 28px color-mix(in srgb,var(--pr) 65%,transparent)}
.tp .term{background:color-mix(in srgb,var(--sf) 90%,#000);border:1px solid color-mix(in srgb,var(--pr) 50%,transparent);border-radius:min(var(--r),18px);padding:14px 16px;font-family:'Space Grotesk',monospace;font-size:13px;box-shadow:0 0 30px color-mix(in srgb,var(--pr) 28%,transparent)}
.tp .term .tl{display:flex;gap:6px;margin-bottom:10px}.tp .term .tl i{width:9px;height:9px;border-radius:50%;background:var(--ac);opacity:.8}
.tp .term .ln{padding:4px 0;color:var(--tx)}.tp .term b{color:var(--pr);margin-right:6px}
.tp .caret{display:inline-block;width:8px;height:15px;background:var(--pr);vertical-align:-2px;margin-left:4px;animation:tpcar 1s steps(1) infinite}
/* sections */
.tp .mq{overflow:hidden;white-space:nowrap;background:var(--pr);color:var(--pt);padding:13px 0;font-weight:700;font-family:var(--hf),Inter}
.tp .mq-in{display:flex;width:max-content;animation:tpmarq 24s linear infinite}
.tp .mq-g{display:flex;align-items:center;gap:22px;padding-right:22px}
.tp .mq i{font-size:10px;opacity:.7}
.tp .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.tp .card{position:relative;background:var(--sf);border:1px solid color-mix(in srgb,var(--tx) 10%,transparent);border-radius:min(var(--r),26px);padding:22px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tp .card:hover{transform:translateY(-8px)!important;box-shadow:0 22px 40px color-mix(in srgb,var(--pr) 22%,transparent)}
.tp .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pr),var(--ac));color:var(--pt);margin-bottom:14px}
.tp .num{position:absolute;top:16px;right:18px;font-family:var(--hf);font-size:30px;font-weight:700;opacity:.12}
.tp .gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px}
.tp .tile{position:relative;min-height:150px;border-radius:min(var(--r),22px);background:linear-gradient(var(--a),var(--pr),var(--ac));color:var(--pt);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;overflow:hidden;font-weight:600;font-size:13px;transition:transform .4s}
.tp .tile i{position:absolute;right:12px;top:12px;font-size:34px;opacity:.35;transition:transform .5s}
.tp .tile:hover{transform:scale(1.04)}.tp .tile:hover i{transform:rotate(14deg) scale(1.25)}
.tp .g0,.tp .g3{min-height:200px}
.tp .stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;text-align:center;background:var(--pr);color:var(--pt)}
.tp .big2{font-size:clamp(26px,5cqw,40px)}.tp .sl{font-size:13px;opacity:.85}
.tp .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:18px}
.tp .step{position:relative;padding:20px;border-radius:min(var(--r),24px);border:1px dashed color-mix(in srgb,var(--pr) 60%,transparent);transition:.3s}
.tp .step:hover{background:color-mix(in srgb,var(--pr) 10%,transparent)}
.tp .sn{width:38px;height:38px;border-radius:50%;background:var(--pr);color:var(--pt);display:grid;place-items:center;margin-bottom:12px;animation:tppulse 2.8s ease-in-out infinite}
.tp .price{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.tp .price .amt{font-size:32px}.tp .price.hot{background:linear-gradient(160deg,var(--pr),var(--ac));color:var(--pt);transform:translateY(-8px)}
.tp .price.hot .btn1{background:var(--bg);color:var(--tx)}
.tp .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--tx);color:var(--bg);font-size:11px;font-weight:700;padding:3px 12px;border-radius:99px}
.tp .quote{max-width:640px;margin-inline:auto}.tp .stars{color:#fbbf24;letter-spacing:3px}
.tp .qt{font-size:clamp(18px,3.4cqw,26px);margin:12px 0;line-height:1.35;font-weight:600}
.tp .who{display:inline-flex;gap:10px;align-items:center;font-size:13px;opacity:.8}.tp .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--pr),var(--ac))}
.tp .ctab{position:relative;overflow:hidden;text-align:center;padding:clamp(28px,6cqw,52px);border-radius:min(var(--r),32px);background:linear-gradient(120deg,var(--pr),var(--ac),var(--pr));background-size:200% 100%;animation:tpgrad 6s linear infinite;color:var(--pt)}
.tp .ctab p{margin:8px 0 18px;opacity:.9}.tp .ctab .h2{margin-bottom:0}
.tp .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:22px clamp(18px,5cqw,44px);font-size:12px;background:var(--sf);color:color-mix(in srgb,var(--tx) 75%,transparent)}
/* reveal */
.tp-rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.tp-rv.tp-in{opacity:1;transform:none}
.tp-rv:nth-child(2){transition-delay:.08s}.tp-rv:nth-child(3){transition-delay:.16s}.tp-rv:nth-child(4){transition-delay:.24s}
.tplthumb .tp-rv{opacity:1!important;transform:none!important;transition:none!important}
.tplthumb:not(:hover) .tp *,.tplthumb:not(:hover) .tp *::before,.tplthumb:not(:hover) .tp *::after{animation-play-state:paused!important}
@keyframes tpfloat{50%{transform:translateY(-12px)}}
@keyframes tpblob{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,36px) scale(1.25)}}
@keyframes tpmarq{to{transform:translateX(-50%)}}
@keyframes tpshim{60%,100%{transform:translateX(120%)}}
@keyframes tpgrad{to{background-position:200% 0}}
@keyframes tpmesh{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes tpspin{to{transform:rotate(360deg)}}
@keyframes tppulse{50%{transform:scale(1.08);opacity:.75}}
@keyframes tpwob{50%{transform:rotate(-4deg) translateY(-4px)}}
@keyframes tpscan{from{top:-120px}to{top:100%}}
@keyframes tpcar{50%{opacity:0}}