/* TextHay v3 — khớp mockup 1440px (ảnh 761px ×1.892). Desktop dùng đơn vị --u để co giãn theo chiều rộng; tablet/mobile có khối riêng. */
:root{--cream:#FFF8F2;--navy:#0F1B4C;--blue:#1558E8;--blue2:#0E42B8;--org:#FF7A1A;--vio:#7C4DFF;--soft:#5B6485;--u:min(1px,calc(100vw / 1440))}
body{background:var(--cream);overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.deco{position:absolute;pointer-events:none}
.lg-star{fill:var(--blue);flex:none}
.sec{position:relative}
main#main{padding-top:0}
.footer p,.ft-note p,.ft-brand p{font-size:17px;line-height:1.5}
.hero-sub,.sec-sub,.qa p,.steps3 .d{font-size:17px}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logo::before{content:none!important}
.logo .lg-star{display:block;width:26px;height:26px}
.logo span{font-size:25px;font-weight:800;letter-spacing:-.5px;color:var(--navy)}

/* ---------- hero ---------- */
.th-hero{position:relative;background:#FFF0E3;overflow:hidden;isolation:isolate}
.th-hero .blob{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.th-hero .b1{background:#D9D9FF}.th-hero .b2{background:#FFC9A0}.th-hero .b3{background:#CFCBFF}.th-hero .b4{background:#FFC9A0}
.th-hero .deco{z-index:-1}
.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:0 18px;height:30px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #EBDDCF;color:#5B6485;font-size:13px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;white-space:nowrap}
.eyebrow-pill i{width:5px;height:5px;border-radius:50%;background:#9AA3C4;flex:none}
.th-hero h1{margin:18px 0 0;font-weight:900;color:var(--navy);text-wrap:balance}
.th-hero h1 .h1-a,.th-hero h1 .h1-b{display:block}
.th-hero h1 .h1-b{position:relative;display:inline-block;color:var(--blue)}
.th-hero h1 .h1-b svg{position:absolute;left:0;width:100%}
.hero-sub{margin:20px 0 0;color:#26325E}
.perks{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.perks li{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #F0E3D6;color:var(--navy);font-weight:500}
.perks svg{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-card{position:relative;background:#fff;border:1px solid #F0E6DB;display:flex;flex-direction:column}
.ta-wrap{position:relative}
.ta{display:block;width:100%;resize:none;border:1px solid #E4E8F4;background:#FAFBFF;font-weight:500;line-height:1.45;color:var(--navy)}
.ta:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,88,232,.14)}
.ta-wrap .count{position:absolute;font-weight:500;color:#8A93B2;background:transparent}
.ta-wrap .count b{color:#5B6485;font-weight:600}
.controls{display:flex;align-items:center;flex-wrap:wrap}
.controls .seg{display:none}
.sw{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer;color:var(--navy);font-weight:500}
.sw i{position:relative;border-radius:999px;background:#C9CFE3;transition:background .2s;flex:none}
.sw i::after{content:"";position:absolute;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw.on i{background:var(--blue)}
.warn{margin:10px 0 0;font-size:14px;border-radius:12px}
.btn-hero{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#2A72FF,#0B3BB5);color:#fff!important;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s}
.btn-hero:hover{transform:translateY(-1px);color:#fff}

/* ---------- đầu mục ---------- */
.sec-head{text-align:center;position:relative}
.eyebrow{display:block;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--blue)}
.eyebrow.warm{color:#F26A1B}.eyebrow.violet{color:#8B5CF6}
.sec-head h2,.styles h2{margin:0;display:inline-block;position:relative;font-weight:900;line-height:1.1;color:var(--navy)}
.h2-tick{position:absolute;pointer-events:none}
.sec-head .sec-sub{margin-left:auto;margin-right:auto;color:#4A557C;max-width:none}

/* ---------- tab + thẻ ---------- */
.chips{display:flex;justify-content:center;flex-wrap:wrap;overflow:visible;padding:0}
.chip{flex:none;border:0;background:#EEF0F7;color:#2A3560;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.chip:hover{background:#E1E6F5}
.chip.on{background:var(--blue);color:#fff;box-shadow:0 8px 16px rgba(21,88,232,.28)}
.grid-scroll{overflow:visible;min-height:0;padding:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;min-width:0;max-width:none;min-height:0;background:#fff;border:1px solid #F0E6DB;box-shadow:0 6px 20px rgba(80,60,30,.06);cursor:pointer;outline:none;transition:box-shadow .18s,border-color .18s}
.card:hover,.card:focus-visible{border-color:#C9D8FF;box-shadow:0 14px 30px rgba(21,88,232,.14)}
.cname{display:inline-block;align-self:flex-start;max-width:100%;background:#F2F4FA;color:#2A3560;font-weight:600;line-height:1.2}
.photo{flex:1;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0;animation:none;overflow:visible;padding:0}
.photo .styled{text-align:center;color:var(--navy);overflow-wrap:anywhere;min-width:0}
.actions{margin:0}
.btn-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#F3F5FB;border:1px solid #E2E7F4;color:var(--blue);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.btn-copy:hover,.card:hover .btn-copy{background:#E8EEFF;border-color:#C9D8FF}

/* ---------- panel màu ---------- */
.panel-soft{position:relative;border:1px solid rgba(255,255,255,.7)}
.panel-soft.violet{background:linear-gradient(135deg,#EFEBFF,#F6F2FF)}
.panel-soft.peach{background:linear-gradient(135deg,#FFEEDD,#FFF4EA)}
.panel-soft.blue{background:linear-gradient(135deg,#E8EFFF,#F1F5FF)}
.marks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr))}
.mark{display:flex;flex-direction:column;align-items:center;background:#fff;box-shadow:0 6px 16px rgba(11,27,77,.07)}
.mark .mk{font-family:var(--preview);color:var(--navy);display:grid;place-items:center;line-height:1}
.mark button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #DCE5FB;background:#F4F7FF;color:var(--blue);font-weight:600;cursor:pointer;white-space:nowrap}
.mark button:hover{background:#E4ECFF}
.steps3{list-style:none;margin:0;padding:0;display:grid;align-items:start}
.steps3 li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;color:#4A557C}
.steps3 li b{color:var(--navy);font-weight:700}
.steps3 .ic{display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(11,27,77,.1)}
.steps3 .ic svg{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.steps3 .no{position:absolute;display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.steps3 .n1{background:var(--blue)}.steps3 .n2{background:#FF7A1A}.steps3 .n3{background:#8B5CF6}
.steps3 .arr svg{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps3 .d{display:block}
.uses{display:grid}
.use{background:#fff;box-shadow:0 8px 22px rgba(21,88,232,.08)}
.use h3{display:flex;align-items:center;margin:0;font-weight:700;color:var(--navy)}
.use h3 svg{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.use .demo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #E6EAF7;background:#FCFDFF;color:#26325E;font-family:var(--preview)}
.use .demo span{display:block;max-width:100%;overflow-wrap:anywhere}

/* ---------- FAQ ---------- */
.qa-list{margin:0 auto;display:flex;flex-direction:column}
.qa{background:#fff;border:1px solid #EDE3D8;box-shadow:0 4px 14px rgba(80,60,30,.05);overflow:hidden}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font-weight:500;line-height:1.4;color:var(--navy)}
.qa summary::after{content:"";flex:none;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.qa[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.qa p{margin:0;color:#4A557C;line-height:1.65}

/* ---------- header / footer ---------- */
.header{position:sticky;top:0;z-index:60;background:transparent;border:0}
.header-inner{display:flex;align-items:center;margin:0 auto;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid #EFE6DD;box-shadow:0 6px 22px rgba(21,88,232,.10);flex-wrap:nowrap}
.nav{display:flex;align-items:center}
.nav a{border:0;background:none;padding:0;border-radius:0;color:var(--navy);font-weight:500;white-space:nowrap}
.nav a.on,.nav a:hover{background:none;color:var(--navy)}
.hd-cta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#1E6BFF,#0E42B8);color:#fff!important;font-weight:600;box-shadow:0 6px 16px rgba(21,88,232,.35);white-space:nowrap}
.footer{position:relative;border:0;border-radius:0;background:linear-gradient(135deg,#1558E8 0%,#0B38B8 100%);color:#fff;overflow:visible}
.footer::before,.footer::after{content:none!important}
.footer .f-deco{position:absolute;left:0;right:0;top:-260px;bottom:0;overflow:hidden;pointer-events:none}
.footer .f-deco>*{margin-top:260px}
.footer .f-blob{position:absolute;border-radius:50%;pointer-events:none}
.footer .fb1{background:#CFCBFF}.footer .fb2{background:#CFCBFF}
.footer .f-star{position:absolute;pointer-events:none}
.footer-inner{position:relative;z-index:1;text-align:left}
.ft-top{display:flex;align-items:center}
.ft-brand .nm{display:flex;align-items:center;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1}
.ft-brand .nm .lg-star{fill:#fff}
.ft-brand p{margin:0;color:rgba(255,255,255,.9)}
.footer .flinks{display:flex;flex-wrap:wrap;margin:0;padding:0}
.footer .flinks a{color:#fff;font-weight:500}
.ft-soc{display:flex;align-items:center}
.ft-soc a{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18);color:#fff}
.ft-soc a:hover{background:#fff;color:var(--blue)}
.ft-soc svg{width:55%;height:55%;fill:currentColor}
.ft-dom{color:rgba(255,255,255,.85)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9)}
.ft-bot .lg-star.sm{width:1em;height:1em;fill:#fff;vertical-align:-.12em}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px}
.ft-legal a{color:rgba(255,255,255,.85);font-size:15px}
.ft-legal a:hover{color:#fff;text-decoration:underline}
.footer .ft-note{margin-top:10px}
.footer .ft-note p{max-width:none;margin:0;color:rgba(255,255,255,.7);text-align:left}

/* ---------- nội dung bổ sung dưới các khối chính ---------- */
.below{padding-bottom:80px}
.below .sec{margin-top:72px}
.below .sec h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;color:var(--navy);margin:0;letter-spacing:-1px;display:block;text-align:left}
.below .sec-head h2{text-align:center;display:inline-block}
.below .sec-sub{font-size:17px;color:#4A557C;margin-left:0}
.below .sec-head .sec-sub{margin-left:auto}
.below .eyebrow{font-size:13px}
.panel,.tray,.album,.bs-card{border-color:#EDE3D8;border-radius:18px}
.below table{border-radius:14px;overflow:hidden}
.below .qa-list{max-width:820px}
.below .qa{border-radius:16px}.below .qa summary{padding:16px 20px}.below .qa summary h3{font-size:17px}.below .qa p{padding:0 20px 18px;font-size:17px}
.below .qa summary::after{width:10px;height:10px}
.below .vip-btn{position:static;display:inline-flex;align-items:center;border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:999px;padding:0 24px;min-height:48px;font-size:16px;font-weight:600;cursor:pointer}
.below .vip-btn:hover{background:var(--blue);color:#fff}
.vip-box{text-align:center}
.vip-note{margin:14px 0 0;font-size:15px;color:#7B84A3;text-align:center}
.bs-card h4,.faq-item h4{font-size:18px;line-height:1.35;margin-bottom:8px}
.album h3,.tray h3{font-size:18px}
.album .intro{font-size:15px}
.blank .step div,.hot-row{font-size:15px}
.blank .step{align-items:center}
.tool-box+.chips{margin-top:16px}
.entry-content .tool-box,.article .tool-box{border-radius:20px;padding:14px;box-shadow:0 10px 26px rgba(21,88,232,.08)}
.search-form{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.search-form label{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--navy)}
.search-form .search-field{min-height:44px;padding:0 16px;border:1px solid #E4E8F4;border-radius:999px;background:#fff;font-size:16px;color:var(--navy);min-width:220px}
.search-form .search-submit{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.search-form .search-submit:hover{background:var(--blue2)}

/* ====================== DESKTOP ≥981px — kích thước theo mockup ====================== */
@media (min-width:981px){
.header{padding:calc(15 * var(--u)) 0 0}
.header-inner{max-width:calc(1130 * var(--u));height:calc(68 * var(--u));padding:0 calc(19 * var(--u)) 0 calc(19 * var(--u));border-radius:calc(23 * var(--u))}
.logo{gap:calc(8 * var(--u))}.logo .lg-star{width:calc(26 * var(--u));height:calc(26 * var(--u))}.logo span{font-size:calc(25 * var(--u))}
.nav{margin-left:calc(170 * var(--u));gap:calc(55 * var(--u))}.nav a{font-size:calc(20 * var(--u))}
.hd-cta{margin-left:auto;height:calc(53 * var(--u));padding:0 calc(26 * var(--u));border-radius:calc(19 * var(--u));font-size:calc(20 * var(--u))}
.th-hero{margin-top:calc(-83 * var(--u));height:calc(700 * var(--u));padding:calc(170 * var(--u)) 0 0}
.th-hero .b1{width:calc(240 * var(--u));height:calc(210 * var(--u));left:calc(-90 * var(--u));top:calc(45 * var(--u))}
.th-hero .b2{width:calc(440 * var(--u));height:calc(300 * var(--u));right:calc(-110 * var(--u));top:calc(-85 * var(--u))}
.th-hero .b3{width:calc(380 * var(--u));height:calc(250 * var(--u));right:calc(-150 * var(--u));bottom:calc(-135 * var(--u))}
.th-hero .b4{width:calc(300 * var(--u));height:calc(250 * var(--u));left:calc(-120 * var(--u));bottom:calc(-105 * var(--u))}
.th-hero .s1{left:calc(27 * var(--u));top:calc(80 * var(--u));width:calc(26 * var(--u));height:calc(26 * var(--u))}
.th-hero .s2{right:calc(134 * var(--u));bottom:calc(20 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u))}
.th-hero .tb{left:calc(991 * var(--u));top:calc(118 * var(--u));width:calc(46 * var(--u));height:calc(42 * var(--u))}
.th-hero .to{left:calc(708 * var(--u));top:calc(606 * var(--u));width:calc(36 * var(--u));height:calc(34 * var(--u))}
.th-hero .tr{right:calc(50 * var(--u));top:calc(118 * var(--u));width:calc(62 * var(--u));height:calc(50 * var(--u))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(640 * var(--u));gap:0;align-items:start;max-width:none;margin:0;padding:0 calc(64 * var(--u)) 0 calc(79 * var(--u))}
.hero-copy{padding-right:calc(30 * var(--u))}
.eyebrow-pill{height:calc(32 * var(--u));padding:0 calc(22 * var(--u));font-size:calc(15 * var(--u));gap:calc(12 * var(--u));letter-spacing:calc(1 * var(--u))}
.th-hero h1{margin-top:calc(28 * var(--u));font-size:calc(106 * var(--u));line-height:calc(102 * var(--u));letter-spacing:calc(-3.2 * var(--u))}
.th-hero h1 .h1-b svg{bottom:calc(-4 * var(--u));height:calc(20 * var(--u))}
.hero-sub{margin-top:calc(30 * var(--u));font-size:calc(25 * var(--u));line-height:calc(36 * var(--u))}
.perks{margin-top:calc(32 * var(--u));gap:calc(14 * var(--u))}
.perks li{height:calc(44 * var(--u));padding:0 calc(22 * var(--u));font-size:calc(19 * var(--u));gap:calc(10 * var(--u))}
.perks svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.hero-card{margin-top:calc(19 * var(--u));padding:calc(25 * var(--u)) calc(21 * var(--u)) calc(25 * var(--u)) calc(24 * var(--u));border-radius:calc(27 * var(--u));box-shadow:0 calc(26 * var(--u)) calc(60 * var(--u)) rgba(21,88,232,.13),0 3px 8px rgba(11,27,77,.06);min-height:calc(426 * var(--u))}
.ta{height:calc(206 * var(--u));min-height:0;border-radius:calc(19 * var(--u));padding:calc(18 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));font-size:calc(23 * var(--u))}
.ta-wrap .count{right:calc(16 * var(--u));bottom:calc(12 * var(--u));font-size:calc(16 * var(--u))}
.controls{margin-top:calc(22 * var(--u));gap:calc(12 * var(--u));min-height:calc(27 * var(--u));line-height:1}
.sw{gap:calc(10 * var(--u));font-size:calc(18 * var(--u));line-height:1;min-height:0}
.sw i{width:calc(53 * var(--u));height:calc(27 * var(--u))}
.sw i::after{top:calc(3 * var(--u));left:calc(3 * var(--u));width:calc(21 * var(--u));height:calc(21 * var(--u))}
.sw.on i::after{transform:translateX(calc(26 * var(--u)))}
.btn-hero{margin-top:calc(32 * var(--u));height:calc(79 * var(--u));border-radius:calc(17 * var(--u));font-size:calc(23 * var(--u));box-shadow:0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(21,88,232,.35)}
.sec-head h2,.styles h2{font-size:calc(59 * var(--u));letter-spacing:calc(-1.6 * var(--u))}
.eyebrow{font-size:calc(15 * var(--u));margin-bottom:calc(19 * var(--u))}
.h2-tick{right:calc(-56 * var(--u));top:calc(-14 * var(--u));width:calc(42 * var(--u));height:calc(36 * var(--u))}
.styles{padding-top:calc(40 * var(--u));margin-top:0}
.styles .wrap{max-width:calc(1343 * var(--u));padding:0}
.styles .sec-head{margin-bottom:calc(28 * var(--u))}
.chips{gap:calc(20 * var(--u));margin-bottom:calc(32 * var(--u))}
.chip{height:calc(49 * var(--u));padding:0 calc(30 * var(--u));border-radius:999px;font-size:calc(19 * var(--u))}
.grid{gap:calc(19 * var(--u)) calc(21 * var(--u))}
.card{padding:calc(25 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u));border-radius:calc(23 * var(--u));min-height:calc(268 * var(--u))}
.cname{padding:calc(6 * var(--u)) calc(16 * var(--u));border-radius:calc(10 * var(--u));font-size:calc(17 * var(--u))}
.photo{min-height:calc(128 * var(--u));padding:calc(8 * var(--u)) 0}
.photo .styled{font-size:calc(30 * var(--u));line-height:calc(47 * var(--u))}
.btn-copy{height:calc(55 * var(--u));border-radius:calc(13 * var(--u));font-size:calc(19 * var(--u))}
.btn-copy svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.sec{margin-top:calc(47 * var(--u))}
.below .sec{margin-top:72px}
#ke-phu-kien .wrap,#cach-dung .wrap,#ung-dung .wrap{max-width:calc(1372 * var(--u));padding:0}
#cach-dung{margin-top:calc(39 * var(--u))}#ung-dung{margin-top:calc(40 * var(--u))}
.panel-soft{border-radius:calc(38 * var(--u))}
#ke-phu-kien .panel-soft{padding:calc(49 * var(--u)) calc(34 * var(--u)) calc(40 * var(--u));height:calc(413 * var(--u))}
#ke-phu-kien .eyebrow{margin-bottom:calc(19 * var(--u))}
#ke-phu-kien .sec-head h2{font-size:calc(59 * var(--u))}
#ke-phu-kien .sec-sub{margin-top:calc(13 * var(--u));font-size:calc(19 * var(--u));line-height:calc(30 * var(--u))}
#ke-phu-kien .sec-head{margin-bottom:calc(34 * var(--u))}
#ke-phu-kien .ticks.pt{right:calc(70 * var(--u));top:calc(62 * var(--u));width:calc(52 * var(--u));height:calc(42 * var(--u))}
.marks{gap:calc(16 * var(--u))}
.mark{height:calc(153 * var(--u));padding:calc(22 * var(--u)) calc(10 * var(--u)) calc(21 * var(--u));border-radius:calc(19 * var(--u));justify-content:space-between}
.mark .mk{font-size:calc(38 * var(--u));min-height:calc(46 * var(--u))}
.mark button{height:calc(43 * var(--u));width:100%;border-radius:calc(15 * var(--u));font-size:calc(15 * var(--u))}
#cach-dung .panel-soft{padding:calc(45 * var(--u)) calc(33 * var(--u)) 0;height:calc(454 * var(--u))}
#cach-dung .sec-head{margin-bottom:calc(34 * var(--u))}
.steps3{grid-template-columns:minmax(0,1fr) calc(95 * var(--u)) minmax(0,1fr) calc(95 * var(--u)) minmax(0,1fr);padding:0 calc(0 * var(--u))}
.steps3 li{padding:0 calc(50 * var(--u))}
.steps3 .ic{width:calc(98 * var(--u));height:calc(98 * var(--u))}.steps3 .ic svg{width:calc(40 * var(--u));height:calc(40 * var(--u))}
.steps3 .no{left:calc(50% - calc(153 * var(--u)));top:calc(8 * var(--u));width:calc(68 * var(--u));height:calc(68 * var(--u));font-size:calc(21 * var(--u))}
.steps3 li b{margin-top:calc(16 * var(--u));font-size:calc(22 * var(--u));line-height:calc(28 * var(--u))}
.steps3 .d{margin-top:calc(12 * var(--u));font-size:calc(19 * var(--u));line-height:calc(28 * var(--u))}
.steps3 .arr{align-self:start;margin:calc(38 * var(--u)) 0 0 0;position:relative;padding:0;display:block;height:calc(24 * var(--u))}
.steps3 .arr svg{position:absolute;left:calc(50% - calc(12 * var(--u)));top:0;width:calc(24 * var(--u));height:calc(24 * var(--u))}
#ung-dung .panel-soft{padding:calc(43 * var(--u)) calc(44 * var(--u)) calc(30 * var(--u));height:calc(488 * var(--u))}
#ung-dung .sec-head{margin-bottom:calc(30 * var(--u))}
#ung-dung .ps{right:calc(42 * var(--u));top:calc(36 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u))}
#ung-dung .pl{left:calc(78 * var(--u));top:calc(60 * var(--u));width:calc(38 * var(--u));height:calc(34 * var(--u))}
#ung-dung .pr{right:calc(200 * var(--u));top:calc(60 * var(--u));width:calc(52 * var(--u));height:calc(42 * var(--u))}
.uses{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(22 * var(--u))}
.use{height:calc(288 * var(--u));padding:calc(22 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));border-radius:calc(23 * var(--u))}
.use h3{gap:calc(10 * var(--u));font-size:calc(23 * var(--u));height:calc(30 * var(--u));margin-bottom:calc(16 * var(--u))}
.use h3 svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
.use .demo{height:calc(173 * var(--u));border-radius:calc(21 * var(--u));gap:calc(2 * var(--u));padding:calc(10 * var(--u));font-size:calc(21 * var(--u));line-height:calc(34 * var(--u));font-family:Roboto,'Noto Sans','Noto Sans Symbols 2',sans-serif}
.faq-sec{margin-top:0;padding-top:calc(45 * var(--u));padding-bottom:calc(38 * var(--u))}
.faq-sec .wrap{max-width:calc(984 * var(--u));padding:0}
.faq-sec .sec-head{margin-bottom:calc(20 * var(--u))}
.qa-list{gap:calc(13 * var(--u))}
.qa{border-radius:calc(15 * var(--u))}
.qa summary{height:calc(61 * var(--u));padding:0 calc(22 * var(--u))}
.qa summary h3{font-size:calc(22 * var(--u))}
.qa summary::after{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.qa p{padding:0 calc(22 * var(--u)) calc(20 * var(--u));font-size:calc(19 * var(--u))}
.qa[open]{height:auto}.qa[open] summary{height:calc(61 * var(--u))}
.below{max-width:calc(1180 * var(--u));margin-left:auto;margin-right:auto;padding-top:calc(50 * var(--u));padding-bottom:calc(150 * var(--u))}
.footer{margin-top:calc(110 * var(--u))}
.footer .fb1{width:calc(250 * var(--u));height:calc(190 * var(--u));left:calc(-90 * var(--u));top:calc(-75 * var(--u))}
.footer .fb2{width:calc(260 * var(--u));height:calc(200 * var(--u));right:calc(-95 * var(--u));top:calc(-90 * var(--u))}
.footer .f-star{left:calc(100 * var(--u));top:calc(-48 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));fill:#FF9B3D}
.footer-inner{max-width:calc(1236 * var(--u));padding:calc(36 * var(--u)) 0 calc(32 * var(--u))}
.ft-top{min-height:calc(78 * var(--u))}
.ft-brand{flex:0 0 calc(378 * var(--u))}
.ft-brand .nm{gap:calc(8 * var(--u));font-size:calc(41 * var(--u))}
.ft-brand .nm .lg-star{width:calc(40 * var(--u));height:calc(40 * var(--u))}
.ft-brand p{margin-top:calc(10 * var(--u));font-size:calc(20 * var(--u))}
.footer .flinks{flex:1;gap:calc(10 * var(--u)) calc(45 * var(--u))}
.footer .flinks a{font-size:calc(19 * var(--u))}
.ft-soc{gap:calc(8 * var(--u));padding-left:calc(49 * var(--u));margin-left:auto;position:relative}
.ft-soc::before{content:"";position:absolute;left:0;top:calc(5 * var(--u));bottom:calc(5 * var(--u));width:1px;background:rgba(255,255,255,.28)}
.ft-soc a{width:calc(34 * var(--u));height:calc(34 * var(--u))}
.ft-dom{margin-left:calc(10 * var(--u));padding-left:calc(23 * var(--u));border-left:1px solid rgba(255,255,255,.28);font-size:calc(17 * var(--u));line-height:calc(28 * var(--u))}
.ft-bot{margin-top:calc(26 * var(--u));padding-top:calc(20 * var(--u));font-size:calc(16 * var(--u))}
.ft-legal{margin-top:calc(16 * var(--u))}
}

/* ---------- tablet ---------- */
@media (min-width:641px) and (max-width:980px){
.header{padding:10px 12px 0}.header-inner{max-width:900px;height:60px;padding:0 16px;border-radius:18px}
.nav{margin-left:28px;gap:22px}.nav a{font-size:16px}
.hd-cta{margin-left:auto;height:42px;padding:0 20px;border-radius:14px;font-size:16px}
.th-hero{margin-top:-70px;padding:120px 0 48px}
.th-hero .b1{width:220px;height:200px;left:-90px;top:50px}.th-hero .b2{width:320px;height:240px;right:-100px;top:-60px}.th-hero .b3{width:260px;height:200px;right:-100px;bottom:-90px}.th-hero .b4{width:220px;height:200px;left:-90px;bottom:-90px}
.th-hero .tb,.th-hero .to,.th-hero .tr{display:none}.th-hero .s1{left:14px;top:90px;width:22px;height:22px}.th-hero .s2{right:20px;bottom:14px;width:34px;height:34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:0 24px}
.eyebrow-pill{font-size:12px}
.th-hero h1{margin-top:18px;font-size:58px;line-height:1.06;letter-spacing:-1.6px}.th-hero h1 .h1-b svg{bottom:-8px;height:14px}
.hero-sub{margin-top:24px;font-size:21px}
.perks{margin-top:20px;gap:10px}.perks li{height:40px;padding:0 16px;font-size:15px}.perks svg{width:18px;height:18px}
.hero-card{padding:20px;border-radius:24px;box-shadow:0 20px 44px rgba(21,88,232,.13)}
.ta{height:150px;border-radius:16px;padding:14px 16px 34px;font-size:20px}
.ta-wrap .count{right:14px;bottom:10px;font-size:14px}
.controls{margin-top:16px;gap:10px}.sw{font-size:16px}.sw i{width:46px;height:26px}.sw i::after{top:3px;left:3px;width:20px;height:20px}.sw.on i::after{transform:translateX(20px)}
.btn-hero{margin-top:16px;height:60px;border-radius:16px;font-size:20px;box-shadow:0 10px 22px rgba(21,88,232,.35)}
.sec{margin-top:56px}
.styles{padding-top:36px}
.styles .wrap,#ke-phu-kien .wrap,#cach-dung .wrap,#ung-dung .wrap,.faq-sec .wrap{max-width:900px;padding:0 16px}
.eyebrow{font-size:13px;margin-bottom:14px}.sec-head{margin-bottom:26px}
.sec-head h2,.styles h2{font-size:40px;letter-spacing:-1px}
.h2-tick{display:none}
.chips{gap:10px;margin-bottom:24px}.chip{height:44px;padding:0 20px;font-size:16px;border-radius:999px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{padding:16px;border-radius:20px}.cname{padding:5px 12px;border-radius:9px;font-size:14px}.photo{min-height:110px;padding:10px 0}.photo .styled{font-size:24px;line-height:1.45}.btn-copy{height:48px;border-radius:12px;font-size:16px}
.panel-soft{border-radius:28px;padding:36px 22px 32px}
.marks{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mark{padding:16px 8px 12px;border-radius:16px;gap:12px}.mark .mk{font-size:30px;min-height:36px}.mark button{height:38px;width:100%;border-radius:12px;font-size:13px}
.steps3{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr)}.steps3 li{padding:0 6px}
.steps3 .ic{width:80px;height:80px}.steps3 .ic svg{width:34px;height:34px}.steps3 .no{left:calc(50% - 74px);top:2px;width:36px;height:36px;font-size:14px}
.steps3 li b{margin-top:12px;font-size:18px}.steps3 .d{margin-top:8px;font-size:16px;line-height:1.5}.steps3 .arr{margin-top:30px;display:block}.steps3 .arr svg{width:22px;height:22px}
.uses{grid-template-columns:minmax(0,1fr);gap:16px}.use{padding:18px;border-radius:20px}.use h3{gap:10px;font-size:19px;margin-bottom:14px}.use h3 svg{width:24px;height:24px}.use .demo{min-height:130px;border-radius:16px;padding:14px;font-size:18px;line-height:1.5}
#ung-dung .deco{display:none}
.faq-sec{padding-top:40px;padding-bottom:20px}
.qa{border-radius:14px}.qa summary{min-height:56px;padding:12px 18px}.qa summary h3{font-size:18px}.qa summary::after{width:10px;height:10px}.qa p{padding:0 18px 18px;font-size:17px}.qa-list{gap:12px}
.footer{margin-top:90px}
.footer .fb1{width:200px;height:150px;left:-70px;top:-60px}.footer .fb2{width:210px;height:160px;right:-70px;top:-70px}.footer .f-star{left:80px;top:-38px;width:24px;height:24px;fill:#FF9B3D}
.footer-inner{max-width:900px;padding:34px 24px 30px}
.ft-top{flex-wrap:wrap;gap:20px 28px}.ft-brand{flex:1 1 100%}.ft-brand .nm{gap:8px;font-size:34px}.ft-brand .nm .lg-star{width:32px;height:32px}.ft-brand p{margin-top:8px;font-size:18px}
.footer .flinks{flex:1;gap:8px 28px}.footer .flinks a{font-size:17px}
.ft-soc{gap:8px;margin-left:auto}.ft-soc a{width:38px;height:38px}.ft-dom{margin-left:8px;font-size:16px}
.ft-bot{margin-top:24px;padding-top:18px;font-size:15px;gap:6px 20px}
}

/* ---------- mobile: box sát mép, bỏ lề/đệm chồng ---------- */
@media (max-width:640px){
.fab{display:none}
.wrap{padding-left:8px;padding-right:8px}
.header{padding:6px 6px 0}.header-inner{height:48px;padding:0 12px;border-radius:14px}
.nav,.hd-cta{display:none}.logo{margin:0 auto}.logo span{font-size:22px}.logo .lg-star{width:22px;height:22px}
.th-hero{margin-top:-54px;padding:84px 0 28px}
.th-hero .b1{width:200px;height:180px;left:-80px;top:40px}.th-hero .b2{width:240px;height:200px;right:-90px;top:-50px}.th-hero .b3{width:240px;height:180px;right:-100px;bottom:-80px}.th-hero .b4{width:180px;height:160px;left:-80px;bottom:-70px}
.th-hero .tb,.th-hero .to,.th-hero .tr,.th-hero .s1,.th-hero .s2{display:none}
.hero-grid{display:block;padding:0 8px}
.eyebrow-pill{height:28px;padding:0 14px;font-size:11.5px}
.th-hero h1{margin-top:14px;font-size:clamp(40px,12.4vw,50px);line-height:1.05;letter-spacing:-1.2px}.th-hero h1 .h1-b svg{bottom:-10px;height:12px}
.hero-sub{margin-top:22px;font-size:18px;line-height:1.5}
.perks{margin-top:16px;gap:8px}.perks li{height:38px;padding:0 13px;font-size:14px}.perks svg{width:17px;height:17px}
.hero-card{margin-top:22px;padding:12px 8px;border-radius:18px;box-shadow:0 14px 30px rgba(21,88,232,.13)}
.ta{height:128px;border-radius:14px;padding:12px 12px 32px;font-size:18px}
.ta-wrap .count{right:12px;bottom:9px;font-size:14px}
.controls{margin-top:14px;gap:8px}.sw{font-size:16px;gap:10px}.sw i{width:46px;height:26px}.sw i::after{top:3px;left:3px;width:20px;height:20px}.sw.on i::after{transform:translateX(20px)}
.btn-hero{margin-top:14px;height:56px;border-radius:14px;font-size:19px;box-shadow:0 10px 20px rgba(21,88,232,.35)}
.sec{margin-top:44px}.styles{padding-top:30px;margin-top:0}
.eyebrow{font-size:12px;margin-bottom:10px}.sec-head{margin-bottom:20px}
.sec-head h2,.styles h2{font-size:clamp(30px,9vw,36px);letter-spacing:-.8px}
.h2-tick{display:none}
.chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:16px;padding:2px 2px 6px;-webkit-overflow-scrolling:touch}
.chip{height:42px;padding:0 18px;font-size:15px;border-radius:999px}
.grid{grid-template-columns:minmax(0,1fr);gap:12px}
.card{padding:12px 8px;border-radius:16px}.cname{padding:5px 12px;border-radius:9px;font-size:14px}
.photo{min-height:96px;padding:10px 2px}.photo .styled{font-size:23px;line-height:1.45}
.btn-copy{height:48px;border-radius:12px;font-size:16px}
.panel-soft{border-radius:20px;padding:26px 6px 22px}
.panel-soft .sec-head{padding:0 6px}.panel-soft .deco{display:none}
.marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mark{padding:14px 6px 10px;border-radius:14px;gap:10px}.mark .mk{font-size:30px;min-height:36px}.mark button{height:38px;width:100%;border-radius:12px;font-size:13px}
.steps3{grid-template-columns:minmax(0,1fr);gap:22px}.steps3 .arr{display:none}
.steps3 li{padding:0 8px}.steps3 .ic{width:84px;height:84px}.steps3 .ic svg{width:36px;height:36px}
.steps3 .no{left:calc(50% - 70px);top:2px;width:38px;height:38px;font-size:14px}
.steps3 li b{margin-top:12px;font-size:19px}.steps3 .d{margin-top:8px;font-size:17px;line-height:1.55}
.uses{grid-template-columns:minmax(0,1fr);gap:12px}.use{padding:14px 8px;border-radius:16px}.use h3{gap:10px;font-size:19px;margin-bottom:12px;padding:0 4px}.use h3 svg{width:24px;height:24px}
.use .demo{min-height:120px;border-radius:14px;padding:12px 8px;font-size:18px;line-height:1.5}
.faq-sec{padding-top:36px;padding-bottom:14px}.qa-list{gap:10px}
.qa{border-radius:14px}.qa summary{min-height:56px;padding:12px 14px}.qa summary h3{font-size:17px}.qa summary::after{width:10px;height:10px}.qa p{padding:0 14px 16px;font-size:17px}
.below{padding-top:10px;padding-bottom:70px}.below .sec{margin-top:48px}
.footer{margin-top:80px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.footer .fb1{width:170px;height:130px;left:-60px;top:-55px}.footer .fb2{width:170px;height:130px;right:-60px;top:-60px}.footer .f-star{left:60px;top:-34px;width:22px;height:22px;fill:#FF9B3D}
.footer-inner{padding:30px 8px 24px}
.ft-top{flex-direction:column;align-items:flex-start;gap:18px}.ft-brand .nm{gap:8px;font-size:32px}.ft-brand .nm .lg-star{width:30px;height:30px}.ft-brand p{margin-top:6px;font-size:18px}
.footer .flinks{gap:6px 22px}.footer .flinks a{font-size:17px}
.ft-soc{gap:8px;padding-left:0;margin-left:0}.ft-soc a{width:40px;height:40px}.ft-dom{margin-left:8px;font-size:16px}
.ft-bot{margin-top:22px;padding-top:16px;font-size:15px;gap:6px}
.ft-legal a{font-size:15px}
}

/* dock mobile */
.th-dock,.th-sheet{display:none}
@media (max-width:640px){
 body{padding-bottom:0}
 .toast{bottom:calc(106px + env(safe-area-inset-bottom))}
 .th-dock{display:block;position:fixed;z-index:80;left:0;right:0;bottom:0;padding:0 8px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
 .th-pill{display:flex;pointer-events:auto;padding:6px;gap:2px;border-radius:26px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid #EDE3D8;box-shadow:0 10px 30px rgba(11,46,158,.22)}
 .th-pill>*{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;border-radius:20px;background:none;color:#5B6485;font:600 12px/1.1 Roboto,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:flex .25s,background .25s,color .25s;-webkit-tap-highlight-color:transparent}
 .th-pill svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .th-pill span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .th-pill .on{flex:1.9 1 0;flex-direction:row;gap:6px;background:linear-gradient(135deg,#1E6BFF,#0E42B8);color:#fff;box-shadow:0 6px 14px rgba(21,88,232,.35)}
 .th-pill .on span{font-size:13px}
 .th-pill .th-more{color:var(--org)}
 .th-sheet{position:fixed;inset:0;z-index:90;background:rgba(11,27,77,.55);align-items:flex-end}
 .th-sheet.open{display:flex}
 .th-sheet>div{position:relative;width:100%;max-height:78vh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:20px 12px calc(24px + env(safe-area-inset-bottom))}
 .th-sheet h3{margin:0 44px 10px 4px;font-size:20px;color:var(--navy)}
 .th-sheet ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .th-sheet a{display:block;padding:12px;border-radius:14px;background:#F2F6FF;color:var(--navy);font-size:16px;font-weight:500;overflow-wrap:anywhere}
 .th-sheet button{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#EEF3FF;font-size:22px;color:var(--navy)}
 .entry-content table,.article table,main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (prefers-reduced-motion:reduce){.card,.btn-hero{transition:none}}