/*
 * PitaLand site-wide brand system
 *
 * Brand colors sampled from the current PitaLand logo:
 * - Green: #30a050
 * - Red:   #e04030
 *
 * Color rhythm: green is the dominant action color; red is a restrained
 * structural accent. White and pale green keep content easy to scan.
 */

:root {
    --pita-brand-green: #30a050;
    --pita-brand-green-action: #247f40;
    --pita-brand-green-dark: #1d6635;
    --pita-brand-green-deep: #174f2d;
    --pita-brand-green-soft: #edf8f1;
    --pita-brand-red: #e04030;
    --pita-brand-red-action: #b93227;
    --pita-brand-red-dark: #b93227;
    --pita-brand-red-soft: #fff1ef;
    --pita-brand-ink: #26352c;
    --pita-brand-text: #3d4b42;
    --pita-brand-muted: #6c7971;
    --pita-brand-line: #dfe9e2;
    --pita-brand-page: #f7faf8;
    --pita-brand-white: #fff;

    /* Normalize legacy variables used throughout the child theme. */
    --color-xanhla: var(--pita-brand-green);
    --color-do: var(--pita-brand-red);
    --color-dodam: var(--pita-brand-red-dark);
    --color-btn: var(--pita-brand-green-action);
    --color-xanhnhat: var(--pita-brand-green);
    --color-accent: var(--pita-brand-red-action);
    --color-bg-soft: var(--pita-brand-page);
    --color-text-main: var(--pita-brand-ink);
    --color-border-soft: var(--pita-brand-line);

    --pita-wine: var(--pita-brand-green);
    --pita-wine-dark: var(--pita-brand-green-deep);
    --pita-wine-soft: var(--pita-brand-green-action);
    --pita-wine-glow: var(--pita-brand-red-action);
    --pita-logo-red: var(--pita-brand-red);
    --pita-logo-green: var(--pita-brand-green);
    --pita-forest: var(--pita-brand-green-deep);
    --pita-evergreen: var(--pita-brand-green-action);
    --pita-sage: var(--pita-brand-muted);
    --pita-cloud: var(--pita-brand-white);
    --pita-ivory: var(--pita-brand-page);
    --pita-champagne: var(--pita-brand-red-action);
    --pita-champagne-soft: var(--pita-brand-red-soft);
    --pita-ink: var(--pita-brand-ink);
    --pita-muted: var(--pita-brand-muted);
    --pita-line: var(--pita-brand-line);

    /* Re-theme the previously introduced bright UX layer. */
    --pita-ux-green: var(--pita-brand-green);
    --pita-ux-green-action: var(--pita-brand-green-action);
    --pita-ux-green-deep: var(--pita-brand-green-deep);
    --pita-ux-green-soft: var(--pita-brand-green-soft);
    --pita-ux-gold: var(--pita-brand-red);
    --pita-ux-gold-soft: var(--pita-brand-red-soft);
    --pita-ux-navy: var(--pita-brand-ink);
    --pita-ux-text: var(--pita-brand-text);
    --pita-ux-muted: var(--pita-brand-muted);
    --pita-ux-page: var(--pita-brand-page);
    --pita-ux-surface: var(--pita-brand-white);
    --pita-ux-border: var(--pita-brand-line);

    --primary-color: var(--pita-brand-green);
    --fs-color-primary: var(--pita-brand-green);
    --fs-color-success: var(--pita-brand-green);
    --fs-color-alert: var(--pita-brand-red);
    --fs-experimental-link-color: var(--pita-brand-green-dark);
    --fs-experimental-link-color-hover: var(--pita-brand-red-dark);
}

/* Semantic page heading for UX Builder pages whose hero is image-only. */
.pita-seo-page-header {
    max-width: 920px;
    margin: 0 auto;
    padding: 34px 20px 22px;
    text-align: center;
}

.pita-seo-page-title {
    margin: 0;
    color: var(--pita-brand-ink) !important;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.2;
}

.pita-seo-page-summary {
    max-width: 720px;
    margin: 12px auto 0;
    color: var(--pita-brand-muted);
    font-size: 16px;
    line-height: 1.65;
}

html {
    background: var(--pita-brand-green-deep);
}

body {
    background: var(--pita-brand-white) !important;
    color: var(--pita-brand-text) !important;
}



body p,
body li,
body td,
body label {
    color: inherit;
}

body a {
    color: var(--pita-brand-green-dark);
}

body a:hover {
    color: var(--pita-brand-red-dark);
}

::selection {
    background: var(--pita-brand-green);
    color: #fff;
}

/* Header and navigation ---------------------------------------------------- */

#header .header-wrapper,
#header .header-main,
#header .header-bg-color,
#header.transparent .header-wrapper {
    background: rgba(255, 255, 255, .97) !important;
}

#header .header-wrapper {
    border-bottom: 1px solid var(--pita-brand-line);
    box-shadow: 0 5px 18px rgba(25, 77, 44, .07);
}

#header .header-main::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--pita-brand-green) 0 78%,
        var(--pita-brand-red) 78% 100%
    );
}

#header .header-main {
    position: relative;
}

#header .header-main .nav > li > a,
#header.transparent .header-main .nav > li > a,
#header .header-main .header-button a,
#header .header-search a {
    color: var(--pita-brand-ink) !important;
    text-shadow: none !important;
}

#header .header-main .nav > li > a {
    position: relative;
}

#header .header-main .nav > li > a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: -8px;
    left: 50%;
    height: 2px;
    background: var(--pita-brand-red);
    transition: right .2s ease, left .2s ease;
}

#header .header-main .nav > li:hover > a,
#header .header-main .nav > li.active > a,
#header .header-main .nav > li.current-menu-item > a,
#header .header-main .nav > li.current-menu-ancestor > a {
    color: var(--pita-brand-green-dark) !important;
}

#header .header-main .nav > li:hover > a::after,
#header .header-main .nav > li.active > a::after,
#header .header-main .nav > li.current-menu-item > a::after,
#header .header-main .nav > li.current-menu-ancestor > a::after {
    right: 15%;
    left: 15%;
}

#header .nav-dropdown {
    overflow: hidden;
    border: 1px solid var(--pita-brand-line);
    border-top: 3px solid var(--pita-brand-green);
    border-radius: 0 0 10px 10px;
    background: #fff !important;
    background-image: none !important;
    box-shadow: 0 14px 34px rgba(20, 68, 38, .13);
}

#header .nav-dropdown li,
#header .nav-dropdown .nav-dropdown-col > ul {
    background: #fff !important;
    background-image: none !important;
}

#header .nav-dropdown .nav-dropdown-col > ul {
    overflow: hidden;
    border: 1px solid var(--pita-brand-line);
    border-top: 3px solid var(--pita-brand-green);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(20, 68, 38, .13);
}

#header .nav-dropdown li > a,
#header .nav-dropdown .nav-dropdown-col > ul li > a {
    border-bottom: 1px solid #edf2ee;
    background: #fff !important;
    color: var(--pita-brand-text) !important;
    font-weight: 550;
}

#header .nav-dropdown li:hover,
#header .nav-dropdown .nav-dropdown-col > ul li:hover {
    background: var(--pita-brand-green-soft) !important;
}

#header .nav-dropdown li:hover > a,
#header .nav-dropdown li > a:hover,
#header .nav-dropdown .nav-dropdown-col > ul li:hover > a {
    border-left: 3px solid var(--pita-brand-green);
    background: var(--pita-brand-green-soft) !important;
    color: var(--pita-brand-green-dark) !important;
}

#header .nav-dropdown li.current-menu-item > a,
#header .nav-dropdown li.current-menu-ancestor > a {
    border-left: 3px solid var(--pita-brand-green-dark);
    background: #e3f3e8 !important;
    color: var(--pita-brand-green-deep) !important;
    font-weight: 700;
}

.off-canvas .sidebar-menu,
.mfp-content .mobile-sidebar {
    background: #fff;
}

.off-canvas .nav-sidebar > li > a {
    color: var(--pita-brand-ink) !important;
}

.off-canvas .nav-sidebar > li.current-menu-item > a,
.off-canvas .nav-sidebar > li > a:hover {
    border-left-color: var(--pita-brand-red);
    background: var(--pita-brand-green-soft);
    color: var(--pita-brand-green-dark) !important;
}

/* Headings, dividers and page chrome -------------------------------------- */

.section-title-container .section-title,
.page-title .page-title-inner,
.shop-page-title {
    color: var(--pita-brand-ink);
}

.section-title b,
.section-title-bold-center span,
.section-title-bold span {
    background: var(--pita-brand-red) !important;
}

.section-title-main,
.title-first-pitaland,
.title-second-pitaland,
.title-3muc,
.title-tin-moinhat,
.title-duan-moi,
.title-thuvien {
    color: var(--pita-brand-ink) !important;
}

.page-title,
.page-header-wrapper {
    background:
        linear-gradient(110deg, rgba(48, 160, 80, .10), rgba(224, 64, 48, .035)),
        #fff !important;
}

.breadcrumbs,
.breadcrumbs a {
    color: var(--pita-brand-muted);
}

.breadcrumbs a:hover {
    color: var(--pita-brand-red-dark);
}

/* Buttons and calls to action --------------------------------------------- */

.button.primary,
button.primary,
input[type="submit"],
input[type="button"],
.ux-search-submit,
.wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    border-color: var(--pita-brand-green-action) !important;
    background: var(--pita-brand-green-action) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(39, 138, 69, .17);
}

.button.primary:hover,
.button.primary:focus-visible,
button.primary:hover,
button.primary:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
.ux-search-submit:hover,
.ux-search-submit:focus-visible,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    border-color: var(--pita-brand-green-deep) !important;
    background: var(--pita-brand-green-deep) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(23, 79, 45, .22);
}

.button.secondary,
.button.is-outline,
.button.white.is-outline {
    border-color: var(--pita-brand-green) !important;
    background: #fff !important;
    color: var(--pita-brand-green-dark) !important;
}

.button.secondary:hover,
.button.secondary:focus-visible,
.button.is-outline:hover,
.button.is-outline:focus-visible,
.button.white.is-outline:hover,
.button.white.is-outline:focus-visible {
    border-color: var(--pita-brand-red-action) !important;
    background: var(--pita-brand-red-action) !important;
    color: #fff !important;
}

.button.alert,
.badge-inner,
.onsale {
    border-color: var(--pita-brand-red-action) !important;
    background: var(--pita-brand-red-action) !important;
    color: #fff !important;
}

/* Contact Form 7 field-level validation ---------------------------------- */

.wpcf7 .wpcf7-form-control-wrap .wpcf7-not-valid-tip,
.dark .wpcf7 .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    margin: 6px 0 10px !important;
    padding: 8px 10px !important;
    border: 1px solid #f3a6ad !important;
    border-left: 4px solid #b91c1c !important;
    border-radius: 6px !important;
    background: #fff1f2 !important;
    color: #7f1d1d !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Cards, lists and interactive content ----------------------------------- */

.box-blog-post,
.product-small .box,
.portfolio-box,
.message-box,
.accordion-item {
    border-color: var(--pita-brand-line);
}

.box-blog-post,
.product-small .box,
.portfolio-box {
    background: #fff;
}

.post-item .col-inner,
.product-small .col-inner,
.portfolio-box {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.post-item .col-inner:hover,
.post-item .col-inner:focus-within,
.product-small .col-inner:hover,
.product-small .col-inner:focus-within {
    border-color: rgba(48, 160, 80, .45) !important;
}

.post-title a,
.product-title a,
.portfolio-box-title {
    color: var(--pita-brand-ink) !important;
}

.post-title a:hover,
.product-title a:hover,
.portfolio-box-title:hover {
    color: var(--pita-brand-green-dark) !important;
}

.pita-duan-card__badge {
    background: var(--pita-brand-green-action) !important;
    color: #fff !important;
}

.pita-duan-card__badge--alt {
    background: var(--pita-brand-red-action) !important;
}

.pita-duan-card__price {
    color: #dff7e7 !important;
}

.st_tin-moinhat .blog-tintuc-2 .post-item .badge-inner {
    background: var(--pita-brand-green-action) !important;
    box-shadow: 0 5px 14px rgba(36, 127, 64, .19);
}

.st_tin-moinhat .blog-tintuc-2 .post-item .col-inner:hover .badge-inner,
.st_tin-moinhat .blog-tintuc-2 .post-item .col-inner:focus-within .badge-inner {
    background: var(--pita-brand-green-deep) !important;
}

/* Homepage internal news: light hover keeps every text layer readable. */
.st_tin-noibo .col-post .post-item .col-inner::before {
    display: none !important;
}

.st_tin-noibo .col-post .post-item .box-blog-post {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

.st_tin-noibo .col-post .post-item .post-title,
.st_tin-noibo .col-post .post-item .post-title a {
    color: var(--pita-brand-ink) !important;
}

.st_tin-noibo .col-post .post-item .from_the_blog_excerpt {
    color: var(--pita-brand-muted) !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover,
.st_tin-noibo .col-post .post-item .col-inner:focus-within {
    border-color: rgba(48, 160, 80, .48) !important;
    background: #f4fbf6 !important;
    box-shadow: 0 14px 30px rgba(25, 91, 50, .13);
}

.st_tin-noibo .col-post .post-item .col-inner:hover .post-title,
.st_tin-noibo .col-post .post-item .col-inner:hover .post-title a,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .post-title,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .post-title a {
    color: var(--pita-brand-green-deep) !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover .from_the_blog_excerpt,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .from_the_blog_excerpt,
.st_tin-noibo .col-post .post-item .col-inner:hover .from_the_blog_excerpt a,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .from_the_blog_excerpt a {
    color: #4b5d52 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover a.button.is-underline,
.st_tin-noibo .col-post .post-item .col-inner:focus-within a.button.is-underline {
    color: var(--pita-brand-green-dark) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover a.button.is-underline,
.st_tin-noibo .col-post .post-item .col-inner:focus-within a.button.is-underline {
    display: inline-flex;
    border-color: var(--pita-brand-green) !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover .badge-inner,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .badge-inner {
    background: var(--pita-brand-green-action) !important;
}

.st_tin-noibo .col-post .post-item .col-inner:hover .post-date-day,
.st_tin-noibo .col-post .post-item .col-inner:hover .post-date-month,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .post-date-day,
.st_tin-noibo .col-post .post-item .col-inner:focus-within .post-date-month {
    color: #fff !important;
}

/* Brand stripe: repeat the header signature above internal-news cards. */
.st_tin-noibo .col-post .row.blog-hu {
    position: relative;
    padding-top: 5px;
}

.st_tin-noibo .col-post .row.blog-hu::before,
#footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
    height: 5px;
    background: linear-gradient(
        90deg,
        var(--pita-brand-green) 0 78%,
        var(--pita-brand-red) 78% 100%
    );
    pointer-events: none;
}

.st_tin-noibo .col-post .post-item .col-inner {
    border-top: 0 !important;
}

.st_video .overlay-icon {
    background: var(--pita-brand-red-action);
    box-shadow: 0 7px 20px rgba(224, 64, 48, .24);
}

.st_video .col-inner.text-center:hover .overlay-icon,
.st_video .col-inner.text-center:focus-within .overlay-icon {
    background: var(--pita-brand-green-action);
}

/* Forms, search and tables ------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
    border-color: #ccdcd1 !important;
    border-radius: 8px;
    background: #fff !important;
    color: var(--pita-brand-ink) !important;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--pita-brand-green) !important;
    box-shadow: 0 0 0 3px rgba(48, 160, 80, .13) !important;
}

table thead,
table th {
    border-color: var(--pita-brand-green-dark);
    background: var(--pita-brand-green-dark);
    color: #fff;
}

table td {
    border-color: var(--pita-brand-line);
}

table tbody tr:nth-child(even) {
    background: var(--pita-brand-page);
}

blockquote {
    border-left-color: var(--pita-brand-red);
    background: var(--pita-brand-red-soft);
    color: var(--pita-brand-text);
}

/* Pagination, tabs and utility controls ---------------------------------- */

.nav-pagination > li > .page-number,
.pita-duan-pagination .page-numbers a,
.pita-duan-pagination .page-numbers span {
    border-color: var(--pita-brand-line) !important;
    background: #fff !important;
    color: var(--pita-brand-green-dark) !important;
}

.nav-pagination > li > .page-number:hover,
.nav-pagination > li > .page-number.current,
.pita-duan-pagination .page-numbers a:hover,
.pita-duan-pagination .page-numbers .current {
    border-color: var(--pita-brand-green-action) !important;
    background: var(--pita-brand-green-action) !important;
    color: #fff !important;
}

.tabbed-content .nav-tabs > li > a,
.accordion-title {
    color: var(--pita-brand-ink);
}

.tabbed-content .nav-tabs > li.active > a,
.tabbed-content .nav-tabs > li > a:hover,
.accordion-title.active,
.accordion-title:hover {
    border-color: var(--pita-brand-red);
    color: var(--pita-brand-green-dark);
}

.flickity-page-dots .dot {
    border-color: var(--pita-brand-green);
}

.flickity-page-dots .dot.is-selected {
    background: var(--pita-brand-green);
}

.slider-nav-light .flickity-prev-next-button,
.slider-nav-dark .flickity-prev-next-button {
    border-color: rgba(255, 255, 255, .82);
    background: var(--pita-brand-green-action);
    color: #fff;
}

#top-link,
.back-to-top {
    border-color: var(--pita-brand-green) !important;
    background-color: #fff !important;
    color: var(--pita-brand-green-dark) !important;
}

#top-link:hover,
.back-to-top:hover {
    border-color: var(--pita-brand-red) !important;
    background-color: var(--pita-brand-red) !important;
    color: #fff !important;
}

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

#footer,
.footer-wrapper,
.st_footer,
.absolute-footer {
    background-color: var(--pita-brand-green-deep) !important;
    background-image:
        radial-gradient(circle at 88% 15%, rgba(224, 64, 48, .20), transparent 22rem),
        linear-gradient(135deg, #174f2d 0%, #246f3c 100%) !important;
    color: rgba(255, 255, 255, .88) !important;
}

#footer {
    position: relative;
    border-top: 0;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer .widget-title,
#footer strong {
    color: #fff !important;
}

#footer p,
#footer li,
#footer td,
#footer address {
    color: rgba(255, 255, 255, .84) !important;
}

#footer a {
    color: rgba(255, 255, 255, .90) !important;
}

#footer a:hover,
#footer a:focus-visible {
    color: #fff !important;
    text-decoration-color: var(--pita-brand-red);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

#footer input[type="submit"],
#footer .button.primary {
    border-color: var(--pita-brand-red-action) !important;
    background: var(--pita-brand-red-action) !important;
}

#footer input[type="submit"]:hover,
#footer .button.primary:hover {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--pita-brand-green-deep) !important;
}

/* Accessibility and responsive behavior --------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(48, 160, 80, .32);
    outline-offset: 3px;
}

@media (max-width: 849px) {
    #header .header-main::after {
        background: linear-gradient(
            90deg,
            var(--pita-brand-green) 0 72%,
            var(--pita-brand-red) 72% 100%
        );
    }

    #header .header-main .nav > li > a::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* Project area navigation ------------------------------------------------ */

.pita-duan-archive .du-an-khu-vuc-buttons .button[aria-current="page"] {
    border-color: var(--pita-brand-green) !important;
    background: var(--pita-brand-green) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(32, 122, 61, .18) !important;
}

.pita-duan-archive .du-an-khu-vuc-buttons .button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(32, 122, 61, .10);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.pita-duan-archive .du-an-khu-vuc-buttons .button:hover span,
.pita-duan-archive .du-an-khu-vuc-buttons .button:focus-visible span,
.pita-duan-archive .du-an-khu-vuc-buttons .button[aria-current="page"] span {
    background: rgba(255, 255, 255, .18);
}

.du-an-khu-vuc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 26px 0 34px;
}

.du-an-khu-vuc-card {
    position: relative;
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 25px;
    border: 1px solid #d9eadf;
    border-top: 4px solid var(--pita-brand-green);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(32, 122, 61, .11), transparent 10rem),
        #fff;
    color: var(--pita-brand-ink) !important;
    box-shadow: 0 10px 28px rgba(26, 78, 43, .09);
    text-decoration: none !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.du-an-khu-vuc-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 62px;
    height: 5px;
    background: var(--pita-brand-red);
    content: "";
}

.du-an-khu-vuc-card__eyebrow {
    margin-bottom: 9px;
    color: var(--pita-brand-green) !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.du-an-khu-vuc-card__name {
    color: var(--pita-brand-ink) !important;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 750;
    line-height: 1.25;
}

.du-an-khu-vuc-card__description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    color: var(--pita-brand-muted) !important;
    font-size: 14px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.du-an-khu-vuc-card__count {
    margin-top: auto;
    padding-top: 17px;
    color: var(--pita-brand-green-deep) !important;
    font-size: 14px;
    font-weight: 700;
}

.du-an-khu-vuc-card:hover,
.du-an-khu-vuc-card:focus-visible {
    border-color: rgba(32, 122, 61, .48);
    color: var(--pita-brand-ink) !important;
    box-shadow: 0 17px 34px rgba(26, 78, 43, .15);
    transform: translateY(-4px);
}

@media (max-width: 849px) {
    .du-an-khu-vuc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 549px) {
    .du-an-khu-vuc-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .du-an-khu-vuc-card {
        min-height: 165px;
        padding: 21px;
    }
}

/* Disable UX Builder scroll reveal animations site-wide.
 * Keep lazy loading, sliders, parallax and hover interactions unchanged. */
body [data-animate],
body [data-animated] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
    will-change: auto !important;
}

/* Single news post hero ---------------------------------------------------
 * Keep the featured-image hero intact. Only the byline is transparent so it
 * reads as part of the image instead of a white card layered over it.
 */
body.single-post .blog-featured-title .page-title-inner,
body.single-post .blog-featured-title .entry-title {
    color: #fff !important;
}

body.single-post .blog-featured-title .entry-title {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
}

body.single-post .blog-featured-title .entry-category,
body.single-post .blog-featured-title .entry-category a,
body.single-post .blog-featured-title .entry-category a:visited,
body.single-post .blog-featured-title .entry-category a:hover,
body.single-post .blog-featured-title .entry-category a:focus-visible {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .72);
}

body.single-post .blog-featured-title .title-overlay {
    background:
        linear-gradient(90deg, rgba(10, 36, 25, .62), rgba(12, 34, 55, .48)),
        rgba(0, 0, 0, .18) !important;
}

body.single-post .blog-featured-title .pita-article-byline {
    margin-top: 18px;
    padding: 10px 4px;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

body.single-post .blog-featured-title .pita-byline-name,
body.single-post .blog-featured-title .pita-byline-name:hover,
body.single-post .blog-featured-title .pita-byline-name:focus-visible,
body.single-post .blog-featured-title .pita-byline-separator,
body.single-post .blog-featured-title .pita-bookmark-button,
body.single-post .blog-featured-title .pita-bookmark-button:hover,
body.single-post .blog-featured-title .pita-byline-updated,
body.single-post .blog-featured-title .pita-byline-updated time {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .68);
}

body.single-post .blog-featured-title .pita-byline-separator,
body.single-post .blog-featured-title .pita-byline-updated {
    opacity: .88;
}

@media (max-width: 549px) {
    body.single-post .blog-featured-title .entry-title {
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.22;
    }

    body.single-post .blog-featured-title .pita-article-byline {
        padding-right: 0;
        padding-left: 0;
    }
}