/* =========================================================
   MINH TRANG BRAND SYSTEM
   ========================================================= */

/* 1. Brand variables */
:root {
    --mt-green: #2f4f3e;
    --mt-green-dark: #20382c;
    --mt-green-light: #456b57;
    --mt-red: #dd0000;
    --mt-red-dark: #b90000;
    --mt-cream: #fff0c2;
    --mt-cream-light: #fff8df;
    --mt-text: #26332d;
    --mt-shadow: 0 10px 28px rgba(47, 79, 62, 0.12);
}

body {
    color: var(--mt-text);
}

a {
    transition: color .25s ease, border-color .25s ease;
}

a:hover,
a:focus-visible {
    color: var(--mt-red);
}

/* 2. Header */
.header-top {
    background: linear-gradient(135deg, var(--mt-green-dark) 0%, var(--mt-green) 55%, var(--mt-green-light) 100%);
}

.header-main .header-button .button,
.header-main .header-button-2 .button {
    background: linear-gradient(135deg, var(--mt-red-dark) 0%, var(--mt-red) 60%, #ef2a2a 100%);
    border-color: transparent;
    color: #fff;
}

/* 3. Navigation */
.header-bottom {
    background: var(--mt-green-dark) !important;
}

.header-bottom .nav > li > a {
    position: relative;
    color: #fff;
    transition: color .25s ease;
}

.header-bottom .nav > li > a::after {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    height: 2px;
    background: rgba(181, 69, 58, .72) !important;
    content: "";
    opacity: 0;
    transform: scaleX(.65);
    transition: opacity .25s ease, transform .25s ease;
}

.header-bottom .nav > li.active > a,
.header-bottom .nav > li > a:hover,
.header-bottom .nav > li > a:focus-visible {
    background: #2b5947 !important;
    color: #fff !important;
}

.header-bottom .nav-dropdown > li > a:hover,
.header-bottom .nav-dropdown > li > a:focus-visible {
    background: #edf3ef;
    color: var(--mt-green-dark);
}

.header-bottom .nav > li.active > a::after,
.header-bottom .nav > li > a:hover::after,
.header-bottom .nav > li > a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

/* 4. Buttons */
.button,
button,
input[type="submit"] {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, filter .25s ease;
}

.button.primary,
button.primary,
input[type="submit"],
.single_add_to_cart_button,
.checkout-button {
    background: linear-gradient(135deg, var(--mt-red-dark) 0%, var(--mt-red) 60%, #ef2a2a 100%);
    border-color: transparent;
    color: #fff;
}

.button.primary:hover,
.button.primary:focus-visible,
button.primary:hover,
button.primary:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus-visible,
.checkout-button:hover,
.checkout-button:focus-visible {
    box-shadow: 0 8px 20px rgba(221, 0, 0, .22);
    filter: brightness(1.04);
    transform: translateY(-2px);
}

.button.secondary,
button.secondary {
    background: linear-gradient(135deg, var(--mt-green-dark) 0%, var(--mt-green) 100%);
    border-color: transparent;
    color: #fff;
}

.button.secondary:hover,
.button.secondary:focus-visible,
button.secondary:hover,
button.secondary:focus-visible {
    background: var(--mt-cream);
    border-color: var(--mt-green);
    color: var(--mt-green);
    transform: translateY(-2px);
}

/* 5. Section headings */
.section-title-main,
.section-title b,
.ux-menu-title,
.entry-header .entry-title,
.cat_title h2,
.document-archive .inner_document_top h2,
.product-title a,
.entry-title a {
    color: var(--mt-green);
}

.section-title-container .section-title b {
    background: linear-gradient(90deg, var(--mt-red), var(--mt-cream));
}

.dark .section-title-main,
.dark .section-title b,
.dark .ux-menu-title,
.dark .entry-title {
    color: var(--mt-cream);
}

/* 6. Cards & image hover */
.product-small .box,
.post-item .box,
.box.has-hover {
    transition: transform .3s ease, box-shadow .3s ease;
}

.product-small .box:hover,
.post-item .box:hover,
.box.has-hover:hover {
    box-shadow: var(--mt-shadow);
    transform: translateY(-3px);
}

.product-small .box-image img,
.post-item .box-image img,
.image-cover img {
    transition: transform .3s ease;
}

.product-small .box:hover .box-image img,
.post-item .box:hover .box-image img,
.image-cover:hover img {
    transform: scale(1.02);
}

/* 7. Footer */
#footer {
    background-color: var(--mt-green-dark);
}

#footer .ux-shape-fill {
    fill: var(--mt-green);
}

#footer a:hover,
#footer a:focus-visible {
    color: var(--mt-cream);
}

.absolute-footer {
    background: linear-gradient(135deg, #17281f 0%, var(--mt-green) 100%);
    color: #fff;
}

/* 8. Legacy controls and isolated visual overrides */
ul.header-nav.nav-right li.header-search-form form.searchform button,
.post-item .box-text a.button,
.add-to-cart-button a.button,
.product-info .hide-for-off-canvas a.button,
.widget_product_search .searchform button {
    background: linear-gradient(135deg, var(--mt-green-dark) 0%, var(--mt-green) 100%);
    border-color: transparent;
    color: #fff;
}

.post-item .box-text a.button:hover,
.add-to-cart-button a.button:hover,
.product-info .hide-for-off-canvas a.button:hover,
.widget_product_search .searchform button:hover {
    background: var(--mt-cream);
    border-color: var(--mt-green);
    color: var(--mt-green);
}

.phongvt-contact .chat-zalo,
.phongvt-contact .hotline {
    background: linear-gradient(135deg, var(--mt-red-dark) 0%, var(--mt-red) 100%);
}

.phongvt-contact .chat-face {
    background: linear-gradient(135deg, var(--mt-green-dark) 0%, var(--mt-green) 100%);
}

.home .content-area > .section:first-child .slider .img-inner img {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

/* Keep every WooCommerce product card consistent. Flatsome's box-none
   preset otherwise hides its title, price and detail action. */
.product-small.box-none .box-text {
    display: block !important;
}

.product-small .add-to-cart-button,
.product-small .add-to-cart-button a.button {
    display: block;
    width: 100%;
    visibility: visible;
    opacity: 1;
}

/* 9. Responsive and accessibility */
@media (max-width: 849px) {
    .mobile-sidebar .nav > li > a:hover,
    .mobile-sidebar .nav > li > a:focus-visible {
        color: var(--mt-red);
    }

    .button {
        max-width: 100%;
    }

    #phongvt-contact-footer {
        align-items: flex-end;
    }

    #phongvt-contact-footer > a,
    #phongvt-contact-footer > a:nth-of-type(4) {
        display: block;
        flex: 0 0 20%;
        width: 20%;
        min-width: 0;
    }
}

.phongvt-contact a:focus-visible,
#phongvt-contact-footer a:focus-visible {
    outline: 2px solid var(--mt-cream);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .box,
    .box-image img,
    .header-bottom .nav > li > a,
    .header-bottom .nav > li > a::after {
        transition-duration: .01ms;
    }
}