/*
 * Teal palette override — restyles the theme from the legacy green palette
 * to the new teal/mint brand palette (per "Website TT - TỔNG - Opt 1" design).
 *
 * Palette:
 *   --tt-teal:        #31bbac  (primary — active nav, buttons, accents)
 *   --tt-teal-dark:   #148d84  (dark accents, headings, hovers)
 *   --tt-teal-mid:    #36a59c  (panels, secondary fills)
 *   --tt-mint:        #a2d9d4  (borders, soft fills)
 *   --tt-mint-light:  #c7e9e6  (pale backgrounds, nav hover)
 *   --tt-mint-pale:   #e2f6f4  (page tint)
 *
 * Loaded after theme.css/style.css so plain selector overrides win by order.
 */

/* ---------- Brand fonts (supplied by designer, "Design upgrade 2026") ---------- */

@font-face {
    font-family: 'BDOGrotesk';
    src: url('../fonts/BDOGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'BDOGrotesk';
    src: url('../fonts/BDOGrotesk-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'BDOGrotesk';
    src: url('../fonts/BDOGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'UTMNeoSansIntel';
    src: url('../fonts/UTM Neo Sans Intel.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'UTMNeoSansIntel';
    src: url('../fonts/UTM Neo Sans IntelBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --tt-teal: #31bbac;
    --tt-teal-dark: #148d84;
    --tt-teal-mid: #36a59c;
    --tt-mint: #a2d9d4;
    --tt-mint-light: #c7e9e6;
    --tt-mint-pale: #e2f6f4;
    --tt-heading-teal: #32bcad;
    --tt-footer-corner-radius: 8px;

    /* "Chiếc lá" (leaf) corner system. The design rounds only two opposite
       corners — top-right and bottom-left — and leaves the other two square,
       which is what gives each panel its pointed-tip leaf silhouette.
       Uniform radii flatten the leaf into a plain rounded rectangle. */
    --tt-leaf-radius: 50px;
    --tt-leaf-radius-card: 40px;
    /* The hero image carries its own 0 60px 0 0 from theme.css, and the social
       bar below it is the matching bottom-left corner. Both ends of the pair
       must use this value or the two corners curve by different amounts. */
    --tt-leaf-radius-hero: 60px;

    /* How far the phone-header logo is pulled left of dead centre, so it
       balances against the company-name block below it. Negative = leftward. */
    --tt-mobile-logo-shift: -30px;
}

/* ---------- Generic helpers ---------- */

/* Base typography: legacy segoeui -> BDO Grotesk (design upgrade 2026) */
body {
    font-family: 'BDOGrotesk', 'segoeui', sans-serif;
}

.box-title,
.content .content-box-title,
.panel-default .panel-heading h4.panel-title a,
.footer-title {
    font-family: 'UTMNeoSansIntel', 'BDOGrotesk', sans-serif;
}

/* Header menu uses BDO Grotesk per homepage design (was UTM Neo Sans Intel) */
.mainnav ul.nav > li > a {
    font-family: 'BDOGrotesk', sans-serif;
}

/* Default link color: legacy red -> dark teal (news headlines keep their own orange) */
a {
    color: var(--tt-teal-dark);
}

a:hover {
    color: var(--tt-teal);
}

.text-green {
    color: var(--tt-teal-dark);
}

.box {
    background-color: var(--tt-mint-pale);
}

.line {
    border-top-color: var(--tt-mint);
}

.fancybox-slide--html .fancybox-close-small {
    background-color: var(--tt-teal);
}

/* ---------- Scenic page background (per design: teal sky -> misty mountains -> rice field) ---------- */

.main-content {
    /* Full scenic background supplied by the client at 2853px wide
       (sky -> misty mountains -> hills -> golden paddy), bottom-anchored;
       its alpha-faded top blends into the body sky gradient on tall pages.
       WebP at 2400px keeps it sharp on HiDPI; the 1600px PNG is the fallback
       for the few engines without WebP support. */
    background-image: url(../images/design-2026/bg-scene-full-v2.png);
    /* Safari 14-16 only understands the prefixed form and ignores type() */
    background-image: -webkit-image-set(url(../images/design-2026/bg-scene-full-v2.webp) 1x);
    background-image: image-set(
        url(../images/design-2026/bg-scene-full-v2.webp) type("image/webp"),
        url(../images/design-2026/bg-scene-full-v2.png) type("image/png")
    );
    background-repeat: no-repeat;
    background-position: center calc(100% + 75px);
    background-size: calc(100% + 170px) auto;
    background-color: transparent;
}

body {
    /* Sky gradient matched to the scene image's top edge (#26a39c) */
    background: linear-gradient(180deg, #26a39c 0%, #2ba79f 40%, #3db2a9 70%, #57bfb6 100%);
}

/* Legacy section gradients would paint over the scenic background — clear them */
.bg-gradient,
.slideshow {
    background: none;
    filter: none;
}

/* Homepage glass panel: wraps hero + categories + featured news (per design) */
.home-panel {
    /* Follow the theme's responsive container at each desktop breakpoint,
       leaving a consistent 30px reveal around the glass panel. */
    width: 1090px;
    max-width: calc(100% - 32px);
    margin: 25px auto 30px;
    padding: 20px 0 10px;
    background-color: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0 var(--tt-leaf-radius) 0 var(--tt-leaf-radius);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Keep the inherited Bootstrap container responsive inside the glass panel. */
.home-panel .container {
    max-width: calc(100% - 32px);
}

/* Tighten section spacing inside the panel (default .section padding is 30px) */
.home-panel .section {
    padding: 15px 0;
}

@media (max-width: 1199px) {
    .home-panel {
        width: 1030px;
    }
}

@media (max-width: 991px) {
    .home-panel {
        width: 810px;
    }
}

@media (max-width: 767px) {
    .home-panel {
        width: auto; /* container is fluid here */
        margin-left: 10px;
        margin-right: 10px;

        /* Phone reading order per client: hero slide, then featured news, then
           the category leaves. Reordering visually keeps the desktop source
           order (and its SEO/tab sequence) untouched. .home-panel has exactly
           three element children: .slideshow, .section.categories and the
           .section wrapping .news-index. */
        display: flex;
        flex-direction: column;
    }

    .home-panel > .slideshow {
        order: 1;
    }

    .home-panel > .section:not(.categories) {
        order: 2;
    }

    .home-panel > .section.categories {
        order: 3;
    }

    .home-panel .container {
        width: auto;
        max-width: 100%;
    }

    .categories .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    /* One leaf per row on phones (was a 2-up grid). */
    .categories .row > [class*="col-"] {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        clear: both;
        float: none;
    }

    .categories .category-item {
        margin-bottom: 16px;
    }
}

/* ---------- Header / main navigation ---------- */

/* Company name rendered as text (replaces legacy green slogan image) */
.slogan-text {
    text-align: center;
    margin-top: 0;
    padding-top: 47px;
}

.slogan-text .slogan-company-vi {
    display: block;
    color: var(--tt-teal);
    font-family: 'UTMNeoSansIntel', MyriadPro-Cond, sans-serif;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.slogan-text .slogan-company-en {
    display: block;
    color: #4a4a4a;
    font-family: 'BDOGrotesk', sans-serif;
    font-size: 17px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 4px;
}

.mainnav {
    background-color: #f2fbfa;
    border-top-color: var(--tt-teal);
}

/* Crop the transparent export for the compact header proportions in the design. */
.banner .logo {
    padding: 12px 0 0;
}

.logo img {
    height: 102px;
    max-height: none;
    width: auto;
}

/* VETCERT / QR badge, header right (per design) */
.header-badge {
    text-align: right;
    padding-top: 36px;
}

.header-badge img {
    height: 56px;
    width: auto;
}

.mainnav ul.nav > li > a {
    color: #1a1a1a;
}

.mainnav ul.nav > li:hover > a,
.mainnav ul.nav > li.active > a,
.mainnav ul.nav > li.current-menu-item > a {
    background-color: var(--tt-teal);
    color: #fff;
}

.lang a {
    color: #fff;
    background-color: var(--tt-teal);
}

.btn-menu-mobile {
    background-color: var(--tt-teal);
}

.btn-menu-mobile span {
    background-color: var(--tt-mint-pale);
}

.btn-menu-mobile span.menu-text {
    color: var(--tt-mint-pale);
}

/* Header banner: drop legacy green sprout artwork, near-white per design */
.banner {
    background-image: none;
    background: linear-gradient(to bottom, #ffffff 0%, #f4fbfa 100%);
}

.banner-wrapper {
    background-image: none;
}

@media (max-width: 767px) {
    .banner {
        background: var(--tt-mint-light);
    }

    .banner .logo {
        padding: 10px 0 0;
        text-align: center;
    }

    .banner .logo img,
    .logo img {
        width: 210px;
        height: auto !important;
        max-width: 62% !important;
        /* Optical nudge only — the logo artwork is symmetric (alpha centre of
           mass sits within 1px of its geometric centre), but centring the
           image leaves it sitting right of the company-name block underneath.
           Tune --tt-mobile-logo-shift alone to rebalance. */
        transform: translateX(var(--tt-mobile-logo-shift));
    }

    .slogan-text {
        margin-top: 0;
        padding-top: 8px;
        padding-bottom: 14px;
    }

    .slogan-text .slogan-company-vi {
        font-size: 19px;
        letter-spacing: 0.5px;
    }

    .slogan-text .slogan-company-en {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .main-content {
        background-position: center calc(100% + 30px);
        background-size: calc(100% + 50px) auto;
    }
}

/* ---------- Slideshow / hero ---------- */

/* Hero and the social bar below it read as one block, so the leaf corners are
   split across the two: the hero owns the top-right, the social bar the
   bottom-left. Rounding both top corners here squared off the leaf.

   The clip lives on the slide track, not on the carousel root. Owl renders its
   pagination as a sibling of that track, and the design parks those dots below
   the artwork on the social bar -- a clip on the root swallowed them whole. */
.owl-slide {
    border-radius: 0 var(--tt-leaf-radius-hero) 0 0;
    overflow: visible;
}

.owl-slide .owl-stage-outer {
    border-radius: 0 var(--tt-leaf-radius-hero) 0 0;
    overflow: hidden;
}

/* Pagination dots: one per banner, parked at the right end of the social bar
   and centred against the icons on its left. The offset is measured from the
   artwork's bottom edge, which is where the bar starts, so it holds as long as
   the bar keeps its 5px padding around a 24px icon row. */
.slideshow .owl-theme .owl-dots {
    bottom: -38px;
}

/* The legacy dots were white-on-photo with an orange active state, which the
   teal bar turns into an unrelated accent. White at two weights keeps them tied
   to the icons they sit beside. */
.slideshow .owl-theme .owl-dots .owl-dot span {
    background-color: rgba(255, 255, 255, 0.45);
    transition: background-color 0.2s ease;
}

.slideshow .owl-theme .owl-dots .owl-dot.active span,
.slideshow .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #fff;
}

/* Keep the carousel stable while a legacy upload is unavailable locally. */
.owl-slide .item {
    aspect-ratio: 1159 / 409;
    overflow: hidden;
}

.owl-slide .item img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* Social bar: flat solid teal-dark per design (was a teal -> teal-dark gradient) */
.social {
    background: var(--tt-teal-dark);
    filter: none;
    border-radius: 0 0 0 var(--tt-leaf-radius-hero);
}

/* Social icons: legacy gray -> white on the teal bar (per design) */
.social ul.nav > li > a {
    color: #fff;
}

/* Inlined TikTok mark: match the cap height of the Font Awesome glyphs beside it */
.social ul.nav > li > a .social-icon-tiktok {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* Zalo is a solid balloon rather than a thin glyph, so it carries more visual
   weight than its neighbours at the same box; trimmed to sit level with them. */
.social ul.nav > li > a .social-icon-zalo {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    vertical-align: -0.075em;
    fill: currentColor;
}

/* Keep icon size stable on hover (legacy grew 24px -> 28px); dim slightly instead */
.social ul.nav > li > a:hover {
    font-size: 24px;
    opacity: 0.75;
}

/* ---------- Section banners (.backdrop) ---------- */

/* New design banners are wide crops; always fill the 270px strip */
.backdrop {
    background-size: cover !important;
}

/* Giới thiệu banner must be shown end to end. Two separate crops were at work:
   the shipped artwork had itself been cut down from the designer's 8302x959
   original, and `cover` then scaled what remained to fill the fixed 270px
   strip, pushing more image past both edges. The artwork is now regenerated
   at the full 8302:959 ratio; fit it by width and let the strip follow that
   ratio so nothing is cropped and no letterbox bands appear.
   The ratio belongs on .backdrop, not on .relative: the background is sized
   against the full-bleed .backdrop width, while .relative is boxed inside
   .container and would compute a shorter strip that clips the banner.
   Each page supplies its own artwork ratio through --tt-backdrop-ratio; the
   fallback is the Giới thiệu banner. */
.backdrop-full {
    background-size: 100% auto !important;
    background-position: center center !important;
    aspect-ratio: var(--tt-backdrop-ratio, 8302 / 959);
}

.backdrop-full .relative {
    height: auto;
}

/* Fallback for browsers without aspect-ratio: keep the strip proportional. */
@supports not (aspect-ratio: 1) {
    .backdrop-full {
        height: 0;
        padding-bottom: 11.55%;
    }
}

/* Phones: a 7:1 banner fitted to a 375px screen is only ~50px tall, which reads
   as a hairline rather than a banner. Opt individual pages back into the filled
   strip there, trading some of the artwork's width for a strip with presence.
   How much width is affordable depends on the artwork, so the strip height is
   a variable rather than one number for everyone:

     height h, artwork ratio R, screen W  ->  visible width = W / (h * R)

   Depth is per page through --tt-backdrop-mobile-height rather than one number
   for everyone, and pages whose artwork carries its identifying mark at the
   left edge anchor there instead of centring, so the crop eats the right side. */
@media (max-width: 767px) {
    .backdrop-full.backdrop-mobile-fill {
        aspect-ratio: auto;
        height: auto;
        padding-bottom: 0;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Default depth. The Giới thiệu artwork is a symmetric skyline centred on
       the building, and the Tuyển dụng artwork frames its "LỄ CẤP XE" photo in
       the middle third, so both can lose the outer halves at no cost. */
    .backdrop-full.backdrop-mobile-fill .relative {
        height: var(--tt-backdrop-mobile-height, 105px);
    }

    /* The rice and product banners are not symmetric: the HOALUA Rice wordmark
       and the "SỨC MẠNH SINH HỌC" mark both sit at the far left, and a centred
       crop is what threw them away. Anchor left so the strip grows into the
       right edge, which on both artworks is background scenery. */
    .backdrop-full.backdrop-mobile-fill-left {
        background-position: left center !important;
    }

    /* Customer-supplied phone artwork carries its own composition. Show it
       end to end at its real ratio instead of applying the legacy desktop crop. */
    .backdrop-full.backdrop-mobile-fill.backdrop-mobile-custom {
        aspect-ratio: var(--tt-backdrop-mobile-ratio);
        background-image: var(--tt-backdrop-mobile-image) !important;
        background-position: center center !important;
        background-size: 100% auto !important;
    }

    .backdrop-full.backdrop-mobile-fill.backdrop-mobile-custom .relative {
        height: auto;
    }

    @supports not (aspect-ratio: 1) {
        .backdrop-full.backdrop-mobile-fill.backdrop-mobile-custom {
            height: 0;
            padding-bottom: var(--tt-backdrop-mobile-padding);
        }

        .backdrop-full.backdrop-mobile-fill.backdrop-mobile-custom .relative {
            height: 0;
        }
    }
}

/* ---------- Breadcrumb (teal bar with white text per design) ---------- */

.breadcrumb-wrapper {
    background-color: var(--tt-teal);
}

.breadcrumb > li,
.breadcrumb > li > a {
    font-family: 'UTMNeoSansIntel', 'BDOGrotesk', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* Design shows no page-title box over the banners — keep the h1 for SEO,
   hide it visually */
.backdrop .backdrop-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.breadcrumb > li.active {
    color: #fff;
}

.breadcrumb > li > a,
.breadcrumb > li + li:before {
    color: #fff;
}

/* ---------- Content areas ---------- */

/* Glassy white cards (per design).
   No blanket border-radius here: .box carries a .box-corner-* class that sets
   the two-opposite-corner leaf shape, and a uniform radius declared later in
   the cascade at equal specificity would silently flatten all four corners. */
.box {
    background-color: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Restate the theme's leaf corners so they survive this stylesheet's ordering. */
.box-corner-topright-bottomleft {
    -webkit-border-radius: 0 var(--tt-leaf-radius) 0 var(--tt-leaf-radius);
    border-radius: 0 var(--tt-leaf-radius) 0 var(--tt-leaf-radius);
}

.box-corner-topleft-bottomright {
    -webkit-border-radius: var(--tt-leaf-radius) 0 var(--tt-leaf-radius) 0;
    border-radius: var(--tt-leaf-radius) 0 var(--tt-leaf-radius) 0;
}

/* Homepage category cards: leaf silhouette, pointed at top-left/bottom-right. */
.category-item img {
    border-radius: 0 var(--tt-leaf-radius-card) 0 var(--tt-leaf-radius-card);
    box-shadow: 0 10px 25px rgba(18, 94, 88, 0.18);
}

/* "TIN MỚI" ticker: white on the teal panel (per design) */
/* Keep the homepage category cards in explicit rows. Without a clear, the
   legacy Bootstrap floats can fill a tiny height difference under another card. */
@media (min-width: 992px) {
    .categories .row > .col-md-4:nth-child(3n + 1) {
        clear: left;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .categories .row > .col-sm-6:nth-child(2n + 1) {
        clear: left;
    }
}

.news-hot .item a {
    color: #fff;
}

.news-hot span {
    color: #fff;
}

.btn-default,
.search .btn-default {
    background-color: var(--tt-teal);
    color: #fff;
}

.btn-default:hover,
.search .btn-default:hover {
    background-color: var(--tt-teal-dark);
    color: #fff;
}

a.view-more:hover {
    background-color: var(--tt-teal);
}

.news-index .box-title {
    border-bottom-color: var(--tt-mint);
}

/* Featured news ("TIN NỔI BẬT") title + column subheads: BDO Grotesk per design
   (was UTM Neo Sans Intel / MyriadPro-Cond) */
.news-index .box-title,
.news-category-title a {
    font-family: 'BDOGrotesk', sans-serif;
}

/* Homepage featured-news article titles: BDO Grotesk + teal per design
   (theme default was condensed MyriadPro-Cond in orange) */
.news-item .news-title a {
    font-family: 'BDOGrotesk', sans-serif;
    color: var(--tt-teal-dark);
}

.news-item .news-title a:hover {
    color: var(--tt-teal);
}

/* Brands ("THƯƠNG HIỆU") title: BDO Grotesk for heading consistency
   (was UTM Neo Sans Intel) */
.ads-index .box-title {
    font-family: 'BDOGrotesk', sans-serif;
}

/* The homepage charity card fills its panel edge to edge. The legacy 30px
 * inset left the glass background standing well proud of the artwork, which
 * read as an outer border around the image.
 *
 * The artwork ships with the leaf silhouette already baked in, and its two
 * cut corners are transparent PNG. So the panel must not paint anything of
 * its own behind it: the glass fill showed through those transparent corners,
 * and because the panel's radius is a fixed 50px while the artwork's curve
 * scales with its width, the two arcs disagreed and left a pale crescent
 * poking out at top-left and bottom-right — most visible on phones, where the
 * fixed 50px is largest relative to the image. Drop the fill, the blur and
 * the competing radius; the artwork is the only shape here. */
.page-template-templatehome-php .ads-index {
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

/* Slick pairs a 5px slide gutter with a -5px pull on the list so the first and
   last slide sit flush. Zeroing only the slide left that pull in place, and the
   track it sizes ran 10px wider than the panel -- the artwork hung 5px past
   each side and the panel's clip sliced straight through the widest part of
   both leaf curves, ending each arc on a flat vertical cut. Both halves of the
   gutter have to go together. */
.page-template-templatehome-php .ads-index .ads-slick .slick-list {
    margin: 0;
}

.page-template-templatehome-php .ads-index .ads-slick .slick-slide {
    margin: 0;
}

.page-template-templatehome-php .ads-index .ads-slick img {
    display: block;
    width: 100%;
    height: auto;
    /* The design draws this panel at 883x785 with a leaf corner of about
       165px -- 19% of the width, 21% of the height. The supplied artwork is a
       square 1:1 export, so the leaf stood up on end instead of leaning wide.
       Pinning the frame to the design ratio and letting the artwork cover it
       restores the stance; the 11% this trims off the height was measured
       against the export and clears the logo, the headline and the footer bar.

       The radius is an elliptical percentage rather than the shared 50px
       token because this panel is the only one whose width swings from a
       narrow desktop column to the full phone viewport: a fixed radius reads
       as roughly 15% of the column on desktop and far more on a phone, so the
       curve tightened and bulged instead of staying the same leaf. */
    aspect-ratio: 883 / 785;
    object-fit: cover;
    border-radius: 18% 0 18% 0 / 21% 0 21% 0;
}

/* Sidebar ad carousel: slick's vertical mode lays the track out from a single
   computed slide height, so every slide has to occupy the same box. These
   banners are lazy-loaded (LiteSpeed swaps src for an inline SVG placeholder),
   and some ACF rows carry no image at all, so slick measured zero-height
   placeholders at init and kept that stale geometry — which is why the last
   banner was sliced into the top of the first instead of looping cleanly.
   Pinning the slide to the artwork ratio keeps the maths valid whatever the
   load state, and object-fit avoids cropping a banner that differs. */
.ads-slick-vertical .slick-slide > a {
    display: block;
    width: 100%;
}

.ads-slick-vertical .slick-slide > a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 951 / 801;
    object-fit: contain;
}

.content .content-box-title {
    border-bottom-color: var(--tt-mint-light);
    color: var(--tt-heading-teal);
}

.content-item .content-title a {
    border-bottom-color: var(--tt-mint-light);
    color: var(--tt-heading-teal);
}

/* Recruitment content was authored with legacy inline Times New Roman/green
   styles. Keep the correction scoped to recruitment posts so editorial styles
   in news, product, and rice content remain untouched. */
.single-tuyen_dung .content-body,
.single-tuyen_dung .content-body p,
.single-tuyen_dung .content-body li,
.single-tuyen_dung .content-body h1,
.single-tuyen_dung .content-body h2,
.single-tuyen_dung .content-body h3,
.single-tuyen_dung .content-body h4,
.single-tuyen_dung .content-body h5,
.single-tuyen_dung .content-body h6,
.single-tuyen_dung .content-body span {
    color: #494949 !important;
    font-family: 'BDOGrotesk', sans-serif !important;
}

.single-tuyen_dung .content-body {
    font-size: 16px;
    line-height: 1.55;
}

.single-tuyen_dung .content-body p,
.single-tuyen_dung .content-body li,
.single-tuyen_dung .content-body span {
    font-size: inherit !important;
    line-height: inherit;
}

.single-tuyen_dung .content-body strong,
.single-tuyen_dung .content-body b {
    color: #494949 !important;
    font-family: 'BDOGrotesk', sans-serif !important;
    font-weight: 700;
}

.single-tuyen_dung .content-body [style*="#ff0000"],
.single-tuyen_dung .content-body [style*="#ff0000"] *,
.single-tuyen_dung .content-body [style*="#FF0000"],
.single-tuyen_dung .content-body [style*="#FF0000"] *,
.single-tuyen_dung .content-body [style*="#e82e2e"],
.single-tuyen_dung .content-body [style*="#e82e2e"] *,
.single-tuyen_dung .content-body [style*="#E82E2E"],
.single-tuyen_dung .content-body [style*="#E82E2E"] * {
    color: #e82e2e !important;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--tt-teal);
}

/* The mobile Giới thiệu accordion sits directly on the teal scene rather than
   the desktop book's pale pages, so its active state and copy need contrast. */
@media (max-width: 991px) {
    .about-page .main-links .panel-default .panel-heading h4.panel-title a {
        background: #3bb8aa;
        color: #fff;
    }

    .about-page .main-links .panel-default .panel-heading h4.panel-title a.collapsed {
        background: transparent;
        color: #fff;
    }

    /* The copy is dark grey, and on the teal scene that is close to unreadable.
       Give the opened panel a white sheet to sit on — same leaf corners as the
       rest of the design — so the dark text has the contrast it was written
       for. Scoped to .about-page: the sidebar menus elsewhere also use
       .main-links panels, and those are white-on-teal by design. */
    .about-page .main-links .panel-default > .panel-heading + .panel-collapse > .panel-body {
        background-color: #fff;
        border-radius: 0 var(--tt-leaf-radius-card) 0 var(--tt-leaf-radius-card);
        margin-bottom: 15px;
    }

    .about-page .main-links .content-body {
        color: #505050;
    }


    .about-page .main-links .content-body span[style*="00cc00"],
    .about-page .main-links .content-body span[style*="008000"],
    .about-page .main-links .content-body span[style*="339966"],
    .about-page .main-links .content-body span[style*="99cc00"] {
        color: #00cc00 !important;
    }
}

.title_ebook_des {
    border-bottom-color: var(--tt-teal);
    color: var(--tt-teal-dark);
}

.linkquayvegioithieu:hover {
    color: var(--tt-teal-dark);
}

/* ---------- Sidebar menus / panels ---------- */

.panel-default .panel-heading h4.panel-title a {
    background-color: var(--tt-teal);
    color: #fff;
}

.panel-default .panel-heading h4.panel-title a.collapsed {
    background: none;
    color: inherit;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li > a {
    color: var(--tt-teal-dark);
}

.panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li:hover:before,
.panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li.active:before {
    color: var(--tt-teal);
}

/* Inner-page left sidebar (product / news categories) sits on the teal page
   background. Per design: the ACTIVE item (open category header or the
   current leaf) is a light-teal pill with black text; every other item has no
   background and white text. Hover keeps white text with no gray box. All
   items use BDO Grotesk. Scoped to .main-links so the Giới thiệu book TOC and
   white-panel accordions are unaffected. */

/* Active / open category header -> light-teal pill, black text */
.main-links .panel-default .panel-heading h4.panel-title a {
    font-family: 'BDOGrotesk', sans-serif;
    background: var(--tt-mint-light);
    color: #1a1a1a;
}

/* Other (collapsed) category headers -> no background, white text */
.main-links .panel-default .panel-heading h4.panel-title a.collapsed {
    background: none;
    color: #fff;
}

/* Hovering a collapsed header raises the same leaf pill the open one shows, so
   the pointer keeps a visible target as it travels down the list — the same
   behaviour as the Giới thiệu sidebar. */
.main-links .panel-default .panel-heading h4.panel-title a.collapsed:hover,
.main-links .panel-default .panel-heading h4.panel-title a.collapsed:focus {
    background: var(--tt-mint-light);
    color: #1a1a1a;
}

/* Non-active leaf items -> no background, white text */
.main-links .panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li > a {
    font-family: 'BDOGrotesk', sans-serif;
    background-color: transparent;
    color: #fff;
}

/* Active child leaf: no pill — just white text plus the right-arrow marker
   below. Only the parent category header gets the light-teal pill. */
.main-links .panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li.active > a {
    background-color: transparent;
    color: #fff;
}

/* Hover on a non-active leaf: the same leaf pill, so the highlight follows the
   pointer through the sub-items too, not just the category headers. */
.main-links .panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li:not(.active):hover > a {
    background-color: var(--tt-mint-light);
    color: #1a1a1a;
}

/* Right-arrow marker on the selected child: white on the teal bg */
.main-links .panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li.active:before {
    color: #fff;
}

/* On hover the marker sits on the mint pill, so it takes the dark text colour */
.main-links .panel-default > .panel-heading + .panel-collapse > .panel-body ul.nav > li:not(.active):hover:before {
    color: #1a1a1a;
}

/* Same treatment for the nav_menu-based sidebars — Tin tức, Gạo hoa lúa and
   Tuyển dụng use ul.nav-left instead of the product accordion. Active item ->
   light-teal pill + black text; the rest white text with no background. */
.main-links ul.nav-left > li > a {
    font-family: 'BDOGrotesk', sans-serif;
    background-color: transparent;
    color: #fff;
}

.main-links ul.nav-left > li.active > a,
.main-links ul.nav-left > li.current-menu-item > a {
    background-color: var(--tt-mint-light);
    color: #1a1a1a;
}

/* Hovering any heading raises the same leaf pill the active item shows, so the
   whole list reads consistently rather than only the current page. */
.main-links ul.nav-left > li:not(.active):not(.current-menu-item):hover > a {
    background-color: var(--tt-mint-light);
    color: #1a1a1a;
}

ul.nav-left > li.active > a,
ul.nav-left li.current-menu-item a {
    background-color: var(--tt-teal);
    color: #fff;
}

/* Giới thiệu book table of contents (per design): teal items on the pale
   page, active item gets a mint pill */
.menu_danhmucjoithieu ul li a {
    /* Design has no divider under the six headings (legacy dashed rule). */
    border-bottom: 0;
    color: #fff;
    font-family: 'UTMNeoSansIntel', 'BDOGrotesk', sans-serif;
    font-weight: 700;
}

.menu_danhmucjoithieu ul li:hover a,
.menu_danhmucjoithieu ul li a.active {
    background: #3bb8aa;
    color: #fff;
    border-radius: 0 15px 0 15px;
}

/* "MỤC LỤC > heading" row on each book page */
.title_ebook_des {
    font-family: 'UTMNeoSansIntel', 'BDOGrotesk', sans-serif;
    font-weight: 700;
}

/* Vietnamese tone marks on capitals must not be clipped.
   BDO Grotesk declares hhea.ascent = 800/1000, but its accented capitals paint
   well past that (Ấ/Ầ reach yMax 1044, i.e. 20.9px at a 20px font versus the
   16.0px content-area top). The marks therefore render outside their own line
   box, and the book page's scroll container hides that overflow — so the first
   line lost its accents and read as unaccented text. A line-height of at least
   1.49 puts the half-leading above the glyph; 1.7 leaves headroom for the
   larger inline font sizes the editor applies. */
.noidungebook .content-2,
.noidungebook .content-2 p,
.noidungebook .content-2 div,
.noidungebook .content-2 span {
    line-height: 1.7;
}

/* Breathing room at the very top of the scrolled page for the same reason. */
.noidungebook .customScrollBox > .container {
    padding-top: 6px;
}

/* Book content: editor-pasted bright-green inline spans -> brand teal */
.noidungebook .content-2 span[style*="00cc00"],
.noidungebook .content-2 span[style*="008000"],
.noidungebook .content-2 span[style*="339966"],
.noidungebook .content-2 span[style*="99cc00"] {
    color: var(--tt-teal-dark) !important;
}

/* Book scrollbar: legacy green #11b255 -> teal */
.scrollbar-rail > .scroll-element .scroll-element_size,
.scrollbar-rail > .scroll-element .scroll-bar {
    background-color: var(--tt-teal);
}

.scrollbar-rail .dragger_container {
    border-left-color: var(--tt-teal);
}

.scrollbar-rail .dragger,
.scrollbar-rail .dragger_pressed {
    background: var(--tt-teal);
}

/* ---------- Footer ---------- */

.footer {
    color: var(--tt-teal-dark);
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Footer column titles: yellow pill image -> teal pill (per design) */
.footer-title {
    background-image: none;
    background-color: var(--tt-teal);
    background: linear-gradient(to right, var(--tt-teal-dark) 0%, var(--tt-teal) 100%);
    color: #fff;
    border-radius: 0 var(--tt-footer-corner-radius) 0 var(--tt-footer-corner-radius);
    padding-bottom: 0;
    margin-bottom: 10px;
    display: inline-block;
    min-width: 220px;
}

/* Remove the legacy dashed divider and the arrow bullet image. The heading row
   ("Quy trình sức mạnh sinh học" / "Biological Strength Process") carries no
   bullet per client direction; only its sub-items are bulleted. */
.nav-category > li {
    position: relative;
    background-image: none;
    border-bottom: 0;
    padding-left: 0;
}

.nav-category .sub-menu > li {
    list-style-type: disc;
}

.nav-category .sub-menu > li::marker {
    color: var(--tt-teal);
}

.lang a:hover {
    background-color: var(--tt-teal-dark);
}

/* Descendant selectors so nested sub-menu items (ul.sub-menu > li > a) are
   covered too — the visible product links live one level deeper than the top row */
.nav-category li a,
.nav-links li a {
    color: #1a1a1a;
}

/* Footer "Quy trình sức mạnh sinh học" header row: teal per design (sub-items stay dark) */
.nav-category > li:first-child > a {
    color: var(--tt-teal-mid);
    font-weight: 700;
}

/* LINKS tiles: legacy olive box + white tiles -> solid teal box with
   white-outlined tiles and white icons (per design) */
.footer-box {
    background-color: var(--tt-teal);
}

.footer-box a i {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.footer-box a:hover i {
    background-color: #fff;
    color: var(--tt-teal);
}

.copyright strong,
.copyright a {
    color: var(--tt-teal-dark);
}

/* Prevent the uninitialized mobile drawer from leaking below the copyright. */
#menu:not(.mm-menu) {
    display: none;
}

/* Contain legacy authored product markup without changing its content model. */
.single-san_pham .content-body {
    overflow-wrap: anywhere;
}

.single-san_pham .content-body::after {
    display: table;
    clear: both;
    content: '';
}

.single-san_pham .content-body img,
.single-san_pham .content-body table {
    max-width: 100%;
    height: auto;
}

/* ---------- Product detail: collapsible content sections ---------- */

/* Stacked clickable headers with the active panel below (per reference video) */
.product-sections {
    margin-top: 25px;
}

.product-section-header {
    padding: 10px 15px;
    background-color: var(--tt-mint-pale);
    border: 1px solid var(--tt-mint);
    border-bottom: none;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.product-sections-nav .product-section-header:last-child {
    border-bottom: 1px solid var(--tt-mint);
}

.product-section-header:hover {
    color: var(--tt-teal-dark);
}

.product-section-header.active {
    color: var(--tt-teal-dark);
    background-color: var(--tt-mint-light);
}

.product-section-header i {
    float: right;
    margin-top: 4px;
    transition: transform 0.2s;
}

.product-section-header.active i {
    transform: rotate(180deg);
}

.product-section-panel {
    display: none;
    padding: 15px;
    background-color: #fff;
    border: 1px solid var(--tt-mint);
    border-top: none;
}

.product-section-panel.active {
    display: block;
}

/* Authored tables inside panels can exceed the panel width on mobile */
.product-section-panel table {
    max-width: 100%;
}

.product-section-panel img {
    max-width: 100%;
    height: auto;
}