/* ==========================================================================
   VOI MA MUT GEARS - Skin sang / toi gian (minimalist)
   Nap SAU style.tactical.min.css. Chi chua phan override giao dien,
   khong dung toi file theme goc.

   Trong so mau: nen sang/trang, chu gan den, ranger green lam diem nhan,
   coyote tan dung rat han che. It mau - sach - de nhin.
   ========================================================================== */

:root {
    --vmm-bg: #ffffff;        /* nen chinh */
    --vmm-bg-2: #f6f6f4;      /* nen dai/section nhat, footer */
    --vmm-line: #e7e7e4;      /* vien nhat */
    --vmm-ink: #232521;       /* chu chinh */
    --vmm-muted: #78786f;     /* chu phu */
    --vmm-green: #5c6b3c;     /* ranger green - nhan chinh */
    --vmm-green-lt: #7a8c52;  /* green sang - hover */
    --vmm-green-dk: #45512d;  /* green dam */
    --vmm-tan: #b0824e;       /* coyote tan dam hon cho du tuong phan tren nen trang */
}

/* Duong nhan xanh mong o dinh trang - diem nhan thuong hieu duy nhat */
.header {
    border-top: 3px solid var(--vmm-green);
}

/* --------------------------------------------------------------------------
   Header - nen trang, chu den, icon xanh
   -------------------------------------------------------------------------- */
.header .header-middle {
    background: var(--vmm-bg);
    border-bottom: 1px solid var(--vmm-line);
}

.header .header-middle .logo img {
    width: auto;
    height: 44px;
    object-fit: contain;
}

.header .header-search .input-wrapper {
    border: 1px solid var(--vmm-line);
    border-radius: 4px;
    background: #fafafa;
}

.header .header-search .form-control {
    background: transparent;
    border: 0;
    color: var(--vmm-ink);
}

.header .header-search .form-control::placeholder {
    color: #9a9a92;
}

.header .header-search .btn-search {
    color: var(--vmm-green);
}

.header .header-search .btn-search:hover {
    color: var(--vmm-green-lt);
}

.header .icon-box-title,
.header .icon-box-content p,
.header .icon-box-content a,
.header .cart-dropdown .cart-name,
.header .cart-toggle,
.header .mobile-menu-toggle {
    color: var(--vmm-ink);
}

.header .icon-box-icon i,
.header .cart-toggle i {
    color: var(--vmm-green);
}

.header .icon-box:hover .icon-box-content a,
.header .cart-dropdown:hover .cart-toggle {
    color: var(--vmm-green);
}

.header .divider {
    background: var(--vmm-line);
}

/* --------------------------------------------------------------------------
   Thanh menu - nen trang, chu in hoa gan den, gach chan xanh khi hover
   -------------------------------------------------------------------------- */
.header .header-bottom {
    background: var(--vmm-bg);
    border-bottom: 1px solid var(--vmm-line);
}

.header .header-bottom .menu > li > a {
    color: var(--vmm-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    position: relative;
}

.header .header-bottom .menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--vmm-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.header .header-bottom .menu > li:hover > a,
.header .header-bottom .menu > li.active > a {
    color: var(--vmm-green);
}

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

/* Megamenu / dropdown: tieu de cot dung mau nhan */
.header .megamenu .menu-title a,
.header .menu ul .menu-title a {
    color: var(--vmm-green);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Dai tieu de danh muc trang chu - toi gian: chi con tick xanh + gach duoi
   -------------------------------------------------------------------------- */
.titlehomepage {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--vmm-line);
    border-radius: 0;
    padding-bottom: 4px;
}

.titlehomepage .category:first-child {
    background: transparent;
}

.titlehomepage .category:first-child a {
    color: var(--vmm-ink);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-left: 3px solid var(--vmm-green);
    padding-left: 10px;
}

.titlehomepage .category:first-child a:hover {
    color: var(--vmm-green);
}

.titlehomepage .category a {
    color: var(--vmm-muted);
}

.titlehomepage h3 a:hover,
.titlehomepage a:hover {
    color: var(--vmm-green);
}

.titlehomepage > a.viewAll {
    color: var(--vmm-green);
}

.titlehomepage > a.viewAll:before {
    border-left-color: var(--vmm-green);
}

.titlehomepage > a.viewAll:hover {
    color: var(--vmm-green-dk);
}

.titlehomepage > a.viewAll:hover:before {
    border-left-color: var(--vmm-green-dk);
}

/* --------------------------------------------------------------------------
   Banner
   Theme cu ep .banner-image cao co dinh 450px -> letterbox chua trang.
   De anh tu quyet chieu cao.
   -------------------------------------------------------------------------- */
.section-banner .banner-image {
    height: auto;
    background: var(--vmm-bg-2);
}

.section-banner .banner-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Card san pham - trang sach, vien mong, gia xanh
   -------------------------------------------------------------------------- */
.product-home .product {
    border: 1px solid var(--vmm-line);
    border-radius: 4px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.product-home .product:hover {
    border-color: var(--vmm-green);
    box-shadow: 0 .4rem 1.2rem rgba(35, 37, 33, .1);
    transform: translateY(-2px);
}

.product-home .product-name a {
    color: var(--vmm-ink);
    font-weight: 500;
}

.product-home .product:hover .product-name a {
    color: var(--vmm-green);
}

.product-price .new-price,
.product-price .price,
.product-single .product-price {
    color: var(--vmm-green);
    font-weight: 700;
}

.product-price .old-price {
    color: #a5a59c;
}

.product-label.label-new {
    background: var(--vmm-green);
}

.product-label.label-sale {
    background: var(--vmm-tan);
}

/* --------------------------------------------------------------------------
   Nut bam - xanh phang, khong in hoa cho mem mai
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary.btn-solid {
    background-color: var(--vmm-green);
    border-color: var(--vmm-green);
    letter-spacing: .01em;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.btn-solid:hover {
    background-color: var(--vmm-green-lt);
    border-color: var(--vmm-green-lt);
}

.btn-primary.btn-outline {
    color: var(--vmm-green);
    border-color: var(--vmm-green);
    background: transparent;
}

.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus {
    background-color: var(--vmm-green);
    border-color: var(--vmm-green);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Footer - nen xam nhat, chu den, vien tren xanh
   -------------------------------------------------------------------------- */
.footer {
    background: var(--vmm-bg-2);
    border-top: 2px solid var(--vmm-green);
    color: var(--vmm-ink);
}

.footer .widget-title {
    color: var(--vmm-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.footer p,
.footer .newsletter-info p {
    color: var(--vmm-muted);
}

.footer .widget-body a,
.footer .widget-body label {
    color: var(--vmm-muted);
}

.footer .widget-body a:hover {
    color: var(--vmm-green);
}

.footer .footer-top,
.footer .footer-bottom {
    border-color: var(--vmm-line);
}

.footer .widget-newsletter .form-control {
    background: #fff;
    border: 1px solid var(--vmm-line);
    color: var(--vmm-ink);
}

.footer .social-link {
    background: #fff;
    border: 1px solid var(--vmm-line);
    color: var(--vmm-muted);
}

.footer .social-link:hover {
    background: var(--vmm-green);
    border-color: var(--vmm-green);
    color: #fff;
}

.footer .copyright {
    color: var(--vmm-muted);
}

/* --------------------------------------------------------------------------
   Thanh cong cu co dinh ben phai + tien ich
   -------------------------------------------------------------------------- */
.icon-color-mobile {
    color: var(--vmm-green);
}

.box_fixRight .box_content .item:hover {
    color: var(--vmm-green);
}

.text-breadcrumb {
    color: var(--vmm-green) !important;
}

.pagination .active,
.pagination .page-item:hover {
    background-color: var(--vmm-green) !important;
}

.btn-read-more {
    border-color: var(--vmm-green) !important;
    color: var(--vmm-green) !important;
}

.btn-read-more:hover {
    background: var(--vmm-green) !important;
    color: #fff !important;
}

.category-name {
    color: var(--vmm-green) !important;
}

.subCategoriesHome .item-inner {
    border-color: var(--vmm-line) !important;
    color: var(--vmm-ink);
}

.subCategoriesHome .item-inner:hover {
    border-color: var(--vmm-green) !important;
    color: var(--vmm-green);
}

.product-detail-policy .policy-value ::before {
    color: var(--vmm-green);
}

.box-show-product-ajax .list-group-item .price {
    color: var(--vmm-green);
}

/* Dai thong so ky thuat o trang chi tiet san pham */
.description-medicine-title {
    border-left: 4px solid var(--vmm-green);
    padding-left: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.medicine {
    padding: 7px 0;
    border-bottom: 1px dashed var(--vmm-line);
}

.title-medicine {
    min-width: 140px;
}

/* --------------------------------------------------------------------------
   Luoi san pham trang chu - packing gon, khong keo gian khi it hang
   -------------------------------------------------------------------------- */
.product-home {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
    align-items: stretch;
}

.product-home .product {
    display: flex;
    flex-direction: column;
}

.product-home .product .product-details {
    margin-top: auto;
}

/* ==========================================================================
   MOBILE  (so do do truc tiep DOM o viewport 390px)
   ========================================================================== */
@media (max-width: 767px) {

    /* Header: chua du icon + badge gio hang */
    .header .header-middle .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .header .header-right {
        flex: 0 0 auto;
        padding-right: 6px;
    }

    .header .header-right .cart-dropdown {
        width: auto;
        min-width: 42px;
        overflow: visible;
    }

    .header .header-right .cart-dropdown .cart-toggle {
        padding-right: 6px;
    }

    .header .header-middle .logo img {
        height: 38px;
    }

    /* Card: ten san pham xuong dong, gioi han 2 dong */
    .product-home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-home .product {
        padding: 10px 8px 12px;
    }

    .product-home .product-name,
    .product-home .product-name a {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 1.3rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 3.5rem;
    }

    .product-home .product-price .new-price,
    .product-home .product-price .price {
        font-size: 1.5rem;
    }

    .titlehomepage .category:first-child a {
        font-size: 1.6rem;
        padding: 6px 10px;
    }

    /* Footer: form dang ky xep doc */
    .footer .widget-newsletter .input-wrapper-inline {
        display: flex;
        flex-wrap: wrap;
    }

    .footer .widget-newsletter .form-control {
        flex: 1 1 100%;
        margin-bottom: 10px;
    }

    .footer .widget-newsletter .btn {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center;
    }

    .footer .newsletter-info {
        text-align: center;
    }

    .footer .widget {
        margin-bottom: 2rem;
    }

    .footer .copyright {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 1.2rem;
        text-align: center;
        line-height: 1.5;
    }

    .footer .footer-bottom {
        text-align: center;
    }

    /* Thanh cong cu duoi man hinh - nen trang sach, icon xanh.
       Theme dua vao JS gan class .fixed (moi co position:fixed) nhung
       class do khong bao gio duoc gan -> thanh co width/height = 0. Neo
       co dinh thang bang CSS. */
    .sticky-footer.fix-bottom {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 56px;
        padding: 0;
        margin: 0;
        align-items: stretch;
        background: #fff;
        border-top: 1px solid var(--vmm-line);
        box-shadow: 0 -2px 12px rgba(35, 37, 33, .12);
        z-index: 1051;
        opacity: 1;
    }

    .sticky-footer.fix-bottom > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .sticky-footer .sticky-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 2px;
        padding: 0 2px;
        color: var(--vmm-ink);
        font-size: 1.05rem;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
    }

    .sticky-footer .sticky-link i,
    .sticky-footer .sticky-link img {
        display: block;
        font-size: 1.9rem;
        width: 20px;
        height: 20px;
        color: var(--vmm-green);
    }

    .sticky-footer .sticky-link:hover,
    .sticky-footer .sticky-link:hover i {
        color: var(--vmm-green-lt);
    }

    .sticky-footer .header-search .input-wrapper {
        bottom: 60px;
        right: 8px;
        min-width: calc(100vw - 16px);
    }

    /* Chua cho thanh cong cu duoi */
    .page-wrapper {
        padding-bottom: 56px;
    }

    .box_fixRight {
        display: none;
    }

    /* Co chu: style-custom.css dat h1/h2/h4 cung bang !important */
    h1 { font-size: 2.1rem !important; line-height: 1.3; }
    h2 { font-size: 1.9rem !important; line-height: 1.3; }
    h4 { font-size: 1.6rem !important; line-height: 1.35; }

    .footer .widget-title {
        font-size: 1.5rem !important;
        letter-spacing: .03em;
    }

    .title {
        font-size: 1.9rem;
    }

    .breadcrumb {
        font-size: 1.2rem;
        flex-wrap: wrap;
    }
}

/* Man hinh rat hep: 1 cot */
@media (max-width: 359px) {
    .product-home {
        grid-template-columns: 1fr;
    }
}