/* Brand palette synchronized with the current school-uniform logo. */
:root {
    --dp-brand-primary: #004497;
    --dp-brand-primary-dark: #002b63;
    --dp-brand-primary-soft: #eaf3fc;
    --dp-brand-accent: #ff6300;
    --dp-brand-accent-dark: #d84f00;
    --dp-brand-accent-soft: #fff2e8;
    --dp-brand-ink: #1f2937;
    --dp-brand-muted: #667085;
    --dp-brand-line: #dfe8f2;
    --dp-brand-surface: #ffffff;
    --dp-brand-page: #f5f8fc;

    /* Compatibility aliases used by legacy theme modules. */
    --brand-blue: var(--dp-brand-primary);
    --brand-blue-dark: var(--dp-brand-primary-dark);
    --brand-navy: var(--dp-brand-primary);
    --brand-navy-soft: #1663b7;
    --brand-red: var(--dp-brand-accent);
    --brand-red-dark: var(--dp-brand-accent-dark);
    --brand-orange: var(--dp-brand-accent);
    --brand-orange-soft: var(--dp-brand-accent-soft);
    --dpqn-brand-red: var(--dp-brand-accent);
    --dpqn-brand-red-dark: var(--dp-brand-accent-dark);
    --bs-primary: var(--dp-brand-primary);
    --bs-link-color: var(--dp-brand-primary);
    --bs-link-hover-color: var(--dp-brand-accent-dark);
}

.school-home {
    --school-navy: var(--dp-brand-primary);
    --school-orange: var(--dp-brand-accent);
    --school-text: var(--dp-brand-ink);
    --school-muted: var(--dp-brand-muted);
    --school-band: #f3f7fc;
}

::selection {
    background: var(--dp-brand-primary);
    color: #fff;
}

body {
    color: var(--dp-brand-ink);
    background-color: var(--dp-brand-page);
}

a { color: var(--dp-brand-primary); }
a:hover,
a:focus-visible { color: var(--dp-brand-accent-dark) !important; }

.entry-title,
.archive-title,
.page-title,
.section-title,
.widget-title,
.entry-content h2,
.entry-content h3,
.dpqn-section-title,
.brand-section__title,
.contact-section__title,
.school-section-title,
.school-production__title,
.school-products__title,
.school-customers__title {
    color: var(--dp-brand-primary-dark) !important;
}

.site-header,
.dpqn-demo-header {
    border-color: var(--dp-brand-line) !important;
    box-shadow: 0 8px 26px rgba(0, 68, 151, .08) !important;
}

.site-header .menuSecondary__menu > li.current-menu-item > a,
.site-header .menuSecondary__menu > li.current-menu-ancestor > a,
.site-header .menuSecondary__menu > li > a:hover,
.dpqn-demo-nav-menu > li.current-menu-item > a,
.dpqn-demo-nav-menu > li.current-menu-ancestor > a,
.dpqn-demo-nav-menu > li > a:hover {
    color: var(--dp-brand-accent) !important;
}

.site-header .menuSecondary__menu .sub-menu,
.dpqn-demo-nav-menu .sub-menu {
    border-top-color: var(--dp-brand-accent) !important;
}

.dpqn-demo-search-box,
.form-main { border-color: var(--dp-brand-primary) !important; }

.dpqn-demo-search-box button,
.form-main .btn-search,
.btn-primary,
.button,
button[type="submit"],
input[type="submit"],
.dpqn-btn-detail,
.dpqn-product-demo__consult-button,
.archive-load-more,
.brand-btn--primary,
.school-product-card__cta {
    border-color: var(--dp-brand-accent) !important;
    background-color: var(--dp-brand-accent) !important;
    color: #fff !important;
}

.dpqn-demo-search-box button:hover,
.form-main .btn-search:hover,
.btn-primary:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.dpqn-btn-detail:hover,
.dpqn-product-demo__consult-button:hover,
.archive-load-more:hover,
.brand-btn--primary:hover,
.school-product-card:hover .school-product-card__cta {
    border-color: var(--dp-brand-accent-dark) !important;
    background-color: var(--dp-brand-accent-dark) !important;
    color: #fff !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--dp-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 151, .12) !important;
    outline: 0;
}

.product-item__price,
.product-card__price,
.dpqn-product-demo__price,
.school-product-card__price-new,
.text-red,
.price {
    color: var(--dp-brand-accent) !important;
}

.product-item:hover,
.product-card:hover,
.news-card:hover,
.post-card:hover,
.brand-card:hover,
.school-product-card:hover,
.school-news-card:hover,
.school-category-card:hover {
    border-color: rgba(255, 99, 0, .38) !important;
    box-shadow: 0 14px 30px rgba(0, 68, 151, .13) !important;
}

.product-item__badge,
.product-card__badge,
.school-product-card__badge,
.badge-sale,
.brand-badge,
.bg-red {
    background-color: var(--dp-brand-accent) !important;
    color: #fff !important;
}

.school-category-card__name,
.dpqn-cat-title,
.cate-home__title-name {
    background-color: var(--dp-brand-primary) !important;
    color: #fff !important;
}

.school-slider-arrow,
.school-customers__play,
.school-customers__video-button {
    border-color: rgba(255, 255, 255, .9) !important;
    background-color: var(--dp-brand-primary) !important;
    color: #fff !important;
}

.school-slider-arrow:hover,
.school-customers__play:hover,
.school-customers__video-button:hover {
    background-color: var(--dp-brand-accent) !important;
}

.breadcrumb a,
.breadcrumbs a { color: var(--dp-brand-primary) !important; }
.breadcrumb .active,
.breadcrumb li:last-child,
.breadcrumbs .current { color: var(--dp-brand-accent-dark) !important; }

.pagination .current,
.pagination a:hover,
.page-numbers.current,
.page-numbers:hover {
    border-color: var(--dp-brand-accent) !important;
    background: var(--dp-brand-accent) !important;
    color: #fff !important;
}

.footer,
.site-footer {
    background: linear-gradient(135deg, var(--dp-brand-primary-dark), var(--dp-brand-primary)) !important;
}

.footer h2,
.footer h3,
.footer h4,
.footer strong,
.footer__bottom,
.site-footer h2,
.site-footer h3,
.site-footer h4 { color: #fff !important; }

.footer a:hover,
.site-footer a:hover,
.footer__contact i { color: var(--dp-brand-accent) !important; }

.footer__newsletter button,
.f-btn.btn-phone,
.quick-contact__phone { background-color: var(--dp-brand-accent) !important; }

@media (prefers-reduced-motion: no-preference) {
    .btn-primary,
    .button,
    .product-item,
    .product-card,
    .school-product-card,
    .school-news-card,
    a {
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
}

/* Footer: stronger brand-blue surface keeps the transparent navy-orange logo legible. */
.footer,
.site-footer {
    margin-top: 0 !important;
    border-top: 4px solid var(--dp-brand-accent);
    background:
        radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .58), transparent 31%),
        linear-gradient(135deg, #d4eaff 0%, #b9d7f5 52%, #dcecff 100%) !important;
    color: #123b65 !important;
}

.footer .footer__logo-wrap {
    margin-bottom: 18px !important;
    text-align: left;
}

.footer .footer__logo-wrap a {
    display: inline-block;
}

.footer .footer__logo-wrap img,
.footer .footer__logo-wrap .custom-logo {
    width: min(100%, 410px) !important;
    max-width: 410px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
}

.footer h2,
.footer h3,
.footer h4,
.footer strong,
.footer a,
.footer p,
.footer li,
.footer__contact li,
.footer__bottom,
.footer__bottom p,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: #07356f !important;
}

.footer h4::after {
    background: var(--dp-brand-accent) !important;
}

.footer__grid {
    border-bottom-color: rgba(7, 53, 111, .16) !important;
}

.footer__newsletter input {
    border-color: rgba(7, 53, 111, .24) !important;
    background: rgba(255, 255, 255, .7) !important;
    color: #07356f !important;
}

.footer__newsletter input::placeholder {
    color: #58718f !important;
}

.footer__social a {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .78);
    box-shadow: 0 7px 18px rgba(7, 53, 111, .16);
}

.footer__social a i,
.footer__social a i::before {
    color: #fff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #fff;
}

.footer__social a.fb { background: #1877f2 !important; }
.footer__social a.yt { background: var(--dp-brand-accent) !important; }
.footer__social a.tk { background: #008fe5 !important; }

.footer__social a:hover,
.footer__social a:focus-visible {
    color: #fff !important;
    filter: brightness(1.06) saturate(1.08);
    box-shadow: 0 10px 22px rgba(7, 53, 111, .22);
}

.footer .footer__grid > div:first-child .footer__social {
    width: max-content;
    margin: 18px auto 0;
    justify-content: center;
}

@media (max-width: 768px) {
    .footer .footer__logo-wrap {
        text-align: center;
    }

    .footer .footer__logo-wrap img,
    .footer .footer__logo-wrap .custom-logo {
        width: min(100%, 340px) !important;
        max-width: 340px !important;
        margin-inline: auto !important;
    }
}

/* Desktop navigation: clearer type and reliable hover/focus dropdowns. */
@media (min-width: 769px) {
    .dpqn-demo-header,
    .dpqn-demo-inner,
    .dpqn-demo-right,
    .dpqn-demo-nav,
    .dpqn-demo-nav-inner,
    .dpqn-demo-nav-menu {
        overflow: visible !important;
    }

    .dpqn-demo-header,
    .dpqn-demo-nav {
        position: relative;
        z-index: 500;
    }

    .dpqn-demo-nav-inner {
        min-height: 56px !important;
    }

    .dpqn-demo-nav-menu > li > a {
        min-height: 56px !important;
        padding: 10px 20px !important;
        color: var(--dp-brand-primary-dark) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .dpqn-demo-nav-menu .menu-item-has-children > a::after {
        margin-left: 8px !important;
        font-size: 12px !important;
        transition: transform .2s ease;
    }

    .dpqn-demo-nav-menu .sub-menu {
        top: calc(100% - 2px) !important;
        z-index: 10000 !important;
        display: block !important;
        min-width: 270px !important;
        overflow: visible !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(8px);
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    }

    .dpqn-demo-nav-menu .sub-menu .sub-menu {
        top: 0 !important;
        left: calc(100% - 2px) !important;
        transform: translateX(8px);
    }

    .dpqn-demo-nav-menu li:hover > .sub-menu,
    .dpqn-demo-nav-menu li:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition-delay: 0s;
    }

    .dpqn-demo-nav-menu li:hover > a::after,
    .dpqn-demo-nav-menu li:focus-within > a::after {
        transform: rotate(180deg);
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .dpqn-demo-nav-menu > li > a {
        padding-inline: 12px !important;
        font-size: 16px !important;
    }
}

/* Product collection: clean branded heading and polished image cards. */
.school-products__heading {
    position: relative;
    display: flex;
    min-height: 0;
    margin: 0 0 26px;
    padding: 28px 32px 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 68, 151, .12);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(234, 243, 255, .92));
    box-shadow: 0 12px 30px rgba(0, 68, 151, .08), inset 0 1px 0 #fff;
}

.school-products__heading::before,
.school-products__heading::after {
    display: none;
}

.school-products__title {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 12px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--dp-brand-primary-dark) !important;
    font-size: clamp(27px, 2.55vw, 40px) !important;
    font-weight: 600 !important;
    line-height: 1.24 !important;
    letter-spacing: -.02em;
    text-align: center;
    text-shadow: none;
}

.school-products__title::before {
    display: none;
}

.school-products__title::after {
    content: '';
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 76px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dp-brand-accent), #ff9a47);
    box-shadow: 0 3px 9px rgba(255, 99, 0, .18);
    transform: translateX(-50%);
}

.school-products__title-link,
.school-products__title-link:hover,
.school-products__title-link:focus {
    color: var(--dp-brand-primary-dark) !important;
}

.school-products__grid {
    border: 1px solid rgba(0, 68, 151, .1);
    border-radius: 24px;
    background: linear-gradient(145deg, #f7faff, var(--dp-brand-primary-soft)) !important;
    box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(0, 68, 151, .08);
}

.school-product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 68, 151, .18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(5, 48, 99, .1);
    transform: translateZ(0);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.school-product-card::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--dp-brand-primary), var(--dp-brand-accent));
    opacity: .9;
    pointer-events: none;
}

.school-product-card__media {
    margin: 7px 7px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 68, 151, .14);
    border-radius: 13px 13px 8px 8px;
    background: #edf3f9;
}

.school-product-card__image {
    transform: scale(1.002);
    transition: transform .5s cubic-bezier(.2, .65, .3, 1), filter .32s ease !important;
}

.school-product-card__cta {
    border-radius: 10px !important;
    box-shadow: 0 7px 15px rgba(255, 99, 0, .18);
}

@media (hover: hover) and (pointer: fine) {
    .school-product-card:hover,
    .school-product-card:focus-within {
        border-color: rgba(255, 99, 0, .55) !important;
        box-shadow: 0 20px 40px rgba(0, 68, 151, .17) !important;
        transform: translateY(-7px);
    }

    .school-product-card:hover .school-product-card__image,
    .school-product-card:focus-within .school-product-card__image {
        transform: scale(1.06);
        filter: saturate(1.04) contrast(1.02);
    }
}

@media (max-width: 767px) {
    .school-products__heading {
        margin-bottom: 16px;
        padding: 20px 14px 22px;
        border-radius: 15px;
    }

    .school-products__title {
        width: auto;
        padding: 0 6px 12px;
        font-size: clamp(21px, 6vw, 27px) !important;
        line-height: 1.28 !important;
    }

    .school-products__title::after {
        width: 58px;
        height: 3px;
    }

    .school-products__grid {
        padding: 12px !important;
        border-radius: 18px;
    }

    .school-product-card { border-radius: 14px; }
    .school-product-card__media { margin: 5px 5px 0; border-radius: 10px 10px 6px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .school-product-card,
    .school-product-card__image {
        transition: none !important;
    }
}

/* Homepage typography: softer title weights with natural Vietnamese title case. */
.school-home .school-section-title,
.school-home .school-production__title,
.school-home .school-customers__title {
    font-weight: 500 !important;
    letter-spacing: -.015em;
    text-transform: none !important;
}

.school-home .school-products__title {
    font-weight: 600 !important;
    letter-spacing: -.018em;
    text-transform: none !important;
}

.school-home .school-category-card__name,
.school-home .school-product-card__name,
.school-home .school-news-card__title {
    font-weight: 500 !important;
}

/* Fixed Zalo/hotline bar: compact demo-style pills using the site's own assets. */
body {
    padding-bottom: 0;
}

.footer {
    padding-bottom: 56px !important;
}

.contact-action-bar {
    position: fixed;
    z-index: 99999;
    inset: auto 0 0;
    display: flex;
    min-height: 60px;
    padding: 10px 16px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
}

.contact-action {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    padding: 0 17px 0 47px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 40px;
    color: #fff !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 40px;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(0, 43, 99, .14);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
    pointer-events: auto;
}

.contact-action--zalo { background: #1071fd !important; }
.contact-action--phone { background: #07b250 !important; }

.contact-action__icon {
    position: absolute;
    top: -1px;
    left: -4px;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    background: transparent;
    object-fit: cover;
    animation: dpqn-contact-icon-ring 1s ease-in-out infinite;
}

.contact-action strong {
    color: inherit !important;
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .contact-action:hover,
    .contact-action:focus-visible {
        color: #fff !important;
        transform: translateY(-3px);
        filter: saturate(1.08);
        box-shadow: 0 11px 25px rgba(0, 43, 99, .22);
    }
}

.contact-action:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .92);
    outline-offset: 3px;
}

@keyframes dpqn-contact-icon-ring {
    0%, 100% { transform: rotate(0deg) scale(1); }
    10%, 30% { transform: rotate(-7deg) scale(1.02); }
    20%, 40% { transform: rotate(7deg) scale(1.02); }
    50% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 767px) {
    .contact-action-bar {
        gap: 12px;
        padding-inline: 10px;
    }

    .contact-action {
        padding-right: 14px;
        padding-left: 45px;
        font-size: 16px;
    }
}

@media (max-width: 350px) {
    .contact-action-bar { gap: 8px; padding-inline: 6px; }
    .contact-action { padding-right: 10px; padding-left: 40px; font-size: 14px; }
    .contact-action__icon { left: -2px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-action,
    .contact-action__icon {
        transition: none !important;
        animation: none !important;
    }
}

/* Header refinement: softer type and a clearer, more inviting search field. */
.dpqn-demo-header,
.dpqn-demo-header input,
.dpqn-demo-header button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.dpqn-demo-search-box {
    border: 1px solid rgba(0, 68, 151, .22) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
    box-shadow: 0 7px 22px rgba(0, 68, 151, .10), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.dpqn-demo-search-box:focus-within {
    border-color: rgba(0, 68, 151, .56) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 151, .09), 0 9px 25px rgba(0, 68, 151, .13) !important;
}

.dpqn-demo-search-box input {
    color: var(--dp-brand-primary-dark) !important;
    font-weight: 400 !important;
    letter-spacing: -.01em;
}

.dpqn-demo-search-box input::placeholder {
    color: #75879a;
    opacity: 1;
}

.dpqn-demo-search-box button {
    width: 54px !important;
    border-radius: 0 13px 13px 0 !important;
    background: linear-gradient(135deg, #ff7a18 0%, var(--dp-brand-accent) 72%) !important;
    box-shadow: -3px 0 10px rgba(255, 99, 0, .12);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

.dpqn-demo-search-box button:hover,
.dpqn-demo-search-box button:focus-visible {
    filter: brightness(.94) saturate(1.06);
    box-shadow: -4px 0 14px rgba(255, 99, 0, .20);
}

.dpqn-demo-search-box button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.dpqn-demo-contact a {
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

@media (min-width: 769px) {
    .dpqn-demo-nav-menu > li > a {
        font-weight: 600 !important;
        letter-spacing: -.015em !important;
    }

    .dpqn-demo-nav-menu .sub-menu a {
        font-weight: 500 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dpqn-demo-search-box,
    .dpqn-demo-search-box button {
        transition: none !important;
    }
}