/* ============================================================
   OGF UI/UX UPGRADE
   Dán vào cuối style.css (hoặc Flatsome > Advanced > Custom CSS).
   Dựa trên kiểm tra thực tế: trang chủ, danh mục /tao-do/, sản phẩm
   /tao-do-organic-garden-food/ ở 1440px và 390px.
   ============================================================ */


/* ------------------------------------------------------------
   0. DESIGN TOKENS — lấy từ màu thương hiệu hiện có
   (--fs-color-primary = #326e51, vàng header = #fbd947)
   ------------------------------------------------------------ */

:root {
    --ogf-green:       #326e51;
    --ogf-green-dark:  #24523c;
    --ogf-green-50:    #eef5f0;
    --ogf-yellow:      #fbd947;
    --ogf-red:         #d0021b;
    --ogf-text:        #1f2a24;
    --ogf-muted:       #6b7a72;
    --ogf-border:      #e3eae5;
    --ogf-radius:      10px;
    --ogf-radius-sm:   8px;
    --ogf-shadow:      0 2px 8px rgba(31, 42, 36, .06);
    --ogf-shadow-lg:   0 10px 28px rgba(31, 42, 36, .12);
    --ogf-ease:        cubic-bezier(.2, .7, .3, 1);
}


/* ------------------------------------------------------------
   1. BASE — thay màu xanh dương #009bdf (còn sót từ template
   natora) bằng màu thương hiệu, thêm focus rõ ràng cho bàn phím
   ------------------------------------------------------------ */

body {
    color: var(--ogf-text);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.section-title-normal span,
.section-title-center span {
    color: var(--ogf-text);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--ogf-green);
    outline-offset: 2px;
}

/* Nút "Xem thêm" trong sections.php đang hover màu #009bdf */
.product-expand__button:hover,
.product-detail-preview__button:hover {
    color: var(--ogf-green);
    border-color: var(--ogf-green);
}

.product-expand__button:focus-visible,
.product-detail-preview__button:focus-visible {
    outline-color: var(--ogf-green);
}

/* Mũi tên tiêu đề đang load ảnh từ natora.updata.top (domain ngoài)
   → thay bằng thanh gradient thuần CSS, không phụ thuộc server khác */
.section-title-main::after,
.section-title-center .section-title-main::after,
.section-title-normal .section-title-main::after,
.footer-wrapper .section-title-main::after {
    background: linear-gradient(90deg, var(--ogf-green) 0 70%, var(--ogf-yellow) 70% 100%);
    height: 3px;
    width: 72px;
    bottom: -2px;
    border-radius: 3px;
}


/* ------------------------------------------------------------
   2. HEADER
   ------------------------------------------------------------ */

/* Ô tìm kiếm: bo góc đồng bộ, có trạng thái focus */
.header-search-form-wrapper input.search-field {
    border-radius: var(--ogf-radius-sm) 0 0 var(--ogf-radius-sm) !important;
    border: 0;
    box-shadow: none;
    transition: box-shadow .2s;
}

.header-search-form-wrapper input.search-field:focus {
    box-shadow: 0 0 0 3px rgba(251, 217, 71, .45);
}

.searchform .button.icon {
    border-radius: 0 var(--ogf-radius-sm) var(--ogf-radius-sm) 0 !important;
    transition: background-color .2s;
}

.searchform .button.icon:hover {
    background: #f5c800;
}

/* Nút giỏ hàng: nền kính mờ thay vì viền trắng 2px cứng.
   Không dùng nền trắng khi hover vì icon cart-icon.webp màu trắng
   sẽ biến mất */
a.header-cart-link {
    gap: 8px;
    padding: 8px 14px !important;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 13px;
    letter-spacing: .04em;
    transition: background-color .2s, border-color .2s, transform .2s;
}

a.header-cart-link:hover,
.cart-item.current-dropdown > a.header-cart-link {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
}

a.header-cart-link:active {
    transform: scale(.97);
}

.header-cart-icon .cart-img-icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* Badge số lượng: to hơn, màu vàng thương hiệu, không đè viền nút */
.header-cart-icon[data-icon-label]::after {
    top: -9px;
    right: -11px;
    min-width: 19px;
    width: auto;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--ogf-green);
    border-radius: 999px;
    background: var(--ogf-yellow);
    color: var(--ogf-green-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 15px;
    box-sizing: border-box;
}

/* Nút mở menu mobile: header không bật chế độ "dark" nên Flatsome tô
   icon xám rgba(74,74,74,.85) → tương phản 1.4:1 trên nền xanh.
   Trắng = 6.03:1. Cùng kiểu kính mờ với nút giỏ hàng bên phải,
   vùng chạm 42px thay vì 24px */
.header-main .mobile-nav > li.nav-icon > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background-color .2s, border-color .2s, transform .2s;
}

.header-main .mobile-nav > li.nav-icon > a:hover,
.header-main .mobile-nav > li.nav-icon > a[aria-expanded="true"] {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    color: #fff;
}

.header-main .mobile-nav > li.nav-icon > a:active {
    transform: scale(.94);
}

.header-main .mobile-nav > li.nav-icon > a .icon-menu {
    margin: 0;
    font-size: 20px;
    line-height: 1;
    color: inherit;
}

/* Menu ngang: gạch chân vàng khi hover thay vì không có gì */
.header-bottom-nav > li > a {
    position: relative;
    transition: color .2s;
}

.header-bottom-nav > li > a::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 4px;
    height: 2px;
    background: var(--ogf-green);
    transform: scaleX(0);
    transition: transform .25s var(--ogf-ease);
}

.header-bottom-nav > li > a:hover {
    color: var(--ogf-green);
}

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

/* Khoảng cách menu ngang theo độ rộng màn hình.
   Flatsome mặc định: li margin 0 7px + a padding 10px 0 → các mục chỉ cách 14px.
   Ở 1024px 5 mục đã tràn "Tra cứu đơn hàng" xuống dòng 2 → không tăng
   khoảng cách đồng loạt được. li.menu-item loại trừ nút "Danh mục sản phẩm"
   (li.header-vertical-menu) */
.header-bottom-nav > li.menu-item > a {
    white-space: nowrap;
}

.header-bottom-nav > li.menu-item > a .ux-menu-icon {
    margin-right: 6px;
}

/* Màn rộng: thêm padding cho <a> → khoảng cách 14px → 38px,
   vùng hover rộng hơn */
@media (min-width: 1200px) {
    .header-bottom-nav > li.menu-item > a {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Laptop nhỏ / iPad ngang: thu gọn để 5 mục nằm trên 1 hàng.
   max-width dùng .98px: viewport có thể lẻ (1199.4px khi zoom trình duyệt),
   "max-width: 1199px" + "min-width: 1200px" để hở khe → không rule nào khớp */
@media (min-width: 850px) and (max-width: 1199.98px) {
    /* Đo thực tế: ở 1000px chỉ dư 17px → margin 4px là tối đa */
    .header-bottom-nav > li.menu-item {
        margin-left: 4px;
        margin-right: 4px;
    }

    .header-bottom-nav > li.menu-item > a {
        font-size: 12px;
    }
}

@media (min-width: 1100px) and (max-width: 1199.98px) {
    .header-bottom-nav > li.menu-item {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media (min-width: 850px) and (max-width: 999.98px) {
    .header-bottom-nav > li.menu-item > a .ux-menu-icon {
        display: none;
    }
}

/* Menu dọc danh mục: hover có nền, dễ nhận biết mục đang trỏ */
.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a {
    transition: background-color .15s, color .15s, padding-left .2s;
}

.header-vertical-menu__fly-out .nav-vertical-fly-out > li.menu-item > a:hover {
    background: var(--ogf-green-50);
    color: var(--ogf-green);
    padding-left: 1.4em;
}


/* ------------------------------------------------------------
   3. PRODUCT CARD (loop) — dùng class từ product-loop-info.php
   .product-name / .price-box / .compare-price / .label_wrapper /
   .product-item-btn
   ------------------------------------------------------------ */

.product-small.col > .col-inner {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ogf-border);
    border-radius: var(--ogf-radius);
    overflow: hidden;
    transition: box-shadow .25s var(--ogf-ease), transform .25s var(--ogf-ease), border-color .25s;
}

.product-small.col > .col-inner:hover {
    border-color: transparent;
    box-shadow: var(--ogf-shadow-lg);
    transform: translateY(-3px);
}

.product-small .box-image img {
    transition: transform .5s var(--ogf-ease);
}

.product-small .col-inner:hover .box-image img {
    transform: scale(1.04);
}

.product-small .box-text.product-info {
    padding: 10px 12px 12px;
}

/* Tên sản phẩm: đúng 2 dòng, không còn dấu dòng thứ 3 bị cắt lơ lửng */
.product-small .product-name {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    min-height: 2.8em;
    max-height: 2.8em;
    overflow: hidden;
}

/* line-height của <a> phải bằng thẻ cha: rule inline có sẵn đặt
   min-height 2.8em nhưng line-height 1.3 → lộ 2.8px dòng thứ 3 */
.product-small .box-text .product-name a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
    max-height: 2.8em;
    color: var(--ogf-text);
    transition: color .2s;
}

.product-small .product-name a:hover {
    color: var(--ogf-green);
}

/* Khối giá + nút: giá bên trái, nút giỏ căn đáy bên phải */
.product-small .product-item-cta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.product-small .price-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-width: 0;
}

.product-small .price-box .price,
.product-small .price-box .price .amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--ogf-red);
}

.product-small .price-box .compare-price,
.product-small .price-box .compare-price .amount {
    font-size: 12.5px;
    font-weight: 400;
    color: #9aa5a0;
    text-decoration: line-through;
}

.product-small .label_wrapper {
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.product-small .product-item-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ogf-radius-sm);
    transition: background-color .2s, transform .2s;
}

.product-small .product-item-btn:hover {
    background: var(--ogf-green-dark);
    transform: scale(1.06);
}


/* ------------------------------------------------------------
   4. TRANG CHỦ
   Thêm class trong UX Builder (ô "Class" của Col/Row):
     ogf-subbanner → row 3 ảnh nhỏ dưới slider
     uu-diem       → row chứa 5 icon HACCP / chất lượng / ... (đã có)
     ogf-cats      → col "DANH MỤC BẠN QUAN TÂM"
   (ID dạng #stack-1706686967 do Flatsome sinh ngẫu nhiên → không dùng được)
   ------------------------------------------------------------ */

.home #content .img .img-inner {
    border-radius: var(--ogf-radius);
    overflow: hidden;
}

.home #content .img.has-hover .img-inner img {
    transition: transform .5s var(--ogf-ease);
}

.home #content .img.has-hover:hover .img-inner img {
    transform: scale(1.03);
}

/* Tiêu đề section: đậm, có thanh nhấn màu thương hiệu */
.home #content .col-inner > .text h2,
.row-san-pham > .col:first-child h2 {
    position: relative;
    padding-bottom: 10px;
    font-size: 22px;
    letter-spacing: .01em;
}

.home #content .col-inner > .text h2::after,
.row-san-pham > .col:first-child h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ogf-green) 0 70%, var(--ogf-yellow) 70% 100%);
    transform: translateX(-50%);
}

.row-san-pham > .col:first-child h2 {
    font-size: 19px;
    line-height: 1.3;
}

.row-san-pham > .col:first-child h2::after {
    left: 0;
    transform: none;
}

/* Dãy cam kết (.row.uu-diem): 5 icon rời rạc → 1 thanh trust bar.
   Mỗi item là con trực tiếp của .stack (mục đầu bọc trong <a.plain>,
   các mục sau là .icon-box). Flatsome chèn thêm 1 thẻ <style> làm con
   cuối của .stack → mọi selector con phải loại trừ :not(style), nếu không
   thẻ <style> bị display:flex và hiện CSS thành chữ */
.uu-diem .stack > style {
    display: none !important;
}

.uu-diem .stack {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch !important;
    padding: 18px 8px;
    border: 1px solid var(--ogf-border);
    border-radius: 16px;
    background: #f4f8f5;
}

/* Flatsome đặt margin theo --stack-gap cho con của .stack (layout flex);
   chuyển sang grid thì dùng gap → bỏ margin để các ô thẳng hàng */
.uu-diem .stack > :not(style) {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0 !important;
    padding: 4px 16px;
}

/* Vạch ngăn giữa các mục */
.uu-diem .stack > :not(style) + :not(style) {
    border-left: 1px solid #dbe6de;
}

/* icon-box-center → icon trái, chữ phải */
.uu-diem .icon-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left !important;
}

.uu-diem .icon-box-img {
    flex-shrink: 0;
    width: 52px !important;
    margin: 0 !important;
}

/* Icon là JPG nền trắng đục → multiply để nền trắng hoà vào nền xanh nhạt
   thay vì hiện ô vuông trắng */
.uu-diem .icon-box-img img {
    display: block;
    mix-blend-mode: multiply;
    transition: transform .3s var(--ogf-ease);
}

.uu-diem .icon-box:hover .icon-box-img img {
    transform: scale(1.08) rotate(-4deg);
}

/* .icon-box có class text-center → Flatsome đặt margin auto cho div con
   (.text-center > div), margin auto "ăn" hết khoảng trống của flex */
.uu-diem .icon-box-text {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flatsome in #text-xxx { text-align: center } theo ID → cần !important */
.uu-diem .icon-box-text .text {
    text-align: left !important;
}

.uu-diem .icon-box-text p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ogf-green-dark);
}

/* Nếu thêm dòng mô tả thứ 2 trong UX Builder, tự thành chữ phụ */
.uu-diem .icon-box-text p + p {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ogf-muted);
}

/* Tablet: 3 mục hàng trên + 2 mục hàng dưới (lưới 6 cột) */
@media (max-width: 849px) {
    .uu-diem .stack {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        padding: 0;
        border: 0;
        background: none;
    }

    .uu-diem .stack > :not(style) {
        grid-column: span 2;
        padding: 12px 14px;
        border: 1px solid var(--ogf-border);
        border-radius: 12px;
        background: #f4f8f5;
    }

    .uu-diem .stack > :nth-child(n+4 of :not(style)) {
        grid-column: span 3;
    }

    .uu-diem .stack > :not(style) + :not(style) {
        border-left: 1px solid var(--ogf-border);
    }
}

/* Mobile: 2 cột, mục cuối full hàng */
@media (max-width: 549px) {
    .uu-diem .stack {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .uu-diem .stack > :not(style),
    .uu-diem .stack > :nth-child(n+4 of :not(style)) {
        grid-column: span 1;
        padding: 10px;
    }

    /* Số mục lẻ → mục cuối full hàng, căn giữa */
    .uu-diem .stack > :nth-last-child(1 of :not(style)):nth-child(odd of :not(style)) {
        grid-column: span 2;
        justify-content: center;
    }

    /* Phần chữ đang flex:1 → giãn hết chiều ngang, đẩy nội dung sang trái.
       Item có thể chính là .icon-box (không bọc <a>) nên nhắm vào .icon-box-text */
    .uu-diem .stack > :nth-last-child(1 of :not(style)):nth-child(odd of :not(style)) .icon-box-text {
        flex: 0 1 auto;
    }

    .uu-diem .icon-box {
        gap: 8px;
    }

    .uu-diem .icon-box-img {
        width: 40px !important;
    }

    .uu-diem .icon-box-text p {
        font-size: 13px;
    }
}

/* Danh mục quan tâm: thẻ bo góc, hover nổi */
.ogf-cats .box {
    border-radius: var(--ogf-radius);
    overflow: hidden;
    transition: box-shadow .25s, transform .25s var(--ogf-ease);
}

.ogf-cats .box:hover {
    box-shadow: var(--ogf-shadow-lg);
    transform: translateY(-3px);
}

.ogf-cats .box-text h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   5. TRANG DANH MỤC
   ------------------------------------------------------------ */

/* Breadcrumb + H1 đang dính sát menu */
.category-page-title .page-title-inner {
    padding-top: 18px;
    padding-bottom: 6px;
}

.woocommerce-breadcrumb {
    font-size: 14px;
    color: var(--ogf-muted);
}

.shop-page-title.is-xlarge {
    font-size: 28px;
    letter-spacing: .01em;
}

/* Sidebar danh mục: tên đang lưu IN HOA trong DB → hiển thị dạng câu
   (tốt nhất vẫn là sửa tên trong Sản phẩm > Danh mục) */
.widget_product_categories .product-categories > li > a {
    display: block;
    padding: 9px 0 9px 10px;
    font-size: 15px;
    color: var(--ogf-text);
    text-transform: lowercase;
    border-left: 3px solid transparent;
    transition: color .2s, border-color .2s, background-color .2s;
}

.widget_product_categories .product-categories > li > a::first-letter {
    text-transform: uppercase;
}

.widget_product_categories .product-categories > li > a:hover {
    color: var(--ogf-green);
    background: var(--ogf-green-50);
}

.widget_product_categories .product-categories > li.current-cat > a {
    color: var(--ogf-green);
    font-weight: 700;
    border-left-color: var(--ogf-green);
    background: var(--ogf-green-50);
}


/* ------------------------------------------------------------
   6. TRANG SẢN PHẨM
   ------------------------------------------------------------ */

.product-info h1.product-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ogf-text);
}

.product-info .price-wrapper .price,
.product-info .price-wrapper .price .amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--ogf-red);
}

.product-info .price-wrapper del .amount {
    font-size: 16px;
    font-weight: 400;
    color: #9aa5a0;
}

/* Biến thể */
.variations th.label label,
.variations td.label label {
    font-weight: 600;
    color: var(--ogf-text);
}

.variations select {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ogf-border);
    border-radius: var(--ogf-radius-sm);
    font-size: 15px;
    background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.variations select:focus {
    border-color: var(--ogf-green);
    box-shadow: 0 0 0 3px rgba(50, 110, 81, .15);
}

/* Số lượng: nút +/- đủ lớn để chạm (≥ 40px). Rule inline
   ".product-info form.cart .quantity .ux-quantity__button" nằm trong
   <body> (sau style.css) → cần thêm ".ux-quantity" để thắng */
.product-info form.cart .quantity.ux-quantity .ux-quantity__button,
.product-info form.cart .quantity.ux-quantity .input-text.qty {
    height: 44px;
    min-width: 40px;
    line-height: 42px;
    border-color: var(--ogf-border);
}

.product-info form.cart .quantity.ux-quantity .ux-quantity__button--minus {
    border-radius: var(--ogf-radius-sm) 0 0 var(--ogf-radius-sm);
}

.product-info form.cart .quantity.ux-quantity .ux-quantity__button--plus {
    border-radius: 0 var(--ogf-radius-sm) var(--ogf-radius-sm) 0;
}

/* CTA: WooCommerce đang để opacity .6 khi chưa chọn biến thể →
   khách tưởng hết hàng. Giữ nút rõ màu, bấm vào sẽ nhắc chọn trọng lượng */
.product-info .single_add_to_cart_button,
.product-info .ux-buy-now-button {
    min-height: 50px;
    border-radius: var(--ogf-radius-sm);
    font-size: 15px;
    letter-spacing: .03em;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .15s;
}

.product-info .single_add_to_cart_button.disabled,
.product-info .ux-buy-now-button.disabled {
    opacity: 1 !important;
    cursor: pointer;
}

.product-info .ux-buy-now-button:hover {
    background: var(--ogf-green-dark);
    box-shadow: 0 6px 16px rgba(50, 110, 81, .3);
}

.product-info .single_add_to_cart_button:hover {
    background: var(--ogf-green-50);
}

.product-info .single_add_to_cart_button:active,
.product-info .ux-buy-now-button:active {
    transform: translateY(1px);
}

/* Dòng freeship thành badge */
.vts-freeship-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--ogf-radius-sm);
    background: var(--ogf-green-50);
    color: var(--ogf-green);
    font-weight: 600;
}

/* Cam kết bên phải */
#product-sidebar .icon-box {
    transition: background-color .2s;
}

#product-sidebar .icon-box:hover {
    background: var(--ogf-green-50);
}

/* Tiêu đề ĐẶC ĐIỂM NỔI BẬT / CHI TIẾT SẢN PHẨM */
.heading-bar__title {
    position: relative;
    margin: 0 0 14px;
    padding-left: 12px;
    font-size: 18px;
    color: var(--ogf-text);
}

.heading-bar__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    border-radius: 4px;
    background: var(--ogf-green);
}

.product-page-sections .entry-content {
    font-size: 15.5px;
    line-height: 1.75;
}

/* Cột "CHI TIẾT SẢN PHẨM" rỗng khi ACF thong_tin_san_pham trống:
   ẩn cột, cho mô tả chiếm toàn bộ chiều ngang */
.product-main-description .row:not(:has(.product-detail-preview)) > .large-4 {
    display: none;
}

.product-main-description .row:not(:has(.product-detail-preview)) > .large-8 {
    flex-basis: 100%;
    max-width: 100%;
}

/* Khi full width, giữ độ dài dòng dễ đọc (~100 ký tự) */
.product-main-description .row:not(:has(.product-detail-preview)) .product-expand {
    max-width: 900px;
}

/* Form đánh giá: viền dày 2px → thẻ nhẹ */
.review-form-inner.has-border {
    border: 1px solid var(--ogf-border);
    border-radius: 12px;
    background: #fafcfb;
    padding: 24px;
}

#reviews .comment-reply-title {
    font-size: 18px;
    line-height: 1.4;
}

#review_form input[type=text],
#review_form input[type=email],
#review_form textarea {
    border: 1px solid var(--ogf-border);
    border-radius: var(--ogf-radius-sm);
    background: #fff;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}

#review_form input[type=text]:focus,
#review_form input[type=email]:focus,
#review_form textarea:focus {
    border-color: var(--ogf-green);
    box-shadow: 0 0 0 3px rgba(50, 110, 81, .12);
}

#review_form .form-submit input[type=submit] {
    border-radius: var(--ogf-radius-sm);
    padding: 0 28px;
}


/* ------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------ */

/* Tông màu: 2 dải xám #333 / #4d4d4d lệch với header xanh →
   dải social xanh thương hiệu, thân footer xanh rất nhạt,
   dải copyright xanh đậm */
.footer-wrapper .mail-box,
.footer-wrapper .mail-box .section-bg {
    background-color: var(--ogf-green) !important;
}

.footer-wrapper > .section:not(.mail-box) {
    background: #f4f8f5;
    padding-top: 44px !important;
    padding-bottom: 20px !important;
}

.footer-wrapper .absolute-footer {
    background: var(--ogf-green-dark) !important;
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
}

/* Flatsome tô nền <html> = màu dải copyright để vùng overscroll
   liền mạch → đổi theo */
html {
    background-color: var(--ogf-green-dark);
}

/* Icon mạng xã hội: ảnh svg có width/height="1" → cố định kích thước,
   tránh nhảy layout khi lazy-load */
.mail-box .icon-box-img img {
    width: 30px !important;
    height: 30px !important;
    transition: transform .2s, opacity .2s;
}

.mail-box a:hover .icon-box-img img {
    transform: translateY(-2px);
    opacity: .85;
}

/* Logo + tên công ty (đang là caption ảnh: nền xám, in nghiêng) */
.footer-wrapper .wp-caption {
    background: none;
    border: 0;
}

.footer-wrapper .wp-caption img {
    max-width: 210px;
}

.footer-wrapper .wp-caption .wp-caption-text {
    padding: 10px 0 0;
    background: none;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.55;
    color: var(--ogf-muted);
}

/* Cột trống (col 2 chưa có nội dung) → ẩn, các cột còn lại giãn đều */
.footer-wrapper .row > .col:not(:has(.col-inner > *)) {
    display: none;
}

.footer-wrapper .row.align-equal {
    justify-content: space-between;
}

/* Tiêu đề cột */
.footer-wrapper .col-inner > h3 {
    position: relative;
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--ogf-green-dark);
}

.footer-wrapper .col-inner > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ogf-green) 0 70%, var(--ogf-yellow) 70% 100%);
}

/* Danh sách link: bỏ chấm tròn, thay bằng mũi tên nhỏ */
.footer-wrapper .col-inner > ul {
    margin: 0;
    list-style: none;
}

.footer-wrapper .col-inner > ul > li {
    margin: 0;
}

.footer-wrapper .col-inner > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
    color: var(--ogf-text);
    transition: color .2s, transform .2s var(--ogf-ease);
}

.footer-wrapper .col-inner > ul > li > a::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
    transition: opacity .2s;
}

.footer-wrapper .col-inner > ul > li > a:hover {
    color: var(--ogf-green);
    transform: translateX(4px);
}

.footer-wrapper .col-inner > ul > li > a:hover::before {
    opacity: 1;
}

/* Cột CHÍNH SÁCH dạng <p> + <br> + emoji (markup cũ): giãn dòng cho dễ đọc.
   Thay bằng <ul> theo HTML mẫu thì sẽ dùng style danh sách ở trên */
.footer-wrapper .col-inner > h3 + p {
    font-size: 14px;
    line-height: 2.15;
    color: var(--ogf-text);
}

/* Cột liên hệ (HTML mẫu, class ogf-footer-contact).
   Selector có "ul.ogf-footer-contact" để thắng rule danh sách link ở trên */
.footer-wrapper .col-inner > ul.ogf-footer-contact > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    padding: 5px 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ogf-text);
}

.footer-wrapper .col-inner > ul.ogf-footer-contact > li > a {
    display: inline;
    padding: 0;
    transform: none;
}

.footer-wrapper .col-inner > ul.ogf-footer-contact > li > a::before {
    content: none;
}

.footer-wrapper .col-inner > ul.ogf-footer-contact > li > a:hover {
    text-decoration: underline;
}

.footer-wrapper .ogf-footer-contact a[href^="tel:"] {
    font-size: 17px;
    font-weight: 800;
    color: var(--ogf-red);
}


/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 849px) {
    .product-info h1.product-title {
        font-size: 19px;
    }

    .product-info .price-wrapper .price,
    .product-info .price-wrapper .price .amount {
        font-size: 22px;
    }

    .row-san-pham > .col:first-child h2 {
        font-size: 18px;
    }
}

@media (max-width: 549px) {
    /* 3 ảnh dưới slider: xếp 3 cột nhỏ thay vì 3 ảnh full màn hình */
    .ogf-subbanner > .col {
        flex-basis: 33.333%;
        max-width: 33.333%;
        padding: 0 4px 8px;
    }

    /* Danh mục: 3 cột × 2 hàng thay vì 6 cột chen chúc */
    .ogf-cats .stack {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ogf-cats .box-text h4 {
        font-size: 12.5px;
    }

    /* Banner dọc cạnh sản phẩm cao ~710px trên mobile:
       giữ phần đầu (có headline), cắt bớt chiều cao */
    .row-san-pham > .col:first-child .img-inner {
        max-height: 260px;
    }

    .row-san-pham > .col:first-child .img-inner img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        object-position: top;
    }

    /* Card mobile gọn hơn */
    .product-small .box-text.product-info {
        padding: 8px 9px 10px;
    }

    .product-small .product-name {
        font-size: 13px;
    }

    .product-small .price-box .price,
    .product-small .price-box .price .amount {
        font-size: 15px;
    }

    .product-small .product-item-btn {
        width: 40px;
        height: 40px;
    }

    .review-form-inner.has-border {
        padding: 16px;
    }

    /* Footer: logo và cột liên hệ full width, 2 cột link chia đôi */
    .footer-wrapper > .section:not(.mail-box) {
        padding-top: 28px !important;
    }

    .footer-wrapper .row.align-equal > .col:first-child,
    .footer-wrapper .row.align-equal > .col:has(.ogf-footer-contact) {
        flex-basis: 100%;
        max-width: 100%;
    }

    .footer-wrapper .row.align-equal > .col:first-child {
        text-align: center;
    }

    .footer-wrapper .row.align-equal > .col:has(.ogf-footer-contact) {
        padding-bottom: 20px;
    }

    /* Icon MXH: row-collapse bỏ padding → icon dính mép màn hình */
    .footer-wrapper .mail-box .stack {
        justify-content: center !important;
        gap: 18px;
    }

    .footer-wrapper .wp-caption img {
        max-width: 180px;
    }

    .footer-wrapper .col-inner > h3 {
        font-size: 14px;
    }

    /* Vùng chạm ≥ 36px */
    .footer-wrapper .col-inner > ul > li > a {
        padding: 8px 0;
        font-size: 14.5px;
    }

    .footer-wrapper .col-inner > h3 + p {
        font-size: 13px;
    }
}

/* Nút gọi / Zalo nổi đang đè lên ô chọn trọng lượng và form trên mobile */
@media (max-width: 549px) {
    /* TODO: chọn cách xử lý .scf-wrap / .scf-btn trên mobile */
}


/* ------------------------------------------------------------
   9. GIẢM CHUYỂN ĐỘNG
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .product-small.col > .col-inner,
    .product-small .box-image img,
    .ogf-cats .box,
    .uu-diem .icon-box-img img,
    .home #content .img.has-hover .img-inner img,
    .scf-btn span {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}


/* ------------------------------------------------------------
   10. MINI-CART (dropdown ở header + popup giỏ hàng trên mobile)
   ------------------------------------------------------------ */

.cart-item .nav-dropdown {
    width: 360px;
    padding: 18px;
    border: 1px solid var(--ogf-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(31, 42, 36, .16);
}

/* Flatsome cố định khối trong là 260px → cho giãn theo dropdown */
.cart-item .nav-dropdown > li.html {
    width: auto;
}

/* Danh sách: nhiều sản phẩm thì cuộn trong khung, không kéo dài cả trang */
.widget_shopping_cart ul.product_list_widget {
    max-height: 330px;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.widget_shopping_cart ul.product_list_widget li.mini_cart_item {
    min-height: 92px;
    padding: 12px 36px 12px 80px;
    border-bottom: 1px solid var(--ogf-border);
}

.widget_shopping_cart ul.product_list_widget li.mini_cart_item:last-child {
    border-bottom: 0;
}

.widget_shopping_cart ul.product_list_widget li.mini_cart_item img {
    top: 12px;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--ogf-border);
    border-radius: 10px;
}

/* Tên đang màu xanh xám rgb(51,72,98) → màu chữ thương hiệu.
   Không cắt dòng vì trọng lượng (- 0,5kg) nằm ở cuối tên */
.widget_shopping_cart ul.product_list_widget li.mini_cart_item a:not(.remove) {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ogf-text);
    transition: color .2s;
}

.widget_shopping_cart ul.product_list_widget li.mini_cart_item a:not(.remove):hover {
    color: var(--ogf-green);
}

.widget_shopping_cart .ux-mini-cart-qty {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--ogf-muted);
}

/* Flatsome để opacity .6 → giá đỏ thành hồng nhạt */
.widget_shopping_cart .ux-mini-cart-qty .quantity {
    opacity: 1;
}

.widget_shopping_cart .ux-mini-cart-qty .amount {
    font-size: 14.5px;
}

/* Nút xoá: tròn, rõ vùng bấm, hover đỏ */
.widget_shopping_cart ul.product_list_widget li a.remove {
    top: 12px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ogf-border);
    border-radius: 50%;
    color: #9aa5a0 !important;
    font-size: 17px;
    line-height: 23px;
    transition: background-color .2s, border-color .2s, color .2s;
}

.widget_shopping_cart ul.product_list_widget li a.remove:hover {
    background: var(--ogf-red);
    border-color: var(--ogf-red);
    color: #fff !important;
}

.widget_shopping_cart .woocommerce-mini-cart__total {
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 12px;
    padding: 12px 0 0;
    border-top: 1px dashed #c9d6cd;
    border-bottom: 0;
    font-size: 15px;
}

.widget_shopping_cart .woocommerce-mini-cart__total .amount {
    font-size: 19px;
}

/* 2 nút ngang hàng: "Xem giỏ hàng" viền (phụ), "Thanh toán" đặc (chính) */
.widget_shopping_cart .woocommerce-mini-cart__buttons {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    margin: 0;
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.2;
    letter-spacing: .03em;
    transition: background-color .2s, color .2s, filter .2s, box-shadow .2s;
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
    background: #fff;
    border: 1.5px solid var(--ogf-green);
    color: var(--ogf-green);
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
    background: var(--ogf-green-50);
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout {
    background: var(--fs-color-secondary);
    border: 1.5px solid var(--fs-color-secondary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(192, 85, 48, .28);
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout:hover {
    filter: brightness(.93);
}

.widget_shopping_cart .woocommerce-mini-cart__empty-message {
    padding: 22px 0;
    text-align: center;
    color: var(--ogf-muted);
}


/* ------------------------------------------------------------
   11. TRANG GIỎ HÀNG /gio-hang/
   ------------------------------------------------------------ */

.woocommerce-cart .row-divided > .col + .col:not(.large-12) {
    border-left: 0;
}

.woocommerce-cart table.shop_table.cart th {
    padding-bottom: 12px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--ogf-muted);
    white-space: nowrap;
}

.woocommerce-cart table.shop_table.cart td {
    padding-top: 18px;
    padding-bottom: 18px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ogf-border);
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
    border: 1px solid var(--ogf-border);
    border-radius: 10px;
}

.woocommerce-cart table.shop_table.cart td.product-name a {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ogf-text);
}

.woocommerce-cart table.shop_table.cart td.product-name a:hover {
    color: var(--ogf-green);
}

/* Đơn giá màu chữ thường, chỉ thành tiền màu đỏ → bớt "loạn đỏ" */
.woocommerce-cart table.shop_table.cart td.product-price .amount {
    color: var(--ogf-text);
    font-weight: 500;
}

.woocommerce-cart table.shop_table.cart td.product-subtotal .amount {
    font-size: 16px;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--ogf-border);
    border-radius: 50%;
    color: #9aa5a0 !important;
    font-size: 18px;
    line-height: 25px;
    transition: background-color .2s, border-color .2s, color .2s;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
    background: var(--ogf-red);
    border-color: var(--ogf-red);
    color: #fff !important;
}

.woocommerce-cart td.product-quantity .quantity.ux-quantity .ux-quantity__button,
.woocommerce-cart td.product-quantity .quantity.ux-quantity .input-text.qty {
    height: 38px;
    min-width: 36px;
    border-color: var(--ogf-border);
}

.woocommerce-cart td.product-quantity .quantity.ux-quantity .ux-quantity__button--minus {
    border-radius: 8px 0 0 8px;
}

.woocommerce-cart td.product-quantity .quantity.ux-quantity .ux-quantity__button--plus {
    border-radius: 0 8px 8px 0;
}

.woocommerce-cart td.actions {
    padding-top: 22px !important;
    border-bottom: 0 !important;
}

.woocommerce-cart td.actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    line-height: 1.2;
    border-radius: 10px;
}

/* "Cập nhật giỏ hàng" chỉ bật khi đổi số lượng → lúc disabled
   hiển thị như nút phụ thay vì nút xanh mờ */
.woocommerce-cart button[name="update_cart"]:disabled {
    opacity: 1;
    background: transparent;
    border: 1px solid var(--ogf-border);
    color: #9aa5a0;
    box-shadow: none;
}

/* Cột tổng tiền thành thẻ */
.woocommerce-cart .cart-collaterals .cart-sidebar {
    padding: 24px !important;
    border: 1px solid var(--ogf-border);
    border-radius: 16px;
    background: #fafcfb;
}

.woocommerce-cart .cart_totals thead th,
.woocommerce-cart .cart_totals > h2 {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ogf-green);
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--ogf-green-dark);
}

.woocommerce-cart .cart_totals tbody th,
.woocommerce-cart .cart_totals tbody td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-color: var(--ogf-border);
    font-size: 14.5px;
}

.woocommerce-cart .cart_totals .shipping__table th,
.woocommerce-cart .cart_totals .shipping__table td,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
    font-size: 13px;
    color: var(--ogf-muted);
}

/* Chỉ "Tổng" màu đỏ, "Tạm tính" màu chữ thường */
.woocommerce-cart .cart_totals .cart-subtotal .amount,
.woocommerce-checkout-review-order-table .cart-subtotal .amount {
    color: var(--ogf-text);
}

.woocommerce-cart .cart_totals .order-total th {
    font-size: 16px;
    color: var(--ogf-text);
}

.woocommerce-cart .cart_totals .order-total .amount {
    font-size: 22px;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    border-radius: 12px;
    font-size: 16px;
    letter-spacing: .04em;
    box-shadow: 0 10px 24px rgba(192, 85, 48, .28);
    transition: filter .2s, transform .15s;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    filter: brightness(.93);
    transform: translateY(-1px);
}

/* Mã giảm giá */
.woocommerce-cart .ux-cart-coupon .widget-title {
    margin-top: 8px;
    font-size: 15px;
    color: var(--ogf-text);
}

.woocommerce-cart .ux-cart-coupon .widget-title .icon-tag {
    color: var(--ogf-green);
}

.woocommerce-cart .ux-cart-coupon #coupon_code {
    height: 44px;
    border: 1px solid var(--ogf-border);
    border-radius: 10px;
    box-shadow: none;
}

.woocommerce-cart .ux-cart-coupon #coupon_code:focus {
    border-color: var(--ogf-green);
    box-shadow: 0 0 0 3px rgba(50, 110, 81, .12);
}

.woocommerce-cart .ux-cart-coupon .button {
    min-height: 44px;
    border: 1.5px solid var(--ogf-green);
    border-radius: 10px;
    background: #fff;
    color: var(--ogf-green);
    font-weight: 700;
    transition: background-color .2s, color .2s;
}

.woocommerce-cart .ux-cart-coupon .button:hover {
    background: var(--ogf-green);
    color: #fff;
}


/* ------------------------------------------------------------
   12. TRANG THANH TOÁN /thanh-toan/
   ------------------------------------------------------------ */

.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 22px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed var(--ogf-green);
    border-radius: 10px;
    background: var(--ogf-green-50);
    font-size: 14.5px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    font-weight: 700;
    color: var(--ogf-green);
}

.woocommerce-checkout .checkout_coupon.has-border {
    padding: 18px;
    border: 1px dashed var(--ogf-green);
    border-radius: 12px;
}

/* Flatsome kẻ viền trên khối billing → thừa khi đã có hộp mã ưu đãi */
.woocommerce-checkout .woocommerce-billing-fields {
    padding-top: 0;
    border-top: 0;
}

/* Tiêu đề khối: thanh nhấn giống "ĐẶC ĐIỂM NỔI BẬT" */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading {
    position: relative;
    margin-bottom: 18px;
    padding-left: 12px;
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--ogf-text);
}

.woocommerce-checkout .woocommerce-billing-fields > h3::before,
.woocommerce-checkout .woocommerce-additional-fields > h3::before,
.woocommerce-checkout #order_review_heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--ogf-green);
}

.woocommerce-checkout form.checkout .form-row label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ogf-text);
}

.woocommerce-checkout form.checkout .form-row .required {
    border: 0;
    color: var(--ogf-red);
    text-decoration: none;
}

.woocommerce-checkout form.checkout .form-row label .optional {
    font-weight: 400;
    color: var(--ogf-muted);
}

/* Ô nhập + select2 (Tỉnh/Thành, Phường/Xã) cùng một kiểu.
   Dùng background-color (không dùng "background") vì Flatsome vẽ
   mũi tên select2 bằng background-image */
.woocommerce-checkout form.checkout .input-text,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid var(--ogf-border);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: none;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
}

/* Padding khung select2 (11.25px) + padding chữ (14px) cộng dồn →
   bỏ padding trái của khung để chữ thẳng hàng với ô nhập */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    padding-left: 0;
}

.woocommerce-checkout .select2-container--default .select2-selection__placeholder {
    color: #8a958f;
}

.woocommerce-checkout form.checkout .input-text {
    padding: 0 14px;
}

.woocommerce-checkout form.checkout textarea.input-text {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
}

.woocommerce-checkout form.checkout .input-text:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
    border-color: var(--ogf-green);
    box-shadow: 0 0 0 3px rgba(50, 110, 81, .12);
}

.woocommerce-checkout .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection--single {
    border-color: var(--ogf-red);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    line-height: 44px;
    color: var(--ogf-text);
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 8px;
    height: 44px;
}

/* Dropdown select2 được gắn vào <body> nên không scope theo form */
.select2-dropdown {
    overflow: hidden;
    border-color: var(--ogf-border);
    border-radius: 10px;
    box-shadow: var(--ogf-shadow-lg);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 38px;
    border-color: var(--ogf-border);
    border-radius: 8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--ogf-green);
}

/* Thẻ "Đơn hàng của bạn": viền 2px → thẻ nhẹ */
.woocommerce-checkout .large-5 > .col-inner.has-border {
    padding: 26px !important;
    border: 1px solid var(--ogf-border);
    border-radius: 16px;
    background: #fafcfb;
}

.woocommerce-checkout-review-order-table th {
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--ogf-muted);
    white-space: nowrap;
}

.woocommerce-checkout-review-order-table td.product-name {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ogf-text);
}

.woocommerce-checkout-review-order-table td.product-name .product-quantity {
    color: var(--ogf-green);
    font-weight: 700;
}

.woocommerce-checkout-review-order-table td.product-total .amount {
    color: var(--ogf-text);
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-color: var(--ogf-border);
    font-size: 14.5px;
}

.woocommerce-checkout-review-order-table .order-total th {
    font-size: 16px;
    color: var(--ogf-text);
}

.woocommerce-checkout-review-order-table .order-total .amount {
    font-size: 22px;
    color: var(--ogf-red);
}

/* Phương thức thanh toán: thẻ có nút radio.
   Khi chỉ có 1 phương thức, WooCommerce ẩn radio (style="display: none")
   → vẽ radio giả bằng ::before để khách vẫn thấy "đang được chọn" */
.woocommerce-checkout #payment {
    background: transparent;
}

.woocommerce-checkout #payment ul.wc_payment_methods {
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.woocommerce-checkout #payment .wc_payment_method {
    margin: 0 0 10px;
    padding: 14px 16px;
    list-style: none;
    border: 1.5px solid var(--ogf-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.woocommerce-checkout #payment .wc_payment_method:has(input.input-radio:checked) {
    border-color: var(--ogf-green);
    box-shadow: 0 0 0 3px rgba(50, 110, 81, .1);
}

.woocommerce-checkout #payment .wc_payment_method > label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ogf-text);
    cursor: pointer;
}

.woocommerce-checkout #payment .wc_payment_method > input.input-radio {
    accent-color: var(--ogf-green);
}

.woocommerce-checkout #payment .wc_payment_method > input.input-radio[style*="none"] + label::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 5px solid var(--ogf-green);
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.woocommerce-checkout #payment .payment_box {
    margin: 6px 0 0 28px;
    padding: 0;
    background: none;
    font-size: 13.5px;
    color: var(--ogf-muted);
}

.woocommerce-checkout #payment .payment_box::before {
    display: none;
}

.woocommerce-checkout #payment .payment_box p {
    margin: 0;
}

.woocommerce-checkout #place_order {
    width: 100%;
    min-height: 56px;
    border-radius: 12px;
    font-size: 18px;
    letter-spacing: .05em;
    box-shadow: 0 10px 24px rgba(192, 85, 48, .3);
    transition: filter .2s, transform .15s;
}

.woocommerce-checkout #place_order:hover {
    filter: brightness(.93);
    transform: translateY(-1px);
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ogf-muted);
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--ogf-green);
}


/* ------------------------------------------------------------
   13. RESPONSIVE — MINI-CART / GIỎ HÀNG / THANH TOÁN
   ------------------------------------------------------------ */

@media (min-width: 850px) {
    /* Tóm tắt đơn hàng dính theo khi cuộn form dài */
    .woocommerce-checkout .large-5 > .col-inner.has-border {
        position: sticky;
        top: 110px;
    }
}

@media (max-width: 849px) {
    /* iOS tự zoom khi focus ô có font < 16px → giữ 16px trên mobile */
    .woocommerce-checkout form.checkout .input-text,
    .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
    .woocommerce-cart .ux-cart-coupon #coupon_code {
        font-size: 16px;
    }

    .woocommerce-cart .cart-collaterals .cart-sidebar,
    .woocommerce-checkout .large-5 > .col-inner.has-border {
        padding: 18px !important;
    }
}

@media (max-width: 549px) {
    .woocommerce-cart table.shop_table.cart td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Thẻ bọc .continue-shopping đang float trái → full width để 2 nút đều nhau */
    .woocommerce-cart td.actions .continue-shopping {
        float: none;
        width: 100%;
    }

    .woocommerce-cart td.actions .button {
        width: 100%;
        margin: 0 0 8px !important;
    }
}