/* Theme storefront styles, cut verbatim from theme/*.html.
   Rules whose declarations differ per page live in css/pages/*.css so the
   pages cannot restyle each other. */

:root {
    --font-primary: 'Quicksand', sans-serif;
    --color-primary: #0083DD;
    --color-primary-light: #00C5FA;
    --color-red: #e4151c;
    --color-red-hover: #c90c13;
    --color-navy: #012A7A;
    --color-green: #4DCA28;
    --color-cream: #FFFDF8;
}

body {
    font-family: var(--font-primary);
}

.tuyen-sinh-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 1.25rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.wave-bottom {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.wave-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 26px;
}

.wave-bottom .shape-fill {
    fill: #ffffff;
}

.hero-section {
    background-image: url('assets/images/banner.jpg');
    background-size: cover;
    background-position: center;
}

#hero-blob {
    will-change: transform, opacity;
    transition: box-shadow 0.3s ease;
}

@keyframes bubbleFloatSlow {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    }

    50% {
        transform: translateY(-38px) rotate(18deg) scale(1.15);
        filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25));
    }
}

@keyframes bubbleFloatMed {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    }

    50% {
        transform: translateY(-28px) rotate(-14deg) scale(1.1);
        filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.22));
    }
}

@keyframes bubbleFloatFast {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
    }

    50% {
        transform: translateY(-20px) rotate(10deg) scale(1.08);
        filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.2));
    }
}

.animate-float-slow {
    animation: bubbleFloatSlow 4.5s ease-in-out infinite !important;
}

.animate-float-med {
    animation: bubbleFloatMed 3.2s ease-in-out infinite !important;
}

.animate-float-fast {
    animation: bubbleFloatFast 2.2s ease-in-out infinite !important;
}

.card-mask-wavy {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M25,12 C100,32 200,-8 275,12 C295,22 300,42 300,67 C285,157 310,257 295,347 C285,377 265,395 235,395 C150,380 50,415 25,395 C5,385 0,365 0,340 C15,240 -15,140 5,60 C0,35 5,22 25,12 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M25,12 C100,32 200,-8 275,12 C295,22 300,42 300,67 C285,157 310,257 295,347 C285,377 265,395 235,395 C150,380 50,415 25,395 C5,385 0,365 0,340 C15,240 -15,140 5,60 C0,35 5,22 25,12 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.card-mask-wavy:hover {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

.card-mask-scallop {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M20,15 C50,0 80,25 110,10 C140,-5 170,20 200,5 C230,-10 260,15 285,15 C295,25 300,40 300,60 C285,100 310,140 295,180 C310,220 285,260 300,300 C285,340 300,375 285,385 C270,395 240,380 210,395 C180,410 150,385 120,400 C90,415 60,390 30,400 C15,390 0,375 0,350 C15,310 -5,270 10,230 C-5,190 15,150 0,110 C15,70 0,35 20,15 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M20,15 C50,0 80,25 110,10 C140,-5 170,20 200,5 C230,-10 260,15 285,15 C295,25 300,40 300,60 C285,100 310,140 295,180 C310,220 285,260 300,300 C285,340 300,375 285,385 C270,395 240,380 210,395 C180,410 150,385 120,400 C90,415 60,390 30,400 C15,390 0,375 0,350 C15,310 -5,270 10,230 C-5,190 15,150 0,110 C15,70 0,35 20,15 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.card-mask-scallop:hover {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

.section-mask-wavy {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M0,35 C150,75 350,-15 500,35 C650,85 900,-10 1200,30 L1200,760 C1000,790 800,730 600,775 C400,810 200,740 0,765 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M0,35 C150,75 350,-15 500,35 C650,85 900,-10 1200,30 L1200,760 C1000,790 800,730 600,775 C400,810 200,740 0,765 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.icon-wavy-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transition: border-radius 0.6s ease;
}

.icon-wavy-shape:hover {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}

.card-scallop {
    position: relative;
    border-radius: 2rem 2rem 0 0;
    padding-bottom: 4rem;
    overflow: visible;
}

.card-scallop::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 100%;
    height: 28px;
    background: inherit;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28'%3E%3Cpath d='M0,0 L0,14 C0,14 7.5,28 15,28 C22.5,28 30,14 30,14 C30,14 37.5,28 45,28 C52.5,28 60,14 60,14 C60,14 67.5,28 75,28 C82.5,28 90,14 90,14 C90,14 97.5,28 105,28 C112.5,28 120,14 120,14 C120,14 127.5,28 135,28 C142.5,28 150,14 150,14 C150,14 157.5,28 165,28 C172.5,28 180,14 180,14 C180,14 187.5,28 195,28 C202.5,28 210,14 210,14 C210,14 217.5,28 225,28 C232.5,28 240,14 240,14 C240,14 247.5,28 255,28 C262.5,28 270,14 270,14 C270,14 277.5,28 285,28 C292.5,28 300,14 300,14 L300,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28'%3E%3Cpath d='M0,0 L0,14 C0,14 7.5,28 15,28 C22.5,28 30,14 30,14 C30,14 37.5,28 45,28 C52.5,28 60,14 60,14 C60,14 67.5,28 75,28 C82.5,28 90,14 90,14 C90,14 97.5,28 105,28 C112.5,28 120,14 120,14 C120,14 127.5,28 135,28 C142.5,28 150,14 150,14 C150,14 157.5,28 165,28 C172.5,28 180,14 180,14 C180,14 187.5,28 195,28 C202.5,28 210,14 210,14 C210,14 217.5,28 225,28 C232.5,28 240,14 240,14 C240,14 247.5,28 255,28 C262.5,28 270,14 270,14 C270,14 277.5,28 285,28 C292.5,28 300,14 300,14 L300,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.text-clamp-hero-p {
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    line-height: 1.6;
}

.text-clamp-sub {
    font-size: clamp(0.875rem, 1.35vw, 1.125rem);
    line-height: 1.5;
}

.text-clamp-stat-num {
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    line-height: 1.1;
}

.text-clamp-body {
    font-size: clamp(0.875rem, 1.15vw, 1.05rem);
    line-height: 1.65;
}

.gallery-item {
    transition: all 0.4s ease;
}

/* Admin-managed navigation inside the theme header ------------------------
   client.partials.navigation emits the same markup the API-driven menu uses;
   these rules make it look like the theme's own nav so a filled `primary` menu
   does not fall back to unstyled core markup. Only the header scope is styled:
   storefront.css keeps owning .client-nav everywhere else. */

.client-header-nav .client-nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.client-header-nav .client-nav-item {
    position: relative;
}

.client-header-nav .client-nav-item > a,
.client-header-nav .client-nav-item > span {
    display: inline-block;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
    color: var(--color-navy);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.client-header-nav .client-nav-item > a:hover {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
}

.client-header-nav .client-nav-item > a.is-active {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
}

.client-header-nav .client-nav-item > span {
    color: var(--color-navy);
    opacity: 0.6;
    cursor: default;
}

/* Second level: a hover panel, since the theme header has no room for a row. */
.client-header-nav .client-nav-list .client-nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    min-width: 14rem;
    padding: 0.5rem 0;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px rgba(1, 42, 122, 0.15);
    z-index: 50;
}

.client-header-nav .client-nav-item:hover > .client-nav-list,
.client-header-nav .client-nav-item:focus-within > .client-nav-list {
    display: flex;
}

.client-header-nav .client-nav-list .client-nav-list .client-nav-item > a,
.client-header-nav .client-nav-list .client-nav-list .client-nav-item > span {
    display: block;
    padding: 0.5rem 1.25rem;
    border-bottom: 0;
    font-size: 1rem;
}

/* Post body ---------------------------------------------------------------
   Content saved through HtmlSanitizer is plain tags with no utility classes,
   so the theme has to style them. Scoped to .client-post-body so a CMS page's
   own markup is untouched. */

.client-post-body > * + * {
    margin-top: 1.1em;
}

.client-post-body h2,
.client-post-body h3,
.client-post-body h4 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.25;
}

.client-post-body h2 { font-size: 1.6rem; }
.client-post-body h3 { font-size: 1.35rem; }
.client-post-body h4 { font-size: 1.15rem; }

.client-post-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.client-post-body a:hover {
    color: var(--color-red);
}

.client-post-body ul,
.client-post-body ol {
    padding-left: 1.4rem;
}

.client-post-body ul { list-style: disc; }
.client-post-body ol { list-style: decimal; }
.client-post-body li + li { margin-top: 0.35rem; }

.client-post-body img {
    border-radius: 0.9rem;
    box-shadow: 0 10px 30px rgba(1, 42, 122, 0.12);
}

.client-post-body blockquote {
    margin-left: 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid var(--color-primary-light);
    color: #475569;
    font-style: italic;
}

.client-post-body table {
    width: 100%;
    border-collapse: collapse;
}

.client-post-body th,
.client-post-body td {
    border: 1px solid #e5e7eb;
    padding: 0.6rem 0.8rem;
    text-align: left;
}