@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600 800;font-display:swap;src:url('../fonts/wXKrE3kTposypRyd51fcANwr.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Baloo 2';font-style:normal;font-weight:600 800;font-display:swap;src:url('../fonts/wXKrE3kTposypRyd51bcANwr.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Baloo 2';font-style:normal;font-weight:600 800;font-display:swap;src:url('../fonts/wXKrE3kTposypRyd51jcAA.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/6xKtdSZaM9iE8KbpRA_hK1QN.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Birthstone';font-style:normal;font-weight:400 400;font-display:swap;src:url('../fonts/8AtsGs2xO4yLRhy87sv_LLHzjCfZ.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:'Birthstone';font-style:normal;font-weight:400 400;font-display:swap;src:url('../fonts/8AtsGs2xO4yLRhy87sv_LLDzjCfZ.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Birthstone';font-style:normal;font-weight:400 400;font-display:swap;src:url('../fonts/8AtsGs2xO4yLRhy87sv_LL7zjA.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ========================================================================== Trường Mầm non Hòa Tiến: giao diện. Bố cục theo mẫu tham khảo, viết lại hoàn toàn. Màu theo logo trường. Bán kính: nút = viên thuốc, thẻ = 24px, khối lớn = 40px, ảnh người = tròn. ========================================================================== */ :root { --brand: #326f97; --brand-deep: #24597d; --sky: #bde9ff; --sky-soft: #eaf7ff; --sun: #ffd449; --sun-soft: #fff0b8; --mint: #e1f0d9; --ink: #1f3b4d; --muted: #4a6274; --primary: #bfe3ff; --paper: #f8fcff; --line: #cfe6f2; --white: #fff; --ease: cubic-bezier(.16, 1, .3, 1); --r-card: 24px; --r-panel: 40px; --wrap: 1200px; --shadow: 0 22px 40px -26px rgba(36, 89, 125, .55); --font-head: 'Baloo 2', 'Segoe UI', sans-serif; --font-body: Quicksand, 'Segoe UI', sans-serif; --font-script: Birthstone, cursive; } *, *::before, *::after { box-sizing: border-box; } html { zoom: .8712; scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; color: var(--ink); background: var(--paper) url("../images/deco-grid.svg") 0 0 / 84px 69px repeat; font: 500 17px/1.7 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-deep); } h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0; text-wrap: balance; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .site-footer :focus-visible { outline-color: var(--brand); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed !important; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 18px; background: var(--sun); color: var(--brand-deep); border-radius: 999px; } .wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; } .wrap--narrow { width: min(820px, calc(100% - 48px)); } /* Icons: Phosphor Bold (MIT), tô màu theo currentColor bằng mask. */ .ico { display: inline-block; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .ico-facebook-logo { --i: url('../images/icons/facebook-logo.svg'); } .ico-youtube-logo { --i: url('../images/icons/youtube-logo.svg'); } .ico-tiktok-logo { --i: url('../images/icons/tiktok-logo.svg'); } .ico-arrow-right { --i: url('../images/icons/arrow-right.svg'); } .ico-arrow-left { --i: url('../images/icons/arrow-left.svg'); } .ico-arrow-up { --i: url('../images/icons/arrow-up.svg'); } .ico-check { --i: url('../images/icons/check.svg'); } .ico-map-pin { --i: url('../images/icons/map-pin.svg'); } .ico-phone { --i: url('../images/icons/phone.svg'); } .ico-envelope-simple { --i: url('../images/icons/envelope-simple.svg'); } .ico-clock { --i: url('../images/icons/clock.svg'); } .ico-paper-plane-tilt { --i: url('../images/icons/paper-plane-tilt.svg'); } .ico-list { --i: url('../images/icons/list.svg'); } .ico-quotes { --i: url('../images/icons/quotes.svg'); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 26px; border: 2px solid transparent; border-radius: 999px; font: 800 16px/1 var(--font-head); white-space: nowrap; transition: transform .25s, box-shadow .25s, background .25s, color .25s; } .btn-dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 20px; transition: transform .25s; } .btn--light { background: var(--white); color: var(--brand-deep); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); } .btn--light .btn-dot { background: var(--brand); color: #fff; } .btn--outline { border-color: var(--brand); color: var(--brand); background: transparent; } .btn--outline .btn-dot { background: var(--brand); color: #fff; } .btn--solid { background: var(--primary); color: var(--ink); border-color: rgba(50, 111, 151, .22); } .btn--solid .btn-dot { background: var(--sun); color: var(--brand-deep); } .btn:hover { transform: translateY(-2px); } .btn:hover .btn-dot { transform: translateX(3px); } .btn--outline:hover { background: var(--primary); color: var(--ink); } .btn--outline:hover .btn-dot { background: var(--sun); color: var(--brand-deep); } .btn:active { transform: translateY(0) scale(.98); } /* Topbar + header */ .topbar { background: var(--white); border-bottom: 1px solid var(--line); font-size: 14px; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; } .topbar-item { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-weight: 600; } .topbar-item .ico { color: var(--brand); font-size: 16px; } .topbar-item a { color: inherit; } .topbar-item a:hover { color: var(--brand); } .topbar-right { display: flex; align-items: center; gap: 22px; } .topbar-login { padding: 6px 18px; border-radius: 999px; background: var(--brand); color: #fff; font: 800 13px/1.2 var(--font-head); letter-spacing: .03em; transition: background .25s, transform .25s; } .topbar-login:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); } .socials { display: flex; gap: 8px; } .socials a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--brand-deep); font-size: 16px; } .socials a:hover { background: var(--sun); color: var(--brand-deep); } .site-header { position: sticky; top: 0; z-index: 40; background: var(--primary); box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .6); } .navbar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; } .brand { position: relative; z-index: 2; display: block; margin-top: 4px; margin-bottom: -34px; } .brand-badge { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--sun); border: 5px solid var(--white); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); overflow: hidden; } .brand-badge img { width: 78%; height: auto; } .nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); margin-left: auto; } .nav li { list-style: none; } .nav a { position: relative; padding: 6px 0; color: var(--ink); font: 700 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px; background: var(--brand); transform: scaleX(0); transition: transform .25s; } .nav a:hover, .nav a.active, .nav a[aria-current] { color: var(--brand); } .nav a:hover::after, .nav a.active::after, .nav a[aria-current]::after { transform: scaleX(1); } .nav-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 30px; place-items: center; } /* Sections */ .section { padding: clamp(20px, 2.6vw, 36px) 0; position: relative; } .section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(20px, 2.6vw, 32px); } .section-head p { color: var(--muted); margin: 14px 0 0; } .section-head::before { content: ''; display: block; width: 70px; height: 35px; margin: 0 auto 8px; background: url("../images/deco-arc.svg") center / contain no-repeat; } .section-title { font-weight: 800; font-size: clamp(32px, 4vw, 52px); text-transform: uppercase; color: var(--brand); letter-spacing: .01em; } .script-line { font: 400 clamp(26px, 3vw, 36px)/1.1 var(--font-script); color: var(--sun); margin: 0 0 6px; } /* Hero */ .hero { position: relative; isolation: isolate; min-height: clamp(520px, calc(100dvh - 110px), 720px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .hero-slides { position: absolute; inset: 0; z-index: -2; } .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; opacity: 0; transition: opacity 1s ease; } .hero-slides img.is-active { opacity: 1; } .hero-in { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-block: 70px 44px; } .hero-copy { width: min(520px, 46%); margin-right: 2vw; text-align: center; text-shadow: 0 2px 4px rgba(15, 45, 70, .4), 0 4px 26px rgba(15, 45, 70, .5); } .hero h1 { font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); text-transform: uppercase; line-height: 1; } .hero h1 span { display: block; color: var(--sun); } .hero-sub { font: 700 clamp(14px, 1.2vw, 17px)/1.4 var(--font-head); margin: 8px auto 0; max-width: 30ch; } .hero-dots { position: absolute; left: 0; bottom: 26px; display: flex; align-items: flex-end; gap: 16px; } .hero-dots .dot { position: relative; display: block; width: 123px; height: 123px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); } .hero-dots .dot:nth-child(2) { width: 145px; height: 145px; margin-bottom: 26px; } .hero-dots .dot:hover { transform: scale(1.06); } .hero-dots .dot::after { content: ''; position: absolute; inset: -11px; border: 2px dashed var(--sun); border-radius: 50%; opacity: .85; pointer-events: none; } .hero-dots img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 5px solid var(--sun); box-shadow: var(--shadow), 0 0 0 9px rgba(255, 255, 255, .18); background: var(--sky); } /* Stats */ .stats { position: relative; z-index: 1; } .stats-panel { margin-left: max(24px, calc((100vw - var(--wrap)) / 2 - 40px)); background: var(--primary); color: var(--ink); border-bottom-left-radius: 200px; padding: 64px 0; } .stats-panel, .enroll-panel { --grid-line: rgba(50, 111, 151, .1); } .stats-panel { position: relative; overflow: hidden; isolation: isolate; } .stats-panel::before, .enroll-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask: linear-gradient(90deg, #000, transparent 70%); mask: linear-gradient(90deg, #000, transparent 70%); } .stats-in { position: relative; z-index: 1; } .stats-in { display: grid; grid-template-columns: repeat(3, 1fr); width: min(var(--wrap), calc(100% - 96px)); margin-inline: auto; } .stat { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 20px; } .stat + .stat { border-left: 1px solid rgba(31, 59, 77, .18); } .stat img { width: 56px; height: 56px; } .stat p { margin: 0; line-height: 1.1; } .stat b { display: block; font: 800 clamp(44px, 5vw, 64px)/1 var(--font-head); } .stat span { display: block; margin-top: 6px; color: var(--brand-deep); font-weight: 700; } /* Restored wave artwork follows the current hero instead of the retired .hero. */ .home-hero { position: relative; isolation: isolate; overflow: hidden; } .home-hero > .wrap { position: relative; z-index: 1; } .home-hero::after { content: ''; position: absolute; z-index: 0; pointer-events: none; left: 0; right: 0; bottom: 0; height: clamp(100px, 15vw, 220px); background: url("../images/deco-waves.svg") center bottom / 100% 100% no-repeat; opacity: .18; } @media (prefers-reduced-motion: reduce) { .home-hero::after { background-image: url("../images/deco-waves-static.svg"); } } /* Hero photography: stable image area and keyboard-accessible controls. */ .hero-gallery { min-width: 0; } .hero-gallery__frame { margin: 0; } .hero-gallery__frame[hidden], .hero-gallery__controls[hidden] { display: none; } .hero-gallery__frame img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--r-card); } .hero-gallery__frame figcaption { min-height: 3em; margin-top: 12px; color: var(--text-secondary); font-size: 15px; } .hero-gallery__controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .hero-gallery__controls button { min-height: 44px; min-width: 44px; padding: 8px 14px; border: 1px solid var(--primary-100); border-radius: 12px; background: var(--primary-50); color: var(--primary-700); font: inherit; cursor: pointer; } .hero-gallery__controls button:hover { border-color: var(--primary-600); } .hero-gallery__controls button:focus-visible { outline: 3px solid var(--primary-600); outline-offset: 3px; } .hero-gallery__controls button:disabled { cursor: default; opacity: .65; } @media (max-width: 767px) { .hero-gallery__controls { flex-wrap: wrap; } } /* Full-width photographic hero, matching the original Tuoi Tho composition. */ .home-hero.home-hero--fullwidth { display: flex; align-items: center; min-height: clamp(520px, 72vh, 740px); padding: 64px 0 100px; background: var(--brand-deep); } .home-hero--fullwidth > .hero-gallery { position: absolute; inset: 0; } .home-hero--fullwidth .hero-gallery__stage, .home-hero--fullwidth .hero-gallery__frame { position: absolute; inset: 0; } .home-hero--fullwidth .hero-gallery__frame img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: center; } .home-hero--fullwidth .hero-gallery__frame figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .home-hero--fullwidth::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 35, 24, .84), rgba(12, 35, 24, .48) 55%, rgba(12, 35, 24, .15)); } .home-hero--fullwidth > .wrap { z-index: 2; pointer-events: none; } .home-hero--fullwidth .home-hero__grid { display: block; } .home-hero--fullwidth .home-hero__copy { max-width: 640px; pointer-events: auto; } .home-hero--fullwidth .home-hero__copy h1, .home-hero--fullwidth .home-hero__copy p, .home-hero--fullwidth .content-kicker { color: #fff; } .home-hero--fullwidth .hero-gallery__controls { position: absolute; bottom: 24px; right: max(24px, calc((100% - var(--wrap)) / 2)); z-index: 3; margin: 0; color: #fff; } .home-hero--fullwidth .hero-gallery__controls [data-hero-status] { padding: 6px 10px; border-radius: 8px; background: rgba(12, 35, 24, .8); } .home-hero--fullwidth .btn--solid { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); } .home-hero--fullwidth::after { z-index: 1; } @media (max-width: 767px) { .home-hero.home-hero--fullwidth { min-height: 560px; padding: 40px 0 108px; } .home-hero--fullwidth::before { background: rgba(12, 35, 24, .62); } .home-hero--fullwidth .home-hero__copy h1 { font-size: clamp(32px, 7vw, 44px); max-width: 18ch; } .home-hero--fullwidth .hero-gallery__controls { left: 16px; right: auto; bottom: 24px; } } /* Original Tuoi Tho hero layout, using Hoa Tien photographs and identity. */ .hero > .hero-gallery { position: absolute; inset: 0; } .hero .hero-gallery__frame { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity .85s ease, visibility .85s ease; } .hero .hero-gallery__frame.is-active { z-index: 1; opacity: 1; visibility: visible; } .hero .hero-gallery__frame img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 65%; opacity: 1; } .hero .hero-gallery__frame figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .hero .hero-gallery__controls { position: absolute; inset: 0; z-index: 3; display: block; margin: 0; pointer-events: none; } .hero .hero-gallery__controls .hero-gallery__arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; min-width: 44px; min-height: 44px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(12,35,24,.58); color: #fff; font: 700 28px/1 var(--font-body); backdrop-filter: blur(5px); pointer-events: auto; transition: background .2s ease, transform .2s ease; } .hero .hero-gallery__arrow--prev { left: clamp(12px,2.5vw,32px); } .hero .hero-gallery__arrow--next { right: clamp(12px,2.5vw,32px); } .hero .hero-gallery__controls .hero-gallery__arrow:hover { transform: translateY(-50%) scale(1.08); background: rgba(12,72,39,.88); } .hero .hero-gallery__controls .hero-gallery__arrow:active { transform: translateY(calc(-50% + 1px)) scale(.98); } .hero .hero-gallery__controls .hero-gallery__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .hero .hero-gallery__frame,.hero .hero-gallery__controls .hero-gallery__arrow { transition: none; } } @media (max-width: 900px) { .hero > .hero-gallery { position: relative; height: clamp(240px, 56vw, 360px); } .hero .hero-gallery__stage { position: absolute; inset: 0; height: 100%; } .hero .hero-gallery__controls .hero-gallery__arrow { width: 48px; height: 48px; } } /* School promises: one leading commitment, two supporting commitments. */ .school-promises__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .school-promise { display: flex; align-items: flex-start; gap: 20px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--border-default); border-radius: var(--r-card); background: var(--surface-card, var(--white)); } .school-promise--featured { grid-row: span 2; flex-direction: column; justify-content: center; background: var(--primary-50); border-color: var(--primary-100); } .school-promise__icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: var(--primary-100); color: var(--primary-700); font-size: 26px; } .school-promise h2 { margin: 0 0 12px; color: var(--text-primary); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; text-transform: none; } .school-promise--featured h2 { max-width: 16ch; font-size: clamp(30px, 3.2vw, 44px); color: var(--primary-700); } .school-promise p { margin: 0; color: var(--text-secondary); line-height: 1.7; } .school-promise--featured p { color: var(--text-primary); max-width: 48ch; } @media (max-width: 767px) { .school-promises__grid { grid-template-columns: 1fr; } .school-promise--featured { grid-row: auto; } .school-promise { padding: 24px; gap: 16px; } } /* Real school photography, contained in the existing brand system. */ .school-intro--editorial > .wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(36px, 6vw, 80px); } .school-intro__collage { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, minmax(170px, 1fr)); gap: 16px; min-height: 470px; } .school-intro__photo { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-card); background: var(--primary-50); } .school-intro__photo--main { grid-row: span 2; } .school-intro--editorial .school-intro__photo img { width: 100%; height: 100%; object-fit: cover; } .school-intro--editorial .school-intro__photo figcaption { position: absolute; right: 12px; bottom: 12px; left: 12px; margin: 0; padding: 9px 12px; border-radius: 8px; background: rgba(12,72,39,.82); color: #fff; font-size: 14px; } .school-intro--editorial .intro-text { max-width: 62ch; } .school-intro--editorial .intro-text .section-title { max-width: 12ch; } .school-intro--editorial .intro-text > p { color: var(--text-secondary); } .school-programs--editorial .school-programs__grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 18px; max-width: none; } .school-programs--editorial .school-programs__grid > .value { --program-surface: #EEF7F0; --program-accent: var(--primary-500); --program-ink: var(--text-primary); position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto auto 1fr; align-content: start; gap: 12px 14px; grid-column: span 5; min-width: 0; min-height: 390px; padding: clamp(20px,2.4vw,32px); overflow: hidden; border: 1px solid rgba(12,72,39,.1); border-top: 4px solid var(--program-accent); border-radius: var(--r-card); background: var(--program-surface); color: var(--program-ink); box-shadow: 0 12px 28px -24px rgba(12,72,39,.55); transition: transform .3s ease, box-shadow .3s ease; } .school-programs--editorial .school-programs__grid > .value:nth-child(1) { --program-surface: var(--primary-700); --program-accent: var(--secondary-500); --program-ink: #fff; } .school-programs--editorial .school-programs__grid > .value:nth-child(2) { --program-surface: #FFF7E7; --program-accent: var(--secondary-500); } .school-programs--editorial .school-programs__grid > .value:nth-child(3) { --program-surface: #EEF7F0; --program-accent: var(--primary-500); } .school-programs--editorial .school-programs__grid > .value:nth-child(4) { --program-surface: #EFF6FB; --program-accent: var(--info); } .school-programs--editorial .school-programs__grid > .value:nth-child(5) { --program-surface: #FFF1E9; --program-accent: var(--accent-500); } .school-programs--editorial .school-programs__grid > .value:nth-child(6) { --program-surface: #F3F7E9; --program-accent: var(--primary-600); } .school-programs--editorial .school-programs__grid > .value:nth-child(4n+1), .school-programs--editorial .school-programs__grid > .value:nth-child(4n) { grid-column: span 7; } .school-programs--editorial .school-programs__grid > .value::before { content: ''; position: absolute; z-index: 0; right: -54px; bottom: -62px; width: 176px; aspect-ratio: 1; border: 1px solid var(--program-accent); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,255,255,.18), 0 0 0 28px rgba(255,255,255,.1); opacity: .48; pointer-events: none; } .school-programs--editorial .school-programs__grid .value > img { z-index: 1; grid-column: 1 / -1; grid-row: 1; width: 100%; height: clamp(150px,18vw,220px); margin: 0 0 2px; border-radius: 14px; object-fit: cover; transition: transform .45s ease; } .school-programs--editorial .school-programs__grid .value-icon { z-index: 1; grid-column: 1; grid-row: 2; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border: 1px solid rgba(12,72,39,.08); border-radius: 15px; background: var(--primary-100); color: var(--primary-700); font-size: 22px; box-shadow: 0 5px 12px -8px rgba(12,72,39,.6); } .school-programs--editorial .school-programs__grid .value h3 { z-index: 1; grid-column: 2; grid-row: 2; align-self: center; margin: 0; color: inherit; font-size: clamp(20px,2vw,26px); line-height: 1.2; } .school-programs--editorial .school-programs__grid .value p { z-index: 1; grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; color: inherit; font-size: 15px; line-height: 1.6; font-weight: 500; opacity: .9; } @media (prefers-reduced-motion: no-preference) { .school-programs--editorial .school-programs__grid > .value:hover { transform: translateY(-5px); box-shadow: 0 20px 38px -24px rgba(12,72,39,.45); } .school-programs--editorial .school-programs__grid > .value:hover > img { transform: scale(1.025); } } @media (max-width: 900px) { .school-intro--editorial > .wrap { grid-template-columns: 1fr; } .school-intro__collage { min-height: 380px; } .school-programs--editorial .school-programs__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .school-programs--editorial .school-programs__grid > .value, .school-programs--editorial .school-programs__grid > .value:nth-child(4n+1), .school-programs--editorial .school-programs__grid > .value:nth-child(4n) { grid-column: auto; } } @media (max-width: 640px) { .school-intro__collage { min-height: 330px; grid-template-rows: repeat(2,minmax(140px,1fr)); gap: 10px; } .school-programs--editorial .school-programs__grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .school-programs--editorial .school-programs__grid > .value, .school-programs--editorial .school-programs__grid > .value:nth-child(4n+1), .school-programs--editorial .school-programs__grid > .value:nth-child(4n) { grid-column: auto; min-height: 0; } .school-programs--editorial .school-programs__grid .value > img { height: 220px; } } .school-promise > img { width: 112px; height: 128px; object-fit: cover; border-radius: 16px; flex-shrink: 0; } .school-promise--featured > img { width: 100%; height: clamp(220px, 24vw, 340px); object-position: center 35%; } .school-intro > .wrap { display: grid; gap: 32px; } .school-intro__photo { margin: 0; } .school-intro__photo img { width: 100%; height: auto; border-radius: var(--r-card); } .school-intro__photo figcaption { margin-top: 12px; color: var(--text-secondary); } .school-intro .intro-text { max-width: 85ch; } .programs .value { justify-content: flex-start; } .programs .value > img { width: 100%; height: clamp(180px, 22vw, 280px); object-fit: cover; border-radius: 16px; margin-bottom: 18px; } .programs .value-icon { margin-bottom: 12px; } .programs .value h3 { font-size: clamp(24px, 2.5vw, 32px); } .programs .value p { font-size: 17px; font-weight: 500; } .school-community__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .school-community__grid figure { margin: 0; min-width: 0; } .school-community__grid figure:first-child { grid-column: 1 / -1; } .school-community__grid img { width: 100%; height: auto; border-radius: var(--r-card); } .school-gallery__group { margin: 36px 0 48px; } .school-gallery__group h2 { margin-bottom: 24px; font-size: clamp(24px, 3vw, 32px); } .school-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .school-gallery__item { margin: 0; min-width: 0; scroll-margin-top: 100px; } .school-gallery__item a { display: block; border-radius: 16px; overflow: hidden; } .school-gallery__item a:focus-visible { outline: 3px solid var(--primary-600); outline-offset: 4px; } .school-gallery__item img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; } .school-gallery__item figcaption { margin-top: 10px; color: var(--text-secondary); line-height: 1.5; } @media (max-width: 767px) { .school-promise { flex-direction: column; } .school-promise > img { width: 100%; height: 220px; } .school-community__grid, .school-gallery__grid { grid-template-columns: 1fr; } .school-community__grid figure:first-child { grid-column: auto; } .school-intro > .wrap { gap: 24px; } } /* Intro + collage */ .intro { overflow: hidden; } .intro-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px, 6vw, 80px); } .intro-text p { color: var(--muted); } .intro-text .section-title { margin-bottom: 22px; } .checklist { margin: 26px 0 32px; display: grid; gap: 12px; } .checklist li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); } .checklist .ico { width: 30px; height: 30px; padding: 7px; border: 2px solid var(--brand); border-radius: 50%; color: var(--brand); } .checklist--light li { color: var(--ink); } .checklist--light .ico { border-color: var(--brand); color: var(--brand); } .enroll .script-line, .site-footer .script-line { color: var(--brand); } .collage { position: relative; aspect-ratio: 1 / .92; } .blob { position: absolute; object-fit: cover; border: 7px solid var(--sun); background: var(--sky); box-shadow: var(--shadow); } .collage .b1 { left: 0; top: 4%; width: 44%; height: 40%; border-radius: 58% 42% 54% 46% / 52% 56% 44% 48%; } .collage .b2 { right: 0; top: 0; width: 42%; height: 38%; border-radius: 46% 54% 44% 56% / 58% 46% 54% 42%; } .collage .b3 { left: 14%; top: 24%; width: 66%; height: 50%; border-radius: 40% 60% 52% 48% / 56% 44% 56% 44%; z-index: 2; } .collage .b4 { right: 2%; bottom: 0; width: 44%; height: 38%; border-radius: 54% 46% 60% 40% / 44% 58% 42% 56%; z-index: 3; } /* Programs slider */ .slider { position: relative; } .slide { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(24px, 4vw, 56px); } .js .slides { display: grid; } .js .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; } .js .slide.is-active { opacity: 1; visibility: visible; } .slide-text { position: relative; padding: 24px 0; } .slide-num { position: absolute; z-index: 0; left: -8px; top: -48px; font: 800 clamp(150px, 20vw, 260px)/1 var(--font-head); color: var(--brand); opacity: .12; pointer-events: none; } .slide-text > *:not(.slide-num) { position: relative; z-index: 1; } .slide h3 { font-size: clamp(26px, 3vw, 38px); color: var(--brand-deep); margin-bottom: 14px; } .slide-text p { color: var(--muted); max-width: 42ch; margin-bottom: 26px; } .slide-photos { position: relative; aspect-ratio: 16 / 11; } .slide-photos img { position: absolute; object-fit: cover; border: 6px solid var(--white); border-radius: 32px; box-shadow: var(--shadow); background: var(--sky); } .slide-photos img:nth-child(1) { top: 0; left: 14%; width: 74%; height: 76%; } .slide-photos img:nth-child(2) { bottom: 0; left: 0; width: 46%; height: 52%; transform: rotate(-4deg); } .slide-photos img:nth-child(3) { right: 0; bottom: 4%; width: 40%; height: 46%; transform: rotate(3deg); } .slider-nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 30px; } .slider-nav button { min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 800 16px var(--font-head); } .slider-nav button[aria-current] { background: var(--primary); color: var(--ink); } .slider-nav button:hover:not([aria-current]) { color: var(--brand); background: var(--sky); } /* Teachers carousel */ .carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } .carousel-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 8px 8px; } .carousel-track::-webkit-scrollbar { display: none; } .round-btn { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--brand); border-radius: 50%; background: var(--white); color: var(--brand); font-size: 20px; transition: background .2s, color .2s; } .round-btn:hover { background: var(--primary); color: var(--ink); } .teacher { flex: 0 0 calc((100% - 84px) / 4); scroll-snap-align: start; text-align: center; } .teacher-photo { position: relative; display: block; width: min(220px, 100%); aspect-ratio: 1; margin: 0 auto 20px; } .teacher-photo::after { content: ''; position: absolute; inset: -9px; border: 2px dashed var(--brand); border-radius: 50%; opacity: .45; transition: transform .6s, opacity .3s; } .teacher:hover .teacher-photo::after { transform: rotate(40deg); opacity: 1; } .teacher-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 5px solid var(--white); box-shadow: var(--shadow); } .teacher h3 { font-size: 20px; color: var(--brand-deep); } .teacher p { margin: 4px 0 0; color: var(--muted); font-size: 15px; } .leaders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); margin-top: 28px; } .leaders figure { margin: 0; overflow: hidden; border-radius: var(--r-panel); box-shadow: var(--shadow); aspect-ratio: 16 / 9; } .leaders img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 640px) { .leaders { grid-template-columns: 1fr; } } .leaders + .team-title { margin-top: clamp(36px, 5vw, 60px); } .groups-lead { margin: 0 0 20px; text-align: center; color: var(--muted); } .groups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; list-style: none; } .groups li { display: grid; justify-items: center; gap: 2px; padding: 22px 12px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--white); text-align: center; } .groups b { color: var(--brand); font: 800 40px / 1.1 var(--font-head); } .groups span { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .groups h4 { margin: 8px 0 0; color: var(--brand-deep); font-size: 18px; } @media (max-width: 900px) { .groups { grid-template-columns: repeat(2, 1fr); } } .team-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 24px); } .team-photos figure { margin: 0; overflow: hidden; border-radius: var(--r-panel); box-shadow: var(--shadow); aspect-ratio: 3 / 2; } .team-photos figure:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; } .team-photos img { width: 100%; height: 100%; object-fit: cover; display: block; } .merge { display: grid; justify-items: center; max-width: 1040px; margin: 0 auto; } .merge-from { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin: 0; padding: 0; list-style: none; } .merge-from li { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--white); text-align: center; } .merge-label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .merge-from h3 { margin: 0; color: var(--brand-deep); font-size: 20px; } .merge-from small { color: var(--brand); font-weight: 700; } .merge-join { position: relative; display: grid; justify-items: center; margin: 0; padding: 22px 0 36px; } .merge-join span { position: relative; z-index: 1; padding: 6px 18px; border-radius: 999px; background: var(--sun); color: var(--brand-deep); font: 800 15px var(--font-head); text-align: center; } .merge-join::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 3px dashed var(--brand); opacity: .6; transform: translateX(-50%); } .merge-join::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 24px; height: 24px; border: 4px solid var(--white); border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--brand); transform: translateX(-50%); } .merge-card { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(20px, 3vw, 40px); width: 100%; margin-top: 12px; padding: clamp(16px, 2vw, 24px); border: 2px solid var(--line); border-radius: var(--r-panel); background: var(--white); } .merge-card figure { margin: 0; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 960 / 550; } .merge-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .merge-quote { margin: 28px 0 0; padding: 0; border: 0; background: none; text-align: center; } .merge-quote p { margin: 0; color: var(--brand-deep); font: 800 clamp(20px, 2.4vw, 28px) / 1.4 var(--font-head); } .merge-card h3 { margin-bottom: 8px; font-size: clamp(22px, 2.4vw, 28px); color: var(--brand-deep); } .merge-card p { margin: 0; color: var(--muted); } .timeline-year { display: inline-block; margin-bottom: 8px; padding: 4px 16px; border-radius: 999px; background: var(--sun); color: var(--brand-deep); font: 800 15px var(--font-head); } @media (max-width: 900px) { .merge-from { grid-template-columns: 1fr; } .merge-card { grid-template-columns: 1fr; } } .page-hero + .section::before { content: ''; position: absolute; z-index: 2; top: -56px; right: 10px; width: clamp(110px, calc((100vw - 1200px) / 2 - 10px), 190px); aspect-ratio: 453 / 289; background: url('../images/deco/kids-walk.png') center / contain no-repeat; pointer-events: none; } .page-van-ban-cong-khai .page-hero + .section::before { background-image: url('../images/deco/kids-wave.png'); aspect-ratio: 381 / 285; } .blog .page-hero + .section::before, .page-lien-he .page-hero + .section::before { right: auto; left: 10px; background-image: url('../images/deco/kids-wave.png'); aspect-ratio: 381 / 285; } .page-thu-vien-anh-video .page-hero + .section::before { right: auto; left: 10px; } @media (max-width: 1360px) { .page-hero + .section::before { display: none; } } .team-title { margin-bottom: 8px; text-align: center; color: var(--brand-deep); font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; letter-spacing: .04em; } .carousel + .team-photos { margin-top: clamp(28px, 4vw, 48px); } @media (max-width: 640px) { .team-photos { grid-template-columns: 1fr; } .team-photos figure:first-child { aspect-ratio: 3 / 2; } } .center-action { display: flex; justify-content: center; margin-top: 44px; } /* Enrollment */ .enroll { padding: clamp(12px, 2vw, 24px) 24px; } .enroll-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 5fr 6fr; align-items: center; max-width: 1320px; margin-inline: auto; border-radius: var(--r-panel); background: linear-gradient(140deg, var(--primary) 25%, #a6d6f7); color: var(--ink); isolation: isolate; } .enroll-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle, rgba(50, 111, 151, .2) 2px, transparent 3px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(120deg, transparent 55%, #000); mask: linear-gradient(120deg, transparent 55%, #000); } .enroll-art { position: relative; align-self: end; display: grid; justify-items: center; min-height: 420px; } .enroll-art::before { content: ''; position: absolute; left: 50%; bottom: -26%; width: min(78%, 420px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--sun-soft); } .enroll-art img { position: relative; align-self: end; width: min(85%, 380px); height: auto; } .enroll-copy { padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(36px, 5vw, 64px) 0; } .enroll h2 { font-weight: 800; font-size: clamp(30px, 3.8vw, 50px); text-transform: uppercase; } .bubble { display: inline-block; position: relative; margin: 22px 0 22px; padding: 14px 28px; border-radius: 22px 22px 22px 4px; background: var(--sun); color: var(--brand-deep); font: 800 clamp(20px, 2.2vw, 28px)/1.2 var(--font-head); text-transform: uppercase; transform: rotate(-1.5deg); } /* News */ .news-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 24px; } .news-home .news-card { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 16px; } .news-archive { display: grid; gap: 22px; } .news-archive { grid-template-columns: repeat(2, 1fr); } .news-card { display: grid; grid-template-columns: 38% 1fr; gap: 22px; align-items: center; padding: 16px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--white); transition: border-color .25s, transform .25s, box-shadow .25s; } .news-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); } .news-thumb { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; } .news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .news-thumb { background: var(--sky-soft); } .news-thumb img.is-logo { object-fit: contain; padding: 14px; } .news-card:hover .news-thumb img { transform: scale(1.05); } .news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .news-filter a { padding: 9px 20px; border: 2px solid var(--brand); border-radius: 999px; color: var(--brand-deep); font-weight: 700; transition: background .25s, color .25s; } .news-filter a:hover, .news-filter a.active { background: var(--brand); color: var(--white); } .news-meta { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; } .news-meta b { color: var(--brand); } .news-card h3 { font-size: 21px; color: var(--brand-deep); margin-bottom: 8px; } .news-card h3 a { color: inherit; } .news-excerpt { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .empty-card { padding: 40px 32px; border: 2px dashed var(--brand); border-radius: var(--r-card); background: var(--sky-soft); text-align: center; } .empty-card h2, .empty-card h3 { font-size: 24px; color: var(--brand-deep); margin-bottom: 8px; } .empty-card p { color: var(--muted); } .pagination { margin-top: 40px; } .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); font: 800 15px var(--font-head); color: var(--brand); } .page-numbers.current, .page-numbers:hover { background: var(--primary); border-color: var(--brand); color: var(--ink); } /* Notices (home): bảng thông báo dạng danh sách, khác lưới thẻ của Tin tức */ .notices-panel { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-panel); background: var(--sky-soft); } .notices-copy p { margin: 14px 0 26px; color: var(--muted); max-width: 40ch; } .notice-list { display: grid; gap: 12px; } .notice-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 12px 20px 12px 12px; border: 2px solid transparent; border-radius: 22px; background: var(--white); color: var(--ink); transition: transform .3s var(--ease), border-color .25s, box-shadow .3s var(--ease); } .notice-row:hover { transform: translateX(6px); border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); } .notice-date { display: grid; place-items: center; align-content: center; width: 66px; height: 66px; border-radius: 18px; background: var(--sun); color: var(--brand-deep); text-align: center; } .notice-date b { font: 800 26px/1 var(--font-head); } .notice-date small { font: 700 12px/1.2 var(--font-body); } .notice-title { font: 800 17px/1.35 var(--font-head); color: var(--brand-deep); } .notice-row > .ico { color: var(--brand); font-size: 20px; transition: transform .25s; } .notice-row:hover > .ico { transform: translateX(3px); } @media (max-width: 900px) { .notices-panel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .notice-row { gap: 12px; padding-right: 14px; } .notice-date { width: 56px; height: 56px; } .notice-date b { font-size: 22px; } .notice-title { font-size: 15.5px; } } /* Messages (quote slider) */ /* Bốn giá trị cốt lõi: lưới bất đối xứng 7/5 rồi 5/7, mỗi ô một màu có sẵn trong bảng màu của trường. */ .ico-heart { --i: url('../images/icons/heart.svg'); } .ico-shield-check { --i: url('../images/icons/shield-check.svg'); } .ico-users-three { --i: url('../images/icons/users-three.svg'); } .ico-lightbulb { --i: url('../images/icons/lightbulb.svg'); } .values { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin: 0 auto clamp(40px, 6vw, 72px); padding: 0; max-width: 980px; list-style: none; } .value { grid-column: span 5; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 220px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-card); background: var(--sky-soft); color: var(--ink); transition: transform .35s var(--ease); } .value:nth-child(4n+1), .value:nth-child(4n) { grid-column: span 7; } .value:nth-child(1) { background: var(--brand-deep); color: #fff; } .value:nth-child(2) { background: var(--sun-soft); } .value:nth-child(3) { background: var(--mint); } .value:nth-child(4) { background: var(--sky); } .value-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: auto; border-radius: 50%; background: var(--white); color: var(--brand-deep); font-size: 28px; } .value:nth-child(1) .value-icon { background: var(--sun); } .value h3 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; color: inherit; } .value p { margin: 0; font-weight: 700; font-size: 18px; color: inherit; opacity: .85; } @media (prefers-reduced-motion: no-preference) { .value:hover { transform: translateY(-4px); } } @media (max-width: 640px) { .values { grid-template-columns: 1fr; gap: 14px; } .value, .value:nth-child(4n+1), .value:nth-child(4n) { grid-column: auto; min-height: 168px; } } .voices-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center; max-width: 980px; margin-inline: auto; } .voice-stage { position: relative; display: grid; padding: clamp(32px, 5vw, 56px); border-radius: var(--r-panel); background: var(--sky-soft); } .voice-stage > .ico-quotes { position: absolute; right: 28px; top: 20px; width: 84px; height: 84px; color: var(--sun); } .voice { grid-area: 1 / 1; opacity: 0; visibility: hidden; margin: 0; transition: opacity .5s, visibility .5s; } .voice.is-active, html:not(.js) .voice { opacity: 1; visibility: visible; } html:not(.js) .voice { grid-area: auto; margin-bottom: 24px; } .testimonials { display: block; max-width: none; } .testimonials:not(.is-enhanced) .voice { display: block; grid-area: auto; margin: 0 0 24px; opacity: 1; visibility: visible; } .testimonials.is-enhanced .voice { grid-area: 1 / 1; opacity: 0; visibility: hidden; margin: 0; } .testimonials.is-enhanced .voice.is-active { opacity: 1; visibility: visible; } .testimonials__controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; } .testimonials__controls button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); color: var(--primary-700); font: 700 24px/1 var(--font-body); cursor: pointer; } .testimonials__controls button:hover { background: var(--primary-50); border-color: var(--primary-300); } .testimonials__controls button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .testimonials__controls [data-testimonial-status] { min-width: 48px; color: var(--text-secondary); text-align: center; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .testimonials.is-enhanced .voice { transition: none; } } .voice blockquote { margin: 0 0 24px; font: 700 clamp(20px, 2.3vw, 27px)/1.5 var(--font-head); color: var(--brand-deep); max-width: none; text-align: left; } .voice figcaption { display: flex; align-items: center; gap: 14px; font: 800 17px/1.25 var(--font-head); color: var(--brand); } .voice figcaption small { font: 600 14px var(--font-body); color: var(--muted); } .voice-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sun); border: 3px solid var(--white); } .voice-avatar img { width: 34px; height: auto; } .voice-dots { display: grid; gap: 14px; } .voice-dots button { position: relative; width: 22px; height: 22px; padding: 0; border: 2px solid var(--brand); border-radius: 50%; background: transparent; } .voice-dots button::before { content: ''; position: absolute; inset: -7px; } .voice-dots button[aria-current] { background: var(--brand); box-shadow: 0 0 0 5px var(--sky); } /* Contact panel (home + contact page) */ .contact-home { padding: clamp(12px, 2vw, 24px) 0 clamp(20px, 2.6vw, 36px); } .contact-panel { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 32px; width: min(1320px, calc(100% - 24px)); margin-inline: auto; padding: clamp(36px, 5vw, 72px); border-radius: var(--r-panel); background: var(--mint); } .contact-copy > p { color: var(--muted); max-width: 46ch; margin: 14px 0 28px; } .form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; } .field { display: grid; gap: 4px; } .field--wide, .form-actions { grid-column: 1 / -1; } .field label { font: 800 15px var(--font-head); color: var(--brand-deep); } .field abbr { color: var(--brand); text-decoration: none; } .field input, .field textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 2px solid var(--border-default); border-radius: 0; background: transparent; font: inherit; color: var(--ink); } .field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 2px 0 var(--brand); } .field textarea { resize: vertical; min-height: 84px; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-note { margin: 0; min-height: 1.5em; font-weight: 700; } .form-note.is-ok { color: var(--success); } .form-note.is-loi { color: var(--error); } .contact-art { position: relative; display: grid; place-items: center; min-height: 340px; } .art-disc { display: grid; place-items: end center; width: min(360px, 82%); aspect-ratio: 1; border-radius: 50%; background: var(--primary); overflow: hidden; box-shadow: 0 0 0 10px var(--sun-soft); } .art-disc img { width: 92%; height: auto; } .badge { position: absolute; z-index: 2; padding: 12px 20px; border: 2px solid var(--brand); border-radius: 16px; background: var(--white); color: var(--brand-deep); font: 800 18px/1.1 var(--font-head); box-shadow: var(--shadow); } .badge b { font-size: 30px; color: var(--brand); } .badge--a { right: 0; top: 8%; transform: rotate(6deg); } .badge--b { left: 0; bottom: 14%; transform: rotate(-6deg); } /* Marquee (the only one on the site) */ .marquee { overflow: hidden; background: var(--sun); color: var(--brand-deep); padding: 22px 0; } .marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .marquee-track span { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; font: 800 clamp(24px, 3vw, 34px)/1 var(--font-head); text-transform: uppercase; white-space: nowrap; } .marquee-track span::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); } @keyframes marquee { to { transform: translateX(-50%); } } /* Footer */ .site-footer { background: var(--primary); color: var(--ink); padding-top: 72px; } .footer-grid { display: grid; grid-template-columns: 1.1fr .8fr 1.5fr 1.1fr; gap: clamp(28px, 4vw, 56px); } .footer-brand { text-align: center; } .footer-brand .brand-badge { margin: 0 auto 16px; } .brand-badge--lg { width: 132px; height: 132px; } .footer-brand .script-line { margin: 0 auto; max-width: 14em; font-size: 28px; } .footer-title { font: 800 17px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--brand-deep); margin-bottom: 18px; } .site-footer a { color: var(--ink); } .site-footer a:hover { color: var(--brand); } .site-footer ul { display: grid; gap: 10px; } .contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; } .contact-list .ico { margin-top: 4px; color: var(--brand); font-size: 18px; } .site-footer .btn--light { color: var(--brand-deep); } .site-footer .btn--light:hover { color: var(--brand-deep); } .site-footer .socials { margin-top: 22px; } .site-footer .socials a { background: var(--white); color: var(--brand); } .site-footer .socials a:hover { background: var(--sun); color: var(--brand-deep); } .footer-bottom { margin-top: 52px; border-top: 1px solid rgba(31, 59, 77, .16); padding: 22px 0 28px; font-size: 14.5px; } .footer-bottom p { margin: 0; color: var(--muted); text-align: center; } .to-top { position: fixed; right: clamp(14px, 4vw, 22px); bottom: clamp(14px, 4vw, 22px); z-index: 30; display: grid; place-items: center; width: clamp(46px, 13vw, 56px); aspect-ratio: 75 / 90; padding: 0; border: 0; background: url("../images/deco-pin-sun.svg") center / 100% 100% no-repeat; color: var(--brand-deep); font-size: clamp(19px, 5.4vw, 22px); filter: drop-shadow(0 8px 10px rgba(36, 89, 125, .25)); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .25s, transform .25s; } /* Đầu ghim là hình tròn có tâm ở khoảng 59% chiều cao: đặt mũi tên đúng tâm đó để không bị lệch ở mọi kích thước. */ .to-top .ico { position: absolute; left: 50%; top: 59%; transform: translate(-50%, -50%); } .to-top.show { opacity: 1; pointer-events: auto; transform: none; } .to-top:hover { background-image: url("../images/deco-pin-brand.svg"); color: #fff; } /* Inner pages */ .page-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 260px; overflow: hidden; color: #fff; } .page-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; } .page-hero-bg--rung-chuong-vang-2 { object-position: center 62%; } .page-hero-bg--hoat-dong-van-nghe { object-position: center 56%; } .page-hero-bg--hoat-dong-trai-nghiem { object-position: center 68%; } .page-hero-wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, rgba(36, 89, 125, .92) 35%, rgba(50, 111, 151, .55)); } .page-hero-in { padding-block: 84px 48px; } .page-hero h1 { font-weight: 800; font-size: clamp(30px, 4.4vw, 56px); text-transform: uppercase; max-width: 22ch; overflow-wrap: anywhere; } .crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-weight: 600; } .crumbs a { color: var(--sun-soft); } .crumbs b { font-weight: 700; } .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; } .about-art { position: relative; aspect-ratio: 1 / .95; } .about-art .b3 { left: 0; top: 0; width: 82%; height: 64%; border-radius: 40% 60% 52% 48% / 56% 44% 56% 44%; } .about-art .b4 { right: 0; bottom: 0; width: 46%; height: 42%; border-radius: 54% 46% 60% 40% / 44% 58% 42% 56%; z-index: 2; } .about-art .b5 { left: 6%; bottom: 0; width: 42%; height: 40%; border-radius: 46% 54% 44% 56% / 58% 46% 54% 42%; z-index: 3; } .about-copy .lead { font: 700 22px/1.4 var(--font-head); color: var(--brand-deep); } .about-copy p { color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .chips li { padding: 9px 18px; border-radius: 999px; background: var(--sun-soft); color: var(--brand-deep); font: 700 15px var(--font-head); } .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .info { padding: 28px 24px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--white); } .info-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; border-radius: 50%; background: var(--primary); color: var(--brand-deep); font-size: 24px; } .info h2, .info h3 { font-size: 21px; color: var(--brand-deep); margin-bottom: 10px; } .info p { margin: 0 0 8px; font-size: 15.5px; color: var(--muted); } .contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } .info-stack { display: grid; gap: 22px; } .info-stack .info { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; } .info-stack .info-icon { margin-bottom: 0; } .info-stack .info h2 { margin-bottom: 4px; } .info p a { overflow-wrap: anywhere; color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .place-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .place-list li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); } .place-list li:last-child { padding-bottom: 0; border-bottom: 0; } .place-list b { grid-column: 1 / -1; color: var(--brand-deep); } .place-list span { color: var(--muted); font-size: 15.5px; } .place-list a { align-self: center; padding: 4px 14px; border: 2px solid var(--brand); border-radius: 999px; color: var(--brand-deep); font-size: 14px; font-weight: 700; white-space: nowrap; } .place-list a:hover { background: var(--brand); color: var(--white); } @media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } } .maps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; } .maps section:first-child, .campuses .info:first-child { grid-column: 1 / -1; } .maps h2 { font-size: 22px; color: var(--brand-deep); } .maps p { margin: 4px 0 14px; color: var(--muted); font-size: 15px; } .map { width: 100%; height: 280px; border: 4px solid var(--sun); border-radius: var(--r-card); background: var(--sky-soft); } .prose { font-size: 18px; } .prose > * + * { margin-top: 1.1em; } .prose h2, .prose h3 { color: var(--brand-deep); margin-top: 1.6em; } .prose h2 { font-size: 32px; } .prose h3 { font-size: 24px; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose ul { list-style: disc; padding-left: 1.4em; } .prose ol { padding-left: 1.4em; } .prose img, .prose iframe, .prose video { max-width: 100%; height: auto; border-radius: 18px; } /* Ảnh trong bài: giữ tỉ lệ thật (dọc hoặc ngang), không kéo giãn quá kích thước gốc, ảnh dọc hiện đủ chiều cao. Emoji dán từ Facebook vẫn nằm trong dòng chữ. */ .prose figure { margin: 1.6em 0; } .prose figure img, .prose p > img:only-child, .prose img[class*="wp-image-"] { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; } /* Khung đọc PDF (plugin PDF.js): iframe bị height:auto ở trên nên chỉ còn 150px; ép chiều cao đủ đọc, ghi đè cả style inline của plugin. */ .prose iframe[src*="pdf"] { width: 100%; height: 90vh !important; min-height: 720px; } /* Video/playlist (MediaElement): player gán inline width/height theo video gốc (640x360) nên tràn khung trên mobile; ép co theo khung, giữ tỉ lệ 16:9. */ .prose .wp-playlist, .prose .mejs-container, .prose .mejs-container .mejs-inner, .prose .wp-video { width: 100% !important; max-width: 100% !important; } .prose .mejs-container { height: auto !important; aspect-ratio: 16 / 9; } .prose .mejs-container video, .prose .mejs-container .mejs-mediaelement, .prose .mejs-container .mejs-layer { width: 100% !important; height: 100% !important; } .prose .wp-video-playlist .wp-playlist-tracks { max-height: 220px; overflow-y: auto; } .prose figcaption { margin-top: 8px; color: var(--muted); font-size: 15px; text-align: center; } /* Thư viện ảnh [gallery]: WordPress tự chèn