/* Giao diện trang Điện năng lượng mặt trời. */
.solar-page {
    --solar-muted: #6b6b6b;
    --solar-soft: #f7f7f5;
    --solar-card: #fff;
    color: var(--text);
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    line-height: 1.65;
}

.solar-page *,
.solar-page *::before,
.solar-page *::after {
    box-sizing: border-box;
}

.solar-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solar-page h1,
.solar-page h2,
.solar-page h3,
.solar-page h4 {
    margin: 0;
    color: var(--black);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.solar-page h2 {
    font-size: clamp(33px, 4vw, 41px);
}

.solar-page .section {
    padding: 100px 0;
}

.solar-page .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #8b6d00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.solar-page .eyebrow::before {
    width: 32px;
    height: 3px;
    border-radius: 99px;
    background: var(--yellow);
    content: "";
}

.solar-page .section-head {
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 54px;
}

.solar-page .section-head p {
    max-width: 500px;
    margin: 0;
    color: var(--solar-muted);
}

.solar-page .btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #111;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.solar-page .btn:hover {
    transform: translateY(-2px);
}

.solar-page .btn-primary {
    background: var(--yellow);
    box-shadow: 0 10px 28px rgba(244, 196, 0, .22);
}

.solar-page .btn-primary:hover {
    background: var(--yellow-2);
}

/* Hero mô phỏng Solar */
.solar-hero {
    position: relative;
    padding: 154px 0 80px;
    overflow: hidden;
    background: radial-gradient(circle at 84% 20%, rgba(244, 196, 0, .18), transparent 24%), #101010;
    color: #fff;
}

.solar-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(0, 0, 0, .1), rgba(244, 196, 0, .05));
    content: "";
}

.solar-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .94fr 1.06fr;
    gap: 64px;
    align-items: center;
}

.solar-copy {
    max-width: 625px;
}

.solar-hero .eyebrow {
    color: #ffe899;
}

.solar-copy h1 {
    max-width: 620px;
    color: #fff;
    font-size: clamp(42px, 5.25vw, 62px);
}

.solar-copy .accent {
    display: block;
    color: var(--yellow);
}

.solar-copy p {
    margin: 24px 0 30px;
    color: rgba(255, 255, 255, .76);
    font-size: 17px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions .btn-outline {
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .04);
    color: #fff;
}

.hero-actions .btn-outline:hover {
    border-color: var(--yellow);
    background: rgba(244, 196, 0, .13);
}

.hero-trust,
.solar-intro-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 28px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
}

.hero-trust span,
.solar-intro-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-trust i,
.solar-intro-trust i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 4px rgba(244, 196, 0, .12);
}

.solar-visual {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background: radial-gradient(circle at center, rgba(244, 196, 0, .18), transparent 32%), linear-gradient(145deg, #191919, #0a0a0a);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .28);
}

.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(244, 196, 0, .14);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 44px rgba(244, 196, 0, .025), 0 0 0 88px rgba(244, 196, 0, .018);
    animation: solar-orbit 22s linear infinite;
}

.solar-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    border: 1px dashed rgba(244, 196, 0, .32);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: solar-orbit 17s linear infinite reverse;
}

.solar-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: 106px;
    height: 106px;
    place-items: center;
    border-radius: 26px;
    background: var(--yellow);
    box-shadow: 0 0 0 14px rgba(244, 196, 0, .1), 0 18px 45px rgba(244, 196, 0, .25);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: solar-core 4s ease-in-out infinite;
}

.solar-core svg {
    width: 78px;
    height: 78px;
    transform: rotate(-45deg);
}

.solar-node {
    position: absolute;
    z-index: 2;
    width: 132px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 12px;
    background: rgba(22, 22, 22, .85);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.solar-node b,
.solar-node span {
    display: block;
}

.solar-node b {
    color: #fff;
    font-size: 10px;
}

.solar-node span {
    margin-top: 3px;
    color: #a8a8a8;
    font-size: 9px;
}

.solar-node.n1 {
    top: 85px;
    left: 38px;
}

.solar-node.n2 {
    bottom: 150px;
    left: 38px;
}

.solar-node.n3 {
    top: 85px;
    right: 38px;
}

.solar-node.n4 {
    right: 38px;
    bottom: 150px;
}

.solar-link {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170px;
    height: 1px;
    background: linear-gradient(90deg, rgba(244, 196, 0, .1), var(--yellow), rgba(244, 196, 0, .1));
    transform-origin: 0 50%;
}

.solar-link.l1 {
    transform: rotate(36deg);
}

.solar-link.l2 {
    transform: rotate(-36deg);
}

.solar-link.l3 {
    transform: rotate(144deg);
}

.solar-link.l4 {
    transform: rotate(216deg);
}

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 14px var(--yellow);
    animation: solar-pulse 2.7s ease-in-out infinite;
}

.particle.p1 {
    top: 19%;
    left: 34%
}

.particle.p2 {
    top: 28%;
    right: 25%;
    animation-delay: .4s
}

.particle.p3 {
    bottom: 31%;
    left: 29%;
    animation-delay: .9s
}

.particle.p4 {
    bottom: 24%;
    right: 27%;
    animation-delay: 1.3s
}

.particle.p5 {
    top: 48%;
    left: 19%;
    animation-delay: 1.7s
}

.particle.p6 {
    top: 53%;
    right: 17%;
    animation-delay: 2.1s
}

.solar-meter {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 3;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 15px;
    background: rgba(13, 13, 13, .78);
    backdrop-filter: blur(13px);
}

.solar-meter-top,
.solar-data {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.solar-meter-top {
    color: #aaa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.solar-meter-top strong {
    color: var(--yellow);
}

.solar-track {
    height: 6px;
    margin: 15px 0;
    overflow: hidden;
    border-radius: 99px;
    background: #303030;
}

.solar-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--yellow), #fff0a7);
}

.solar-data>div {
    flex: 1;
}

.solar-data div+div {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .11);
}

.solar-data b,
.solar-data span {
    display: block;
}

.solar-data b {
    color: #fff;
    font-size: 15px;
}

.solar-data span {
    margin-top: 3px;
    color: #8b8b8b;
    font-size: 9px;
    text-transform: uppercase;
}

/* Intro */
.solar-intro-alt {
    background: #fff;
}

.solar-intro-shell {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--solar-soft);
}

.solar-intro-main {
    padding: 20px;
}

.solar-intro-main h2 {
    max-width: 610px;
}

.solar-intro-main>p {
    max-width: 620px;
    margin: 19px 0 26px;
    color: var(--solar-muted);
}

.solar-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.solar-intro-actions .btn-dark {
    background: #171717;
    color: #fff;
}

.solar-intro-actions .btn-dark:hover {
    background: #303030;
}

.solar-intro-trust {
    color: #666;
}

.solar-intro-side {
    display: grid;
    gap: 16px;
}

.solar-score-card {
    padding: 23px;
    border-radius: 17px;
    background: #151515;
    color: #fff;
}

.solar-score-top {
    display: flex;
    justify-content: space-between;
    color: #aaa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.solar-score-top strong {
    color: var(--yellow);
    font-size: 20px;
}

.solar-ring {
    display: grid;
    width: 178px;
    height: 178px;
    place-items: center;
    margin: 20px auto;
    border: 15px solid rgba(244, 196, 0, .16);
    border-top-color: var(--yellow);
    border-right-color: #ffdb43;
    border-radius: 50%;
    transform: rotate(24deg);
}

.ring-center {
    max-width: 105px;
    text-align: center;
    transform: rotate(-24deg);
}

.ring-center b,
.ring-center span {
    display: block;
}

.ring-center b {
    color: var(--yellow);
    font: 800 23px/1 "Montserrat", sans-serif;
}

.ring-center span {
    margin-top: 7px;
    color: #bdbdbd;
    font-size: 10px;
    line-height: 1.4;
}

.solar-score-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.solar-score-list div+div {
    border-left: 1px solid rgba(255, 255, 255, .12);
    padding-left: 10px;
}

.solar-score-list b,
.solar-score-list span {
    display: block;
}

.solar-score-list b {
    color: #fff;
    font-size: 16px;
}

.solar-score-list span {
    margin-top: 4px;
    color: #9e9e9e;
    font-size: 9px;
    text-transform: uppercase;
}

.solar-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.solar-mini-card {
    min-height: 190px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.mini-label {
    color: #8b6d00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.solar-mini-card h3 {
    margin-top: 14px;
    font-size: 20px;
}

.solar-mini-card p {
    margin: 9px 0 0;
    color: var(--solar-muted);
    font-size: 12px;
}

.solar-mini-card.image {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #111;
}

.solar-mini-card.image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .72));
    content: "";
}

.overlay-note {
    position: absolute;
    right: 14px;
    bottom: 13px;
    left: 14px;
    z-index: 1;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}

/* Bento lợi ích và giải pháp */
.solar-benefits-bento {
    background: #f5f5f3;
}

.benefit-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.bento-hero {
    display: flex;
    min-height: 330px;
    grid-column: span 2;
    grid-row: span 2;
    flex-direction: column;
    justify-content: space-between;
    padding: 31px;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(circle at 88% 12%, rgba(244, 196, 0, .33), transparent 30%), #151515;
    color: #fff;
}

.bento-badge {
    align-self: flex-start;
    padding: 7px 10px;
    border: 1px solid rgba(244, 196, 0, .34);
    border-radius: 99px;
    color: #ffe899;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bento-hero h3 {
    max-width: 470px;
    color: #fff;
    font-size: clamp(26px, 3vw, 34px);
}

.bento-hero p {
    max-width: 485px;
    color: rgba(255, 255, 255, .7);
}

.bento-metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.bento-metric-row div {
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 13px;
}

.bento-metric-row strong,
.bento-metric-row span {
    display: block;
}

.bento-metric-row strong {
    color: var(--yellow);
    font: 800 25px/1 "Montserrat", sans-serif;
}

.bento-metric-row span {
    margin-top: 7px;
    color: #aaa;
    font-size: 10px;
}

.bento-card {
    min-height: 155px;
    padding: 22px;
    border: 1px solid #e4e4e1;
    border-radius: 15px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .07);
}

.bento-no {
    color: #9a7900;
    font: 800 12px/1 "Montserrat", sans-serif;
}

.bento-card h3 {
    margin-top: 19px;
    font-size: 17px;
}

.bento-card p {
    margin: 8px 0 0;
    color: var(--solar-muted);
    font-size: 12px;
    line-height: 1.55;
}

.bento-strip {
    display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 19px 23px;
    border-radius: 14px;
    background: #fff3bb;
}

.bento-strip div+div {
    border-left: 1px solid rgba(111, 87, 0, .17);
    padding-left: 18px;
}

.bento-strip strong,
.bento-strip span {
    display: block;
}

.bento-strip strong {
    color: #5c4800;
    font-size: 13px;
}

.bento-strip span {
    color: #715b00;
    font-size: 15px;
}

.solar-solutions-alt {
    background: #fff;
}

.solution-rows {
    display: grid;
    gap: 22px;
}

.solution-row {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    min-height: 310px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.solution-row.reverse .solution-row-media {
    order: 2;
}

.solution-row-media {
    min-height: 280px;
}

.solution-row-content {
    align-self: center;
    padding: 37px 42px;
}

.row-tag {
    color: #8b6d00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.solution-row h3 {
    margin-top: 11px;
    font-size: 29px;
}

.solution-row p {
    margin: 12px 0 17px;
    color: var(--solar-muted);
}

.solution-row ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-row li {
    position: relative;
    padding-left: 19px;
    color: #4e4e4e;
    font-size: 13px;
}

.solution-row li::before {
    position: absolute;
    top: .6em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
    content: "";
}

/* Lộ trình, dashboard, FAQ, CTA */
.solar-roadmap {
    background: #f7f7f5;
}

.roadmap-wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.roadmap-line {
    position: absolute;
    top: 22px;
    right: 10%;
    left: 10%;
    height: 1px;
    background: #dbc154;
}

.roadmap-step {
    position: relative;
    z-index: 1;
}

.roadmap-index {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--yellow);
    color: #111;
    font: 800 12px/1 "Montserrat", sans-serif;
}

.roadmap-card {
    min-height: 210px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.roadmap-label {
    color: #957400;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.roadmap-card h3 {
    margin-top: 10px;
    font-size: 19px;
}

.roadmap-card p {
    margin: 10px 0 0;
    color: var(--solar-muted);
    font-size: 13px;
}

.solar-tech-dashboard {
    background: #fff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 25px;
}

.dashboard-panel {
    padding: 30px;
    border-radius: 19px;
    background: #161616;
    color: #fff;
}

.panel-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.panel-top>strong {
    color: #fff;
    font: 700 16px "Montserrat", sans-serif;
}

.dash-badge {
    padding: 7px 10px;
    border: 1px solid rgba(255, 216, 77, .2);
    border-radius: 99px;
    color: #ffe899;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 27px;
}

.dash-stat {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
}

.dash-stat.large {
    grid-column: span 2;
}

.dash-stat b,
.dash-stat span {
    display: block;
}

.dash-stat b {
    color: var(--yellow);
    font: 800 26px/1 "Montserrat", sans-serif;
}

.dash-stat span {
    margin-top: 8px;
    color: #aaa;
    font-size: 10px;
}

.dash-bars {
    display: grid;
    gap: 15px;
    margin-top: 24px;
}

.bar-head {
    display: flex;
    justify-content: space-between;
    color: #c8c8c8;
    font-size: 11px;
}

.bar-head b {
    color: var(--yellow);
}

.bar {
    height: 6px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #333;
}

.bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--yellow), #ffe994);
}

.dashboard-checklist {
    display: grid;
    gap: 12px;
}

.check-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.check-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: #fff3bb;
    color: #725b00;
    font-weight: 900;
}

.check-item h3 {
    font-size: 16px;
}

.check-item p {
    margin: 7px 0 0;
    color: var(--solar-muted);
    font-size: 12px;
}

.solar-faq-alt {
    background: #f7f7f5;
}

.faq-alt-list {
    display: grid;
    gap: 12px;
    max-width: 900px;
}

.faq-alt-item {
    overflow: hidden;
    border: 1px solid #e2e2df;
    border-radius: 13px;
    background: #fff;
}

.faq-alt-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 23px;
    cursor: pointer;
    color: #181818;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    list-style: none;
}

.faq-alt-item summary::-webkit-details-marker {
    display: none;
}

.faq-alt-item summary::after {
    color: #8b6d00;
    content: "+";
    font-size: 23px;
    font-weight: 400;
}

.faq-alt-item[open] summary::after {
    content: "−";
}

.faq-answer {
    padding: 0 23px 20px;
    color: var(--solar-muted);
    font-size: 14px;
}

.cta-wrap {
    padding: 80px 0;
    background: #fff;
}

.cta {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 45px;
    align-items: center;
    padding: 50px 54px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--yellow);
}

.cta::after {
    position: absolute;
    right: -120px;
    bottom: -170px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 60px rgba(255, 255, 255, .12);
}

.cta>* {
    position: relative;
    z-index: 1;
}

.cta .eyebrow {
    color: #5f4b00;
}

.cta h2 {
    max-width: 640px;
}

.cta p {
    max-width: 620px;
    margin: 15px 0 0;
    color: rgba(16, 16, 16, .74);
}

.cta-actions {
    display: grid;
    gap: 12px;
}

.cta .btn {
    border: 1px solid #171717;
    background: #171717;
    color: #fff;
}

.cta .btn:hover {
    background: #303030;
}

.cta .btn.outline {
    background: transparent;
    color: #171717;
}

.cta .btn.outline:hover {
    background: rgba(255, 255, 255, .32);
}

.solar-page .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
}

.solar-page .reveal.show {
    opacity: 1;
    transform: none;
}

@keyframes solar-orbit {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes solar-core {
    50% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(-8px);
    }
}

@keyframes solar-pulse {
    50% {
        transform: scale(1.7);
        opacity: .35;
    }
}

@media (max-width:980px) {
    .solar-hero {
        padding-top: 136px;
    }

    .solar-hero-grid,
    .solar-intro-shell,
    .dashboard-grid,
    .cta,
    .solar-page .section-head {
        grid-template-columns: 1fr;
    }

    .solar-page .section-head {
        gap: 17px;
    }

    .solar-page .section-head p {
        max-width: none;
    }

    .solar-visual {
        max-width: 760px;
        min-height: 525px;
    }

    .benefit-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-strip {
        grid-column: span 2;
    }

    .roadmap-wrap {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
    }

    .roadmap-line {
        display: none;
    }

    .leaders-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-row,
    .solution-row.reverse {
        grid-template-columns: 1fr 1fr;
    }

    .solution-row.reverse .solution-row-media {
        order: 0;
    }
}

@media (max-width:640px) {
    .solar-page .section {
        padding: 68px 0;
    }

    .solar-hero {
        padding: 124px 0 64px;
    }

    .solar-copy h1 {
        font-size: 40px;
    }

    .solar-copy p {
        font-size: 15px;
    }

    .hero-trust,
    .solar-intro-trust {
        display: grid;
        gap: 10px;
    }

    .solar-visual {
        min-height: 460px;
        border-radius: 20px;
    }

    .solar-node {
        width: 104px;
        padding: 10px;
    }

    .solar-node.n1 {
        top: 48px;
        left: 16px;
    }

    .solar-node.n2 {
        bottom: 131px;
        left: 16px;
    }

    .solar-node.n3 {
        top: 48px;
        right: 16px;
    }

    .solar-node.n4 {
        right: 16px;
        bottom: 131px;
    }

    .solar-link {
        width: 120px;
    }

    .solar-core {
        width: 84px;
        height: 84px;
        border-radius: 21px;
    }

    .solar-core svg {
        width: 62px;
        height: 62px;
    }

    .solar-intro-shell {
        padding: 14px;
    }

    .solar-intro-main {
        padding: 15px;
    }

    .solar-mini-grid,
    .benefit-bento-grid,
    .bento-metric-row,
    .solar-score-list,
    .dash-stat-grid {
        grid-template-columns: 1fr;
    }

    .solar-score-list div+div,
    .bento-strip div+div {
        border-left: 0;
        border-top: 1px solid rgba(111, 87, 0, .17);
        padding: 12px 0 0;
    }

    .solar-score-list div+div {
        border-color: rgba(255, 255, 255, .12);
    }

    .bento-hero,
    .bento-strip {
        grid-column: span 1;
    }

    .bento-strip {
        grid-template-columns: 1fr;
    }

    .solution-row,
    .solution-row.reverse {
        grid-template-columns: 1fr;
    }

    .solution-row.reverse .solution-row-media {
        order: 0;
    }

    .solution-row-content {
        padding: 27px 23px;
    }

    .roadmap-wrap {
        grid-template-columns: 1fr;
    }

    .roadmap-card {
        min-height: 0;
    }

    .dashboard-panel {
        padding: 22px;
    }

    .panel-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .dash-stat.large {
        grid-column: auto;
    }

    .cta {
        padding: 34px 24px;
        gap: 28px;
    }
}

/* Căn chỉnh fidelity theo bản HTML Solar gốc. */
.solar-page h2 {
    font-size: clamp(23px, 4vw, 37px);
    line-height: 1.4;
}

.solar-page .solar-hero {
    min-height: 840px;
    display: flex;
    align-items: center;
    padding: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255, 196, 0, .14), transparent 24%), radial-gradient(circle at 20% 26%, rgba(255, 218, 100, .06), transparent 22%), linear-gradient(105deg, #090909 0%, #101010 54%, #171717 100%);
}

.solar-page .solar-hero::before {
    background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.solar-page .solar-hero::after {
    position: absolute;
    top: -140px;
    right: -180px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(244, 196, 0, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 90px rgba(244, 196, 0, .022), 0 0 0 180px rgba(244, 196, 0, .012);
    content: "";
}

.solar-page .solar-hero-grid {
    grid-template-columns: 1.02fr .98fr;
    gap: 56px;
    padding-top: 84px;
}

.solar-page .solar-copy {
    max-width: 720px;
    padding: 76px 0 86px;
}

.solar-page .solar-hero .eyebrow {
    padding: 9px 13px;
    border: 1px solid rgba(255, 216, 77, .18);
    border-radius: 999px;
    background: rgba(255, 196, 0, .08);
    color: #ffe99a;
}

.solar-page .solar-hero .eyebrow::before {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 18px rgba(255, 216, 77, .9);
}

.solar-page .solar-copy h1 {
    max-width: 760px;
    font-size: clamp(35px, 6vw, 49px);
}

.solar-page .solar-copy .accent {
    background: linear-gradient(90deg, #ffe672 0%, #ffbf00 45%, #ff8a00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.solar-page .solar-copy p {
    max-width: 650px;
    line-height: 1.82;
}

.solar-page .hero-trust {
    gap: 22px;
    margin-top: 24px;
    color: rgba(255, 255, 255, .58);
}

.solar-page .solar-visual {
    width: 100%;
    min-height: 560px;
    max-width: 580px;
    margin-left: auto;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.solar-page .solar-orbit {
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 214, 60, .12);
    box-shadow: inset 0 0 70px rgba(255, 184, 0, .02), 0 0 100px rgba(255, 184, 0, .03);
    transform: translate(-50%, -50%);
    animation: bd-solar-orbit 24s linear infinite;
}

.solar-page .solar-orbit::before,
.solar-page .solar-orbit::after {
    position: absolute;
    border: 1px solid rgba(255, 214, 60, .10);
    border-radius: 50%;
    content: "";
    animation: bd-solar-orbit-float 9s ease-in-out infinite;
}

.solar-page .solar-orbit::before {
    inset: 58px;
}

.solar-page .solar-orbit::after {
    inset: 112px;
    animation-direction: reverse;
}

.solar-page .sun-rays {
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 206, 60, .18), transparent 62%);
    filter: blur(20px);
    transform: translate(-50%, -50%);
    animation: bd-solar-ambient 5.8s ease-in-out infinite;
}

.solar-page .particle {
    width: 4px;
    height: 4px;
    background: rgba(255, 226, 110, .92);
    box-shadow: 0 0 12px rgba(255, 208, 66, .95);
    animation: bd-solar-particle linear infinite;
}

.solar-page .particle.p1 {
    left: 24%;
    top: 18%;
    animation-duration: 9s
}

.solar-page .particle.p2 {
    left: 35%;
    top: 68%;
    animation-duration: 7.8s;
    animation-delay: -1s
}

.solar-page .particle.p3 {
    left: 69%;
    top: 26%;
    animation-duration: 8.4s;
    animation-delay: -2.2s
}

.solar-page .particle.p4 {
    left: 75%;
    top: 64%;
    animation-duration: 10s;
    animation-delay: -.6s
}

.solar-page .particle.p5 {
    left: 50%;
    top: 16%;
    animation-duration: 7.2s;
    animation-delay: -2s
}

.solar-page .particle.p6 {
    left: 56%;
    top: 74%;
    animation-duration: 8.8s;
    animation-delay: -3.1s
}

.solar-page .solar-core {
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(255, 216, 77, .98), rgba(255, 151, 0, .96));
    box-shadow: 0 0 0 10px rgba(255, 184, 0, .06), 0 0 56px rgba(255, 184, 0, .34), 0 22px 80px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: bd-solar-core-hover 5.5s ease-in-out infinite, bd-solar-core-pulse 2.8s ease-in-out infinite;
}

.solar-page .solar-core::before,
.solar-page .solar-core::after {
    position: absolute;
    inset: -10px;
    z-index: -1;
    border: 1px solid rgba(255, 210, 80, .22);
    border-radius: 40px;
    content: "";
    opacity: .55;
    animation: bd-solar-ripple 2.5s ease-out infinite;
}

.solar-page .solar-core::after {
    animation-delay: 1.2s;
}

.solar-page .solar-core svg {
    width: 76px;
    height: 76px;
}

.solar-page .solar-node {
    width: 148px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(28, 28, 28, .92), rgba(18, 18, 18, .78));
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    animation: bd-solar-node 6.5s ease-in-out infinite;
}

.solar-page .solar-node b {
    font: 800 12px "Montserrat", sans-serif;
}

.solar-page .solar-node span {
    color: #afafaf;
    font-size: 10px;
}

.solar-page .solar-node.n1 {
    left: 16px;
    top: 22%
}

.solar-page .solar-node.n2 {
    left: 16px;
    bottom: 24%
}

.solar-page .solar-node.n3 {
    right: 16px;
    top: 22%
}

.solar-page .solar-node.n4 {
    right: 16px;
    bottom: 24%
}

.solar-page .solar-link {
    z-index: 3;
    width: 126px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 184, 0, .2) 0%, rgba(255, 207, 51, .84) 38%, rgba(255, 232, 130, .98) 62%, rgba(255, 178, 0, .5) 100%);
    box-shadow: 0 0 6px rgba(255, 194, 0, .42), 0 0 14px rgba(255, 170, 0, .17);
}

.solar-page .solar-link::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #ffe56a;
    box-shadow: 0 0 10px rgba(255, 225, 95, 1), 0 0 20px rgba(255, 178, 0, .72);
    content: "";
    animation: bd-solar-packet 2.35s linear infinite;
}

.solar-page .solar-link.l2::before {
    animation-delay: .48s
}

.solar-page .solar-link.l3::before {
    animation-delay: .92s
}

.solar-page .solar-link.l4::before {
    animation-delay: 1.38s
}

.solar-page .solar-link.l1 {
    left: 170px;
    top: 125px;
    transform: rotate(36.5deg)
}

.solar-page .solar-link.l2 {
    left: 170px;
    top: 350px;
    transform: rotate(-36.5deg)
}

.solar-page .solar-link.l3 {
    left: 394px;
    top: 125px;
    transform: rotate(143.5deg)
}

.solar-page .solar-link.l4 {
    left: 394px;
    top: 350px;
    transform: rotate(216.5deg)
}

.solar-page .core-impact {
    position: absolute;
    z-index: 6;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffe569;
    box-shadow: 0 0 12px rgba(255, 220, 80, .95), 0 0 24px rgba(255, 170, 0, .55);
    animation: bd-solar-impact 2.35s ease-in-out infinite;
}

.solar-page .core-impact.i1 {
    left: 236px;
    top: 210px
}

.solar-page .core-impact.i2 {
    left: 236px;
    top: 300px;
    animation-delay: .48s
}

.solar-page .core-impact.i3 {
    right: 236px;
    top: 210px;
    animation-delay: .92s
}

.solar-page .core-impact.i4 {
    right: 236px;
    top: 300px;
    animation-delay: 1.38s
}

.solar-page .solar-meter {
    right: auto;
    bottom: -6px;
    left: 50%;
    width: 430px;
    max-width: calc(100% - 32px);
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(26, 26, 26, .9), rgba(15, 15, 15, .72));
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
}

.solar-page .solar-meter-top {
    font-size: 11px;
    color: #9a9a9a;
    letter-spacing: .09em;
}

.solar-page .solar-meter-top strong {
    color: #ffe46e;
}

.solar-page .solar-mobile-links {
    display: none;
}

.solar-page .solar-track {
    height: 5px;
    margin-top: 12px;
}

.solar-page .solar-track span {
    background: linear-gradient(90deg, #ffd84d, #ffb000, #ff8500);
    box-shadow: 0 0 18px rgba(255, 176, 0, .8);
    animation: bd-solar-flow 3s ease-in-out infinite alternate;
}

.solar-page .solar-track span::after {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, .24) 18px 26px, rgba(255, 255, 255, 0) 26px 42px);
    content: "";
    animation: bd-solar-track 1.9s linear infinite;
    mix-blend-mode: screen;
}

.solar-page .solar-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.solar-page .solar-data div+div {
    padding-left: 0;
    border-left: 0;
}

.solar-page .solar-data div {
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.solar-page .solar-data div:last-child {
    border-right: 0;
}

.solar-page .solar-data span {
    font-size: 10px;
}

/* Scale chữ của từng section theo bản thiết kế gốc. */
.solar-page .solar-intro-main>p {
    font-size: 15px;
    line-height: 1.82;
}

.solar-page .solar-mini-card h3 {
    font-size: 22px;
}

.solar-page .solar-mini-card p {
    font-size: 14px;
    line-height: 1.7;
}

.solar-page .bento-hero h3 {
    font-size: clamp(25px, 3vw, 42px);
}

.solar-page .bento-hero p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.75;
}

.solar-page .bento-metric-row strong {
    font-size: 26px;
}

.solar-page .bento-card h3 {
    font-size: 17px;
}

.solar-page .bento-card p {
    font-size: 15px;
    line-height: 1.68;
}

.solar-page .bento-strip strong {
    font-size: 15px;
}

.solar-page .solution-row-content h3 {
    font-size: 28px;
}

.solar-page .solution-row-content p {
    font-size: 15px;
    line-height: 1.76;
}

.solar-page .solution-row-content li {
    font-size: 15px;
}

.solar-page .roadmap-index {
    font-size: 18px;
}

.solar-page .roadmap-card h3 {
    font-size: 17px;
    font-weight: 600;
}

.solar-page .roadmap-card p {
    font-size: 15px;
    line-height: 1.75;
}

.solar-page .panel-top>strong {
    font-size: 28px;
}

.solar-page .dash-stat b {
    font-size: 32px;
}

.solar-page .dash-stat span {
    font-size: 11px;
    line-height: 1.55;
}

.solar-page .bar-head {
    font-size: 12px;
}

.solar-page .check-item h3 {
    font-size: 17px;
    font-weight: 600;
}

.solar-page .check-item p {
    font-size: 14px;
    line-height: 1.7;
}

.solar-page .faq-alt-item summary {
    font-size: 17px;
    line-height: 1.5;
}

.solar-page .faq-answer {
    font-size: 15px;
    line-height: 1.75;
}

.solar-page .cta h2 {
    font-size: clamp(34px, 4vw, 50px);
}

@keyframes bd-solar-orbit {
    from {
        transform: translate(-50%, -50%) rotate(0)
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes bd-solar-orbit-float {

    0%,
    100% {
        opacity: .56
    }

    50% {
        opacity: 1
    }
}

@keyframes bd-solar-core-hover {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(0)
    }

    50% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(-8px)
    }
}

@keyframes bd-solar-core-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 10px rgba(255, 184, 0, .06), 0 0 56px rgba(255, 184, 0, .34), 0 22px 80px rgba(0, 0, 0, .35)
    }

    50% {
        box-shadow: 0 0 0 14px rgba(255, 184, 0, .08), 0 0 68px rgba(255, 184, 0, .42), 0 26px 90px rgba(0, 0, 0, .4)
    }
}

@keyframes bd-solar-ripple {
    0% {
        transform: scale(.92);
        opacity: .65
    }

    100% {
        transform: scale(1.35);
        opacity: 0
    }
}

@keyframes bd-solar-packet {
    0% {
        left: 0;
        opacity: 0;
        transform: scale(.75)
    }

    12%,
    82% {
        opacity: 1
    }

    100% {
        left: calc(100% - 8px);
        opacity: 0;
        transform: scale(1.15)
    }
}

@keyframes bd-solar-impact {

    0%,
    72%,
    100% {
        opacity: .2;
        transform: scale(.65)
    }

    84% {
        opacity: 1;
        transform: scale(1.22)
    }
}

@keyframes bd-solar-flow {
    from {
        width: 54%
    }

    to {
        width: 88%
    }
}

@keyframes bd-solar-track {
    from {
        transform: translateX(-20px)
    }

    to {
        transform: translateX(40px)
    }
}

@keyframes bd-solar-ambient {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: .62
    }

    50% {
        transform: translate(-50%, -50%) scale(1.04);
        opacity: 1
    }
}

@keyframes bd-solar-particle {
    0% {
        transform: translate3d(0, 10px, 0) scale(.7);
        opacity: 0
    }

    18% {
        opacity: .9
    }

    80% {
        opacity: .8
    }

    100% {
        transform: translate3d(10px, -18px, 0) scale(1.25);
        opacity: 0
    }
}

@keyframes bd-solar-node {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

@media (max-width:980px) {
    .solar-page .solar-copy {
        padding: 58px 0 22px;
        max-width: 100%
    }

    .solar-page .solar-visual {
        margin: 0 auto 50px
    }

    .solar-page .solar-hero-grid {
        padding-top: 88px;
        gap: 8px;
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px) {
    .solar-page .solar-hero {
        min-height: auto;
        padding: 0
    }

    .solar-page .solar-copy h1 {
        font-size: 32px
    }

    .solar-page .solar-visual {
        width: 100%;
        min-height: 410px;
        max-width: none;
        margin-bottom: 32px
    }

    .solar-page .solar-orbit {
        width: 300px;
        height: 300px
    }

    .solar-page .solar-orbit::before {
        inset: 42px
    }

    .solar-page .solar-orbit::after {
        inset: 82px
    }

    .solar-page .solar-core {
        width: 112px;
        height: 112px;
        border-radius: 24px
    }

    .solar-page .solar-core svg {
        width: 54px;
        height: 54px
    }

    .solar-page .solar-node {
        width: clamp(92px, 30vw, 108px);
        padding: 9px 10px
    }

    .solar-page .solar-node b {
        font-size: 10px
    }

    .solar-page .solar-node span {
        font-size: 8px
    }

    .solar-page .solar-node.n1,
    .solar-page .solar-node.n2 {
        left: 4px
    }

    .solar-page .solar-node.n3,
    .solar-page .solar-node.n4 {
        right: 4px
    }

    .solar-page .solar-link {
        display: none;
    }

    .solar-page .solar-mobile-links {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .solar-page .solar-mobile-links line {
        stroke: rgba(255, 211, 67, .9);
        stroke-width: .65;
        stroke-linecap: round;
        stroke-dasharray: 3 3;
        filter: drop-shadow(0 0 2px rgba(255, 190, 0, .8));
        animation: bd-solar-mobile-link-flow 1.8s linear infinite;
    }

    .solar-page .solar-link.l1 {
        left: 112px;
        top: 94px;
        transform: rotate(35deg)
    }

    .solar-page .solar-link.l2 {
        left: 112px;
        top: 281px;
        transform: rotate(-35deg)
    }

    .solar-page .solar-link.l3 {
        left: auto;
        right: 112px;
        top: 94px;
        transform: rotate(145deg)
    }

    .solar-page .solar-link.l4 {
        left: auto;
        right: 112px;
        top: 281px;
        transform: rotate(215deg)
    }

    .solar-page .core-impact {
        width: 9px;
        height: 9px
    }

    .solar-page .core-impact.i1 {
        left: calc(50% - 54px);
        top: 144px
    }

    .solar-page .core-impact.i2 {
        left: calc(50% - 54px);
        top: 239px
    }

    .solar-page .core-impact.i3 {
        right: calc(50% - 54px);
        top: 144px
    }

    .solar-page .core-impact.i4 {
        right: calc(50% - 54px);
        top: 239px
    }

    .solar-page .solar-meter {
        bottom: 0;
        width: 88%;
        padding: 13px 14px;
        display: none;
    }

    .solar-page .solar-meter-top {
        font-size: 8px
    }

    .solar-page .solar-data b {
        font-size: 12px
    }

    .solar-page .solar-data span {
        font-size: 8px
    }
}

@keyframes bd-solar-mobile-link-flow {
    to {
        stroke-dashoffset: -12;
    }
}

.solar-page .solar-track span {
    animation: none;
}

.solar-page .solar-track span {
    position: relative;
    overflow: hidden;
}