/* Kỹ Năng Sống page: pastel blue / mint / yellow / pink blocks after the teacher's prototype. */
.hvo-life { --ls-ink:#1e293b; --ls-muted:#526177; --ls-blue:#2f72c4; color:var(--ls-ink); background:#fff; font-family:'Nunito',sans-serif; overflow:clip; }
.hvo-life *, .hvo-life *::before, .hvo-life *::after { box-sizing:border-box; }
.hvo-life img { display:block; max-width:100%; }
.hvo-life h1, .hvo-life h2, .hvo-life h3 { color:var(--ls-ink); font-family:inherit; font-weight:900; line-height:1.25; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.hvo-life h2 { font-size:clamp(26px,3vw,36px); }
.hvo-life h3 { font-size:20px; }
.hvo-life p { margin:0; }
.hvo-life ul { list-style:none; margin:0; padding:0; }
.hvo-life :is(a,button,[tabindex]):focus-visible { outline:3px solid #1d4ed8; outline-offset:4px; }
.hvo-life .ls-wrap { width:min(1216px,calc(100% - 64px)); margin-inline:auto; }
.hvo-life .ls-section { padding-block:80px; scroll-margin-top:110px; }
.hvo-life .ls-band { background:#f8fafc; border-block:1px solid #e8edf3; }
/* Faint graph-paper grid behind a section, faded out toward the top and bottom edges. */
.hvo-life .ls-grid-bg { position:relative; }
.hvo-life .ls-grid-bg::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right,#2f72c414 1px,transparent 1px),linear-gradient(to bottom,#2f72c414 1px,transparent 1px); background-size:44px 44px; background-position:center top; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%); }
.hvo-life .ls-grid-bg > .ls-wrap { position:relative; }

.hvo-life .ls-tone-blue { --ls-soft:#eaf5fa; --ls-line:#cfe6f3; --ls-strong:#3d84d6; --ls-on:#fff; --ls-text:#2563a8; }
.hvo-life .ls-tone-green { --ls-soft:#edf8ef; --ls-line:#cfecd5; --ls-strong:#4aa863; --ls-on:#fff; --ls-text:#2c7a41; }
.hvo-life .ls-tone-yellow { --ls-soft:#fff7dd; --ls-line:#f6e3a8; --ls-strong:#ffd166; --ls-on:#5b4300; --ls-text:#8a5a00; }
.hvo-life .ls-tone-pink { --ls-soft:#fff0f5; --ls-line:#fbd4e0; --ls-strong:#ee6c9d; --ls-on:#fff; --ls-text:#b83a6f; }
.hvo-life .ls-tone-purple { --ls-soft:#f5ecfa; --ls-line:#e5d3f1; --ls-strong:#9a7fd6; --ls-on:#fff; --ls-text:#6b4bb0; }

.hvo-life .ls-heading { max-width:780px; margin:0 auto 48px; text-align:center; }
.hvo-life .ls-heading h2 { margin-block:14px 0; }
.hvo-life .ls-heading p { margin-top:12px; font-size:16px; line-height:1.7; color:var(--ls-muted); }
.hvo-life .ls-eyebrow { display:inline-block; padding:6px 16px; border-radius:99px; background:#eaf5fa; color:#2563a8; font-size:12px; line-height:1.6; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hvo-life .ls-band .ls-eyebrow { background:#edf8ef; color:#2c7a41; }
.hvo-life .ls-compare-section .ls-eyebrow { background:#fff7dd; color:#8a5a00; }
.hvo-life .ls-icon { display:grid; place-items:center; flex-shrink:0; width:56px; height:56px; border-radius:16px; background:var(--ls-strong); color:var(--ls-on); font-size:24px; line-height:1; }
.hvo-life .ls-text { font-size:15px; line-height:1.75; color:var(--ls-muted); }
.hvo-life .ls-text p + p { margin-top:8px; }

.hvo-life .ls-button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:14px 30px; border:2px solid var(--ls-blue); border-radius:99px; background:var(--ls-blue); color:#fff; font:900 16px/1.4 'Nunito',sans-serif; text-align:center; text-decoration:none; box-shadow:0 10px 22px #2f72c42b; cursor:pointer; transition:transform .18s,box-shadow .18s,background-color .18s; }
.hvo-life .ls-button:hover { color:#fff; background:#265fa6; border-color:#265fa6; transform:translateY(-2px); box-shadow:0 14px 26px #2f72c438; }
.hvo-life .ls-button-light { background:#fff; color:var(--ls-blue); border-color:#bfdcf0; box-shadow:none; }
.hvo-life .ls-button-light:hover { background:#f0f8fd; color:var(--ls-blue); border-color:#9fcbe8; box-shadow:0 8px 18px #2f72c41a; }

.hvo-life .ls-hero { position:relative; background:linear-gradient(135deg,#e6f4f8 0%,#fff 50%,#fff0f5 100%); border-bottom:1px solid #dbeef6; }
.hvo-life .ls-hero::before, .hvo-life .ls-hero::after { content:""; position:absolute; border-radius:50%; filter:blur(36px); pointer-events:none; }
.hvo-life .ls-hero::before { top:36px; left:36px; width:112px; height:112px; background:#ffd16666; }
.hvo-life .ls-hero::after { bottom:36px; right:36px; width:176px; height:176px; background:#ff94b94d; }
.hvo-life .ls-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; gap:48px; padding-block:64px; }
.hvo-life .ls-hero-copy { min-width:0; }
.hvo-life .ls-badge { display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:99px; background:#e6f4f8; color:#2563a8; font-size:14px; line-height:1.5; font-weight:800; box-shadow:0 1px 2px #1e293b0f; }
.hvo-life .ls-badge i { width:10px; height:10px; flex-shrink:0; border-radius:50%; background:#ee6c9d; }
.hvo-life h1 { margin:20px 0 0; font-size:clamp(28px,3.4vw,46px); line-height:1.2; }
.hvo-life .ls-title-lead, .hvo-life .ls-title-main, .hvo-life .ls-title-age { display:block; }
.hvo-life .ls-title-main { text-transform:uppercase; background:linear-gradient(95deg,#2f72c4 5%,#d9508c 52%,#2f8f4c 96%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hvo-life .ls-title-age { margin-top:8px; font-size:.6em; font-weight:800; color:#475569; letter-spacing:0; }
.hvo-life .ls-lead { max-width:680px; margin-top:20px; font-size:17px; line-height:1.75; color:var(--ls-muted); }
.hvo-life .ls-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:520px; margin:26px 0 0; padding-top:20px; border-top:1px solid #dfe7ee; }
.hvo-life .ls-stats dt { font-size:clamp(22px,2.4vw,30px); line-height:1.2; font-weight:900; color:var(--ls-text); }
.hvo-life .ls-stats dd { margin:4px 0 0; font-size:14px; line-height:1.5; font-weight:600; color:#5b6880; }
.hvo-life .ls-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hvo-life .ls-hero-art { position:relative; width:100%; max-width:448px; margin-inline:auto; }
.hvo-life .ls-hero-picture { position:relative; margin:0; border:4px solid #fff; border-radius:28px; background:#e6f4f8; box-shadow:0 18px 40px #4a7fb029; overflow:hidden; aspect-ratio:4/3; }
.hvo-life .ls-hero-picture img { width:100%; height:100%; object-fit:cover; }
.hvo-life .ls-hero-picture figcaption { position:absolute; inset:auto 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid #fbd4e0; border-radius:16px; background:#fffffff2; box-shadow:0 8px 20px #1e293b1f; }
.hvo-life .ls-logo { display:flex; align-items:center; gap:1px; font-size:21px; line-height:1; font-weight:900; font-style:italic; }
.hvo-life .ls-logo b:nth-child(1) { color:#e63946; } .hvo-life .ls-logo b:nth-child(2) { color:#f5a700; } .hvo-life .ls-logo b:nth-child(3) { color:#1877f2; }
.hvo-life .ls-logo span { margin-left:7px; font-size:13px; line-height:1.05; font-style:normal; color:#2563a8; }
.hvo-life .ls-hero-picture figcaption > span:last-child { min-width:0; text-align:right; }
.hvo-life .ls-hero-picture figcaption strong { display:block; font-size:13px; line-height:1.4; color:var(--ls-ink); }
.hvo-life .ls-hero-picture figcaption small { display:block; font-size:12px; line-height:1.4; color:#5b6880; }
.hvo-life .ls-sticker { position:absolute; top:-20px; right:-16px; display:flex; align-items:center; gap:9px; max-width:170px; padding:11px 15px; border-radius:16px; background:#ffd166; color:#3b2f00; font-size:12px; line-height:1.35; font-weight:900; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 8px 18px #b98a0033; transform:rotate(3deg); }
.hvo-life .ls-sticker i { font-size:21px; color:#c96a00; }

.hvo-life .ls-importance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.hvo-life .ls-importance { display:flex; flex-direction:column; padding:30px; border:1px solid var(--ls-line); border-radius:24px; background:var(--ls-soft); transition:box-shadow .2s,transform .2s; }
.hvo-life .ls-importance:hover, .hvo-life .ls-benefit:hover { box-shadow:0 14px 30px #1e293b14; transform:translateY(-3px); }
.hvo-life .ls-importance h3 { margin:22px 0 10px; }
.hvo-life .ls-note { display:flex; gap:8px; margin-top:auto; padding-top:16px; border-top:1px solid var(--ls-line); font-size:14px; line-height:1.5; font-weight:800; color:var(--ls-text); }
.hvo-life .ls-importance .ls-text { margin-bottom:22px; }
.hvo-life .ls-note i { margin-top:3px; color:#3a9a55; }

.hvo-life .ls-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.hvo-life .ls-feature { display:flex; align-items:flex-start; gap:22px; padding:30px; border:1px solid #e8edf3; border-radius:24px; background:#fff; box-shadow:0 1px 3px #1e293b0a; transition:border-color .2s,box-shadow .2s; }
.hvo-life .ls-feature:hover { border-color:var(--ls-strong); box-shadow:0 10px 24px #1e293b12; }
.hvo-life .ls-feature .ls-icon { width:64px; height:64px; background:var(--ls-soft); color:var(--ls-text); font-size:28px; }
.hvo-life .ls-feature-number { display:block; font-size:12px; line-height:1.6; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--ls-text); }
.hvo-life .ls-feature h3 { margin:4px 0 8px; }
.hvo-life .ls-topics { margin-top:44px; padding:30px; border:1px solid #fbe1ea; border-radius:24px; background:#fff; box-shadow:0 1px 3px #1e293b0a; }
.hvo-life .ls-topics h3 { margin-bottom:22px; font-size:18px; text-align:center; }
.hvo-life .ls-topics ul { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.hvo-life .ls-topics li { display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 10px; border:1px solid var(--ls-line); border-radius:16px; background:var(--ls-soft); text-align:center; font-size:14px; line-height:1.4; font-weight:800; color:#334155; }
.hvo-life .ls-topics li > :first-child { font-size:24px; line-height:1; color:var(--ls-text); }

.hvo-life .ls-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:36px; }
.hvo-life .ls-tabs button { display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:11px 20px; border:0; border-radius:16px; background:#f1f5f9; color:#475569; font:800 15px/1.4 'Nunito',sans-serif; cursor:pointer; transition:background-color .18s,color .18s; }
.hvo-life .ls-tabs button:hover { background:#e2e8f0; }
.hvo-life .ls-tabs button[aria-selected=true] { background:var(--ls-blue); color:#fff; box-shadow:0 8px 18px #2f72c433; }
.hvo-life .ls-panel { min-height:250px; padding:30px; border:1px solid #e2e8f0; border-radius:24px; background:#f8fafc; }
.hvo-life .ls-panel-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.hvo-life .ls-panel-head .ls-icon { width:46px; height:46px; border-radius:13px; background:#fff; color:var(--ls-text); font-size:21px; box-shadow:0 1px 3px #1e293b14; }
.hvo-life .ls-panel-head p { margin-top:3px; font-size:14px; line-height:1.6; color:var(--ls-muted); }
.hvo-life .ls-panel ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hvo-life .ls-panel li { display:flex; gap:12px; padding:14px 16px; border:1px solid #e2e8f0; border-radius:14px; background:#fff; font-size:15px; line-height:1.6; font-weight:600; color:#334155; box-shadow:0 1px 2px #1e293b0a; }
.hvo-life .ls-panel li i { margin-top:4px; color:var(--ls-text); }

.hvo-life .ls-compare-section { background:linear-gradient(180deg,#f2f9fd 0%,#fff 100%); }
.hvo-life .ls-compare { border:1px solid #e8edf3; border-radius:24px; background:#fff; box-shadow:0 14px 34px #1e293b14; overflow:hidden; }
.hvo-life .ls-compare table { width:100%; border-collapse:collapse; text-align:left; }
.hvo-life .ls-compare thead th { padding:20px; background:#1e293b; color:#fff; font-size:16px; line-height:1.4; font-weight:900; }
.hvo-life .ls-compare thead th:nth-child(1) { width:24%; }
.hvo-life .ls-compare thead th:nth-child(2) { width:38%; background:var(--ls-blue); }
.hvo-life .ls-compare thead th:nth-child(3) { background:#334155; color:#e2e8f0; }
.hvo-life .ls-compare thead i { margin-right:8px; color:#ffd166; }
.hvo-life .ls-compare tbody tr { border-top:1px solid #edf1f5; }
.hvo-life .ls-compare tbody :is(th,td) { padding:18px 20px; font-size:15px; line-height:1.65; vertical-align:top; }
.hvo-life .ls-compare tbody th { font-weight:900; color:var(--ls-ink); }
.hvo-life .ls-compare tbody td:nth-of-type(1) { background:#f2f9fd; color:#24589a; font-weight:700; }
.hvo-life .ls-compare tbody td:nth-of-type(2) { color:#5b6880; }

.hvo-life .ls-benefit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.hvo-life .ls-benefit { padding:24px; border:1px solid var(--ls-line); border-radius:24px; background:var(--ls-soft); transition:box-shadow .2s,transform .2s; }
.hvo-life .ls-benefit .ls-icon { width:48px; height:48px; font-size:20px; }
.hvo-life .ls-benefit h3 { margin:16px 0 12px; font-size:18px; }
.hvo-life .ls-benefit li { display:flex; gap:9px; font-size:14px; line-height:1.6; color:#475569; }
.hvo-life .ls-benefit li + li { margin-top:7px; }
.hvo-life .ls-benefit li i { margin-top:4px; color:#3a9a55; }

.hvo-life .ls-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.hvo-life .ls-article { display:block; border:1px solid #e8edf3; border-radius:20px; background:#fff; color:inherit; text-decoration:none; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.hvo-life .ls-article:hover { box-shadow:0 12px 26px #1e293b14; transform:translateY(-3px); }
.hvo-life .ls-article img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.hvo-life .ls-article h3 { padding:16px 18px 0; font-size:17px; line-height:1.45; }
.hvo-life .ls-article p { padding:6px 18px 0; font-size:14px; line-height:1.6; color:var(--ls-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hvo-life .ls-article > :last-child { margin-bottom:18px; }
.hvo-life .ls-article > img:last-child { margin-bottom:0; }

@media (max-width:1023px) {
    .hvo-life .ls-section { padding-block:64px; }
    .hvo-life .ls-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hvo-life .ls-hero-grid { grid-template-columns:minmax(0,1fr); gap:44px; padding-block:48px 56px; text-align:center; }
    .hvo-life .ls-lead, .hvo-life .ls-stats { margin-inline:auto; }
    .hvo-life .ls-actions { justify-content:center; }
    .hvo-life .ls-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hvo-life .ls-topics ul { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
    .hvo-life .ls-wrap { width:calc(100% - 32px); }
    .hvo-life .ls-section { padding-block:48px; }
    .hvo-life .ls-heading { margin-bottom:32px; }
    .hvo-life .ls-importance-grid, .hvo-life .ls-feature-grid, .hvo-life .ls-panel ul, .hvo-life .ls-article-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
    .hvo-life .ls-panel ul { gap:10px; }
    .hvo-life .ls-importance, .hvo-life .ls-feature, .hvo-life .ls-topics, .hvo-life .ls-panel { padding:22px; }
    .hvo-life .ls-topics ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hvo-life .ls-tabs { justify-content:flex-start; }
    .hvo-life .ls-tabs button { flex:1 1 calc(50% - 5px); justify-content:center; padding-inline:12px; font-size:14px; }
    .hvo-life .ls-actions .ls-button { width:100%; }
    .hvo-life .ls-sticker { top:-18px; right:-6px; }
    /* Comparison: one card per criterion instead of a wide table that scrolls sideways. */
    .hvo-life .ls-compare { border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
    .hvo-life .ls-compare :is(table,tbody,tr,th,td) { display:block; }
    .hvo-life .ls-compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .hvo-life .ls-compare tbody tr { border:1px solid #e2e8f0; border-radius:18px; background:#fff; box-shadow:0 6px 16px #1e293b0f; overflow:hidden; }
    .hvo-life .ls-compare tbody tr + tr { margin-top:14px; }
    .hvo-life .ls-compare tbody th { padding:13px 16px; background:#1e293b; color:#fff; font-size:16px; }
    .hvo-life .ls-compare tbody td { padding:13px 16px; }
    .hvo-life .ls-compare tbody td::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:12px; line-height:1.5; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#5b6880; }
    .hvo-life .ls-compare tbody td:nth-of-type(1)::before { color:#24589a; }
}
@media (max-width:479px) {
    .hvo-life .ls-benefit-grid { grid-template-columns:minmax(0,1fr); }
    .hvo-life .ls-feature { flex-direction:column; gap:14px; }
    .hvo-life .ls-stats { gap:10px; }
    .hvo-life .ls-stats dd { font-size:13px; }
    .hvo-life .ls-hero-picture figcaption { inset:auto 10px 10px; padding:10px 12px; }
    .hvo-life .ls-tabs button { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
    .hvo-life * { transition:none !important; }
}