/* Code-only Liquid Glass hero. Isolated from legacy #home.hero CSS. */
.sd-code-hero{
 --sdh-tint:#1674e8;--sdh-tint-soft:rgba(62,149,244,.22);--sdh-accent:#2d83eb;
 position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,49fr) minmax(0,51fr);
 align-items:center;gap:0;min-height:0;height:420px;margin-block:12px 18px;
 padding:24px clamp(22px,3.2vw,48px);overflow:hidden;
 border:1px solid var(--line);border-radius:26px;color:var(--ink);
 background:radial-gradient(circle at 79% 31%,rgba(133,190,244,.37),transparent 32%),radial-gradient(ellipse at 52% 108%,rgba(116,179,242,.35),transparent 54%),linear-gradient(125deg,rgba(250,253,255,.91),rgba(224,240,254,.74) 57%,rgba(212,232,252,.83));
 box-shadow:0 14px 38px rgba(36,93,147,.12),inset 0 1px 0 rgba(255,255,255,.88)
}
.sd-code-hero::before{content:"";position:absolute;pointer-events:none;inset:1px;border-radius:inherit;border:1px solid rgba(255,255,255,.48);z-index:4}
.sd-code-hero::after{content:"";position:absolute;pointer-events:none;right:22%;top:-26%;width:47%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(94,158,232,.28);transform:rotate(-17deg);z-index:0}
.sd-code-hero .sdh-copy{position:relative;z-index:3;min-width:0;max-width:580px}
.sd-code-hero .sdh-title{margin:0;font:700 clamp(39px,4vw,59px)/1.08 'SD Serif',Georgia,serif;letter-spacing:-.05em;color:var(--ink)}
.sd-code-hero .sdh-title span{display:block;white-space:nowrap}
.sd-code-hero .sdh-title .sdh-em{color:var(--sdh-tint)}
.sd-code-hero .sdh-description{max-width:365px;margin:15px 0 0;color:var(--muted);font:400 13px/1.6 'SD Sans',Arial,sans-serif}
.sd-code-hero .sdh-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;max-width:100%;margin-top:22px;padding:0 22px;border-radius:999px;border:1px solid rgba(235,250,255,.82);background:radial-gradient(ellipse at 24% 7%,rgba(255,255,255,.28),transparent 51%),linear-gradient(145deg,#3997f0 0%,#0c73e7 66%,#0961d4 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.70),inset 0 -2px 5px rgba(0,58,168,.12),0 5px 15px rgba(12,96,210,.18);color:#fff;font:700 12px/1.2 'SD Sans',Arial,sans-serif;white-space:normal;text-align:center;text-decoration:none;transition:transform .2s cubic-bezier(.18,.8,.24,1),filter .2s ease}
/* The approved Zalo blink remains on ::before. ::after supplies only the
   same curved prismatic rim used by the unified Storefront glass controls. */
.sd-code-hero .sdh-cta::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 padding:1.25px;background:var(--sd-3d-rim,linear-gradient(135deg,rgba(238,170,223,.45),rgba(152,224,250,.55)));opacity:.72;
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;
}
/* Pulse only the outline. The button body and its text stay still/readable. */
 .sd-code-hero .sdh-cta--zalo::before{content:"";position:absolute;inset:-2px;border:1px solid rgba(219,248,255,.78);border-radius:inherit;pointer-events:none;animation:sdh-cta-border-pulse 1.8s ease-in-out infinite}
@keyframes sdh-cta-border-pulse{0%,100%{opacity:.28}50%{opacity:.78}}
.sd-code-hero .sdh-cta:hover{transform:translateY(-2px);filter:brightness(1.045)}
.sd-code-hero .sdh-cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sd-code-hero .sdh-cta:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(12,96,210,.13),inset 0 3px 7px rgba(0,54,149,.34),inset 0 -1px 2px rgba(234,250,255,.25)}
html.dark .sd-code-hero .sdh-cta:active{box-shadow:0 2px 5px rgba(0,50,130,.2),inset 0 3px 7px rgba(0,24,104,.48),inset 0 -1px 2px rgba(204,241,255,.18)}
.sd-code-hero .sdh-cta-arrow{font-size:18px;font-weight:400;line-height:1}
.sd-code-hero .sdh-visual{position:relative;z-index:1;width:100%;height:100%;min-width:0;contain:layout style;pointer-events:none}
.sd-code-hero .sdh-aura{position:absolute;inset:1% -3% -10% -11%;border-radius:50%;background:radial-gradient(ellipse at 58% 45%,var(--sdh-tint-soft),transparent 66%)}
.sd-code-hero .sdh-orbit{position:absolute;width:84%;aspect-ratio:1;right:5%;top:-20%;border:1px solid rgba(61,142,231,.52);border-radius:50%;transform:rotate(-22deg) scaleX(.83);box-shadow:0 0 0 1px rgba(255,255,255,.37) inset}
.sd-code-hero .sdh-orbit--outer{width:114%;right:-34%;top:23%;border-color:rgba(63,145,242,.58);transform:rotate(22deg) scaleX(.78)}
.sd-code-hero .sdh-glass-card{position:absolute;left:12%;top:11%;width:68%;height:69%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.96);border-radius:23px;background:linear-gradient(135deg,rgba(255,255,255,.33) 0%,rgba(184,221,255,.20) 57%,rgba(101,175,251,.13) 100%);-webkit-backdrop-filter:blur(14px) saturate(145%);backdrop-filter:blur(14px) saturate(145%);box-shadow:inset 1px 2px 1px rgba(255,255,255,.74),inset -2px -3px 16px rgba(60,133,205,.08),0 15px 30px rgba(45,104,161,.07);transform:perspective(850px) rotateY(-8deg) rotateX(2deg)}
.sd-code-hero .sdh-glass-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(116deg,transparent 13%,rgba(255,255,255,.19) 29%,transparent 43%,rgba(255,255,255,.09) 67%,transparent 82%);mix-blend-mode:screen}
.sd-code-hero .sdh-glass-card::after{content:"";order:1;width:25%;height:1px;background:linear-gradient(90deg,transparent,var(--sdh-accent),transparent)}
.sd-code-hero .sdh-glass-label{font:700 12px/1.4 'SD Sans',Arial,sans-serif;letter-spacing:.20em;color:var(--ink);white-space:nowrap;transform:translateY(-4px)}
.sd-code-hero .sdh-glass-message{order:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;text-align:center;color:var(--ink)}
.sd-code-hero .sdh-glass-message span{display:block;white-space:nowrap}
.sd-code-hero .sdh-glass-message span:first-child{font:700 clamp(13px,1.6vw,21px)/1.25 'SD Serif',Georgia,serif}
.sd-code-hero .sdh-glass-message span:last-child{font:500 clamp(11px,1.35vw,16px)/1.3 'SD Sans',Arial,sans-serif}
.sd-code-hero .sdh-bubble{position:absolute;right:10%;top:12%;width:79px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.86);background:radial-gradient(circle at 28% 23%,rgba(255,255,255,.99),rgba(188,226,255,.66) 24%,rgba(78,155,237,.46) 61%,rgba(12,95,210,.48) 85%);box-shadow:inset -7px -9px 19px rgba(26,95,200,.21),0 9px 28px rgba(50,139,236,.15)}
.sd-code-hero .sdh-bubble--low{right:auto;top:65%;left:1%;bottom:auto;width:94px;opacity:.93}
.sd-code-hero .sdh-stage{position:absolute;left:2%;right:-8%;bottom:4%;height:28%;border-radius:50%;border:1px solid rgba(255,255,255,.85);background:radial-gradient(ellipse at 48% 4%,rgba(255,255,255,.83),rgba(179,220,254,.29) 55%,rgba(59,142,238,.22));box-shadow:0 12px 24px rgba(81,147,218,.18),inset 0 -11px 19px rgba(59,129,220,.14),0 0 3px rgba(255,255,255,.88)}
 .sd-code-hero .sdh-stage::before{content:"";position:absolute;left:1%;right:1%;top:43%;height:71%;border-radius:0 0 50% 50% / 0 0 83% 83%;background:linear-gradient(to bottom,rgba(173,214,252,.26),rgba(82,156,234,.19) 40%,rgba(43,111,205,.05) 85%,transparent);border-bottom:1px solid rgba(195,225,249,.52);box-shadow:0 8px 16px rgba(63,135,212,.12)}
.sd-code-hero .sdh-stage::after{content:"";position:absolute;inset:18% 9% 16%;border-radius:50%;border:1px solid rgba(255,255,255,.84);box-shadow:0 0 15px rgba(86,168,255,.14)}
html.dark .sd-code-hero{--sdh-tint:#69c7ff;--sdh-tint-soft:rgba(19,98,215,.27);--sdh-accent:#77caff;border-color:rgba(139,193,233,.36);background:radial-gradient(circle at 76% 37%,rgba(20,81,165,.39),transparent 32%),radial-gradient(ellipse at 53% 112%,rgba(14,75,150,.36),transparent 54%),linear-gradient(123deg,#041426 0%,#0b2344 54%,#071a31 100%);box-shadow:0 15px 40px rgba(0,8,20,.35),inset 0 1px 0 rgba(198,230,255,.18)}
html.dark .sd-code-hero::before{border-color:rgba(167,212,248,.21)}
html.dark .sd-code-hero::after{border-color:rgba(50,145,245,.33)}
html.dark .sd-code-hero .sdh-orbit{border-color:rgba(68,159,255,.75);box-shadow:0 0 15px rgba(40,144,255,.08)}
html.dark .sd-code-hero .sdh-orbit--outer{border-color:rgba(64,158,255,.58)}
html.dark .sd-code-hero .sdh-glass-card{border-color:rgba(138,207,255,.73);background:linear-gradient(135deg,rgba(91,168,249,.15),rgba(41,107,187,.10) 50%,rgba(18,80,159,.19));box-shadow:inset 1px 2px 1px rgba(201,235,255,.42),inset -2px -3px 17px rgba(27,95,178,.13),0 10px 32px rgba(3,14,33,.13),0 0 25px rgba(43,140,253,.24)}
html.dark .sd-code-hero .sdh-glass-card::before{background:linear-gradient(114deg,transparent 12%,rgba(201,234,255,.13) 30%,transparent 46%,rgba(63,171,255,.08) 70%,transparent 86%)}
html.dark .sd-code-hero .sdh-bubble{border-color:rgba(157,218,255,.76);background:radial-gradient(circle at 27% 19%,rgba(235,250,255,.89),rgba(68,163,255,.78) 23%,rgba(6,83,193,.61) 64%,rgba(5,41,121,.89) 91%);box-shadow:inset -7px -9px 17px rgba(0,18,77,.39),0 0 24px rgba(36,129,247,.33)}
html.dark .sd-code-hero .sdh-stage{border-color:rgba(110,197,255,.8);background:linear-gradient(180deg,rgba(66,157,250,.27),rgba(23,82,174,.22) 60%,rgba(7,44,111,.52));box-shadow:0 4px 25px rgba(21,109,234,.29),0 0 17px rgba(61,157,255,.22),inset 0 -6px 18px rgba(5,73,175,.29)}
html.dark .sd-code-hero .sdh-stage::before{background:linear-gradient(to bottom,rgba(41,135,244,.38),rgba(9,81,189,.34) 45%,rgba(5,50,127,.1) 92%,transparent);border-bottom-color:rgba(61,160,255,.55);box-shadow:0 10px 19px rgba(0,24,98,.29)}
html.dark .sd-code-hero .sdh-stage::after{border-color:rgba(105,190,255,.69);box-shadow:0 0 18px rgba(38,130,251,.23)}
html.dark .sd-code-hero .sdh-cta{background:linear-gradient(145deg,#318fff,#0758ce 77%);box-shadow:inset 0 2px 1px rgba(210,241,255,.44),0 7px 22px rgba(0,111,252,.31),0 0 13px rgba(28,145,255,.24)}
@media(max-width:1100px) and (min-width:761px){.sd-code-hero{height:395px;padding-inline:25px;grid-template-columns:minmax(0,47fr) minmax(0,53fr)}.sd-code-hero .sdh-title{font-size:clamp(34px,4.3vw,48px)}.sd-code-hero .sdh-glass-label{font-size:8px;letter-spacing:.14em}}
@media(max-width:760px){
.sd-code-hero{width:calc(100% - 26px);max-width:calc(100% - 26px);grid-template-columns:minmax(0,54fr) minmax(0,46fr);height:clamp(236px,66vw,270px);min-height:0;margin:10px auto 13px;padding:13px 11px 13px 13px;border-radius:21px}
.sd-code-hero .sdh-copy{align-self:center;max-width:100%}
.sd-code-hero .sdh-title{font-size:clamp(23px,6.7vw,26px);line-height:1.08;letter-spacing:-.045em}
.sd-code-hero .sdh-description{font-size:9.3px;line-height:1.46;max-width:20ch;margin-top:8px}
.sd-code-hero .sdh-cta{margin-top:12px;min-height:44px;padding:8px 10px;gap:6px;font-size:9px;line-height:1.3}
.sd-code-hero .sdh-cta-arrow{font-size:14px}
.sd-code-hero .sdh-visual{height:100%}
.sd-code-hero .sdh-glass-card{left:5%;top:22%;width:83%;height:53%;border-radius:15px;gap:5px;transform:perspective(600px) rotateY(-5deg)}
.sd-code-hero .sdh-glass-label{font-size:6.3px;letter-spacing:.075em;transform:translateY(-2px)}
.sd-code-hero .sdh-glass-message{gap:3px}
.sd-code-hero .sdh-glass-message span:first-child{font-size:clamp(9px,2.5vw,11px)}
.sd-code-hero .sdh-glass-message span:last-child{font-size:clamp(8px,2.15vw,9.5px)}
.sd-code-hero .sdh-orbit{width:117%;top:3%;right:-15%}
.sd-code-hero .sdh-orbit--outer{width:143%;right:-73%;top:23%}
.sd-code-hero .sdh-bubble{width:39px;right:2%;top:18%}
.sd-code-hero .sdh-bubble--low{width:35px;left:1%;top:69%;bottom:auto}
.sd-code-hero .sdh-stage{height:19%;bottom:7%;left:2%;right:-14%}
.sd-code-hero::after{right:-8%;top:-20%;width:70%}
}
@media(max-width:370px){.sd-code-hero{grid-template-columns:minmax(0,56fr) minmax(0,44fr);padding-left:11px;padding-right:7px}.sd-code-hero .sdh-title{font-size:22px}.sd-code-hero .sdh-description{font-size:8.7px}.sd-code-hero .sdh-cta{font-size:8.5px;padding:0 9px}}
@media(prefers-reduced-motion:reduce){.sd-code-hero .sdh-cta{transition:none}.sd-code-hero .sdh-cta--zalo::before{animation:none;opacity:.8}}