@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ============================================================
   PIN HOÀNG LONG — lớp giao diện (design system)
   Chuyển bộ artboard Claude Design sang theme Ninico.
   File này nạp SAU theme.css và custom.css nên luôn thắng cascade.
   Gỡ bỏ = xoá 1 dòng 'hl-design-css' trong platform/themes/ninico/config.php
   ============================================================ */

:root {
    /* nền & bề mặt */
    --hl-bg: #F3EBDA;
    --hl-surface: #FFFFFF;
    --hl-surface-2: #FFFCF4;
    --hl-tile: #FFF7E3;

    /* chữ */
    --hl-ink: #2B2418;
    --hl-ink-strong: #3D2C08;
    --hl-ink-2: #5C5344;
    --hl-muted: #8A7A5E;

    /* đường viền */
    --hl-line: #F0E7D5;
    --hl-line-2: #E4DAC4;

    /* vàng chủ đạo */
    --hl-gold-1: #FFC53D;
    --hl-gold-2: #F0A202;
    --hl-gold-soft: #FFF3D6;
    --hl-gold-ink: #8A4E06;
    --hl-grad: linear-gradient(135deg, #FFC53D, #F0A202);
    --hl-grad-head: linear-gradient(135deg, #FFD874 0%, #F9BE43 55%, #F4AE2A 100%);

    /* nhấn */
    --hl-price: #C4472F;
    --hl-link: #A8620A;
    --hl-green: #215F45;
    --hl-green-soft: #DCF2E6;

    /* hình khối */
    --hl-r-card: 22px;
    --hl-r-md: 16px;
    --hl-r-sm: 12px;
    --hl-shadow: 0 6px 20px rgba(163, 124, 32, .09);
    --hl-shadow-lg: 0 10px 30px rgba(196, 145, 20, .22);
    --hl-shadow-sm: 0 3px 12px rgba(163, 124, 32, .08);

    /* ghi đè biến gốc của theme */
    --primary-color: #F0A202;
    --primary-color-rgb: 240, 162, 2;
    --primary-font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
}

/* ---------- 1. Nền trang & chữ ---------- */

body {
    background: var(--hl-bg);
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    color: var(--hl-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.tpsection__title, .tpproduct__title {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    color: var(--hl-ink-strong);
    letter-spacing: -.01em;
}

a { color: var(--hl-link); }
a:hover { color: var(--hl-gold-ink); }

/* ---------- 2. Header — thẻ gradient vàng bo góc ---------- */

.mainmenuarea,
.header-area .mainmenuarea {
    background: var(--hl-grad-head);
    border-radius: var(--hl-r-card);
    box-shadow: var(--hl-shadow-lg);
    margin: 14px auto 0;
    max-width: 1280px;
    padding: 6px 10px;
    border: none;
}

.header-top-area,
.header-area .header-top {
    background: transparent;
    color: #6B4405;
    font-weight: 600;
}

.header-top-area a,
.header-area .header-top a { color: #6B4405; }

.mainmenu > nav > ul > li > a,
.mainmenu ul li a {
    color: #4A3208;
    font-weight: 600;
}

.mainmenu > nav > ul > li > a:hover { color: #7A5510; }

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

/* ô tìm kiếm trên header */
.mainmenu__search-bar,
.form--quick-search {
    background: #fff;
    border-radius: var(--hl-r-md);
    box-shadow: 0 6px 18px rgba(140, 95, 10, .16);
    border: none;
}

.mainmenu__search-bar input,
.form--quick-search input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--hl-ink);
}

.mainmenu__search-bar button,
.form--quick-search button {
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
    border: none;
    border-radius: var(--hl-r-sm);
    font-weight: 800;
    padding: 10px 24px;
}

/* icon giỏ hàng / tài khoản */
.header-meta__value,
.header-meta ul li a {
    color: #6B4405;
}

.header-meta .cart-count-icon,
.header-meta__cart .tp-cart-count {
    background: var(--hl-price);
    color: #fff;
    border: 2px solid #FFD874;
    font-weight: 700;
}

/* ---------- 3. Khối nội dung dạng thẻ ---------- */

.product-area,
.blog-area,
.tpshop,
.product__details-wrapper,
.cart-area,
.checkout-area,
.customer-dashboard,
.tp-shop-details {
    background: transparent;
}

.tpshop__sidebar,
.shop-widget,
.product__details-images,
.tp-blog-item,
.tpproduct,
.cart-wrapper,
.checkout-wrapper {
    background: var(--hl-surface);
    border-radius: var(--hl-r-card);
    box-shadow: var(--hl-shadow);
}

/* ---------- 4. Thẻ sản phẩm ---------- */

.tpproduct {
    background: var(--hl-surface);
    border-radius: var(--hl-r-md);
    box-shadow: var(--hl-shadow-sm);
    overflow: hidden;
    padding: 0 0 12px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.tpproduct:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(163, 124, 32, .16);
}

.tpproduct__thumb {
    background: linear-gradient(150deg, #FFFBEF 0%, #FFF0C9 100%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--hl-r-md) var(--hl-r-md) 0 0;
}

.tpproduct__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* nhãn giảm giá — góc phải trên, kiểu sàn TMĐT */
.tpproduct__thumb-topsall {
    border-radius: 0 0 11px 0 !important;
    padding: 4px 8px !important;
    font-size: 11px;
    font-weight: 800;
}

.product__badge-list {
    top: 0;
    left: 0;
    z-index: 3;
}

.tpproduct__content {
    padding: 10px 12px 0;
}

.tpproduct__title {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.tpproduct__title a { color: #3A3327; }
.tpproduct__title a:hover { color: var(--hl-link); }

.tpproduct__priceinfo-list span {
    font-size: 16px;
    font-weight: 800;
    color: var(--hl-price);
    letter-spacing: -.01em;
}

.tpproduct__priceinfo-list-oldprice {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #756B59 !important;
    text-decoration: line-through;
    margin-left: 6px;
}

.tpproduct__cart a {
    background: var(--hl-gold-soft);
    color: var(--hl-gold-ink);
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 12px;
}

.tpproduct__cart a:hover {
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
}

.tpproduct__thumb-action a {
    background: rgba(255, 255, 255, .92);
    color: var(--hl-gold-ink);
    border-radius: 10px;
}

.tpproduct__thumb-action a:hover {
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
}

/* ---------- 5. Nút ---------- */

.tp-btn,
.tpsecondary-btn,
.tp-btn-2,
.btn-primary,
.tp-product-details-btn,
button[type="submit"].tp-btn {
    background: var(--hl-grad);
    color: var(--hl-ink-strong) !important;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(196, 145, 20, .28);
    transition: filter .15s ease;
}

.tp-btn:hover,
.tpsecondary-btn:hover,
.btn-primary:hover {
    filter: brightness(1.05);
    color: var(--hl-ink-strong) !important;
}

.tp-btn-outline,
.btn-outline-primary {
    background: var(--hl-gold-soft);
    border: 1.5px solid #F0C862;
    color: var(--hl-gold-ink) !important;
    border-radius: 14px;
    font-weight: 800;
}

/* ---------- 6. Breadcrumb ---------- */

.breadcrumb__area,
.breadcrumb-area {
    background: transparent !important;
    padding: 8px 0 !important;
}

.breadcrumb__title,
.breadcrumb-title {
    color: var(--hl-ink-strong);
    font-weight: 800;
    letter-spacing: -.02em;
}

.breadcrumb__list span,
.breadcrumb li,
.breadcrumb li a {
    font-size: 12.5px;
    color: var(--hl-muted);
}

.breadcrumb li.active,
.breadcrumb__list span.active {
    color: var(--hl-ink-strong);
    font-weight: 700;
}

/* ---------- 7. Sidebar lọc ---------- */

.shop-widget,
.tpshop__widget,
.sidebar__widget {
    background: var(--hl-surface);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--hl-shadow);
    border: none;
    margin-bottom: 12px;
}

.shop-widget__title,
.sidebar__widget-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--hl-ink-strong);
    margin-bottom: 12px;
}

.shop-widget input[type="text"],
.shop-widget input[type="number"] {
    border: 1px solid var(--hl-line);
    border-radius: 10px;
    background: var(--hl-surface-2);
    padding: 9px 10px;
    font-size: 12px;
}

/* ---------- 8. Trang chi tiết sản phẩm ---------- */

.product__details-price,
.tpproduct__details-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--hl-price);
    letter-spacing: -.02em;
}

.product__details-price del,
.tpproduct__details-price del {
    font-size: 15px;
    color: #756B59;
    font-weight: 400;
}

.product__details-title,
.tpproduct__details-title {
    font-size: 25px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--hl-ink);
}

.product__details-images,
.product__details-thumb {
    background: var(--hl-tile);
    border-radius: 20px;
    overflow: hidden;
}

.tpproductdetails__tabnavarea,
.product__details-tab {
    background: var(--hl-surface);
    border-radius: var(--hl-r-card);
    padding: 20px 22px;
    box-shadow: var(--hl-shadow);
}

/* thông số kỹ thuật */
.product__details-attributes table td,
.tpproductdetails table td {
    border-bottom: 1px dashed #F5EBD3;
    font-size: 13px;
    padding: 8px 0;
}

/* ---------- 9. Blog ---------- */

.tp-blog-item,
.blog__item {
    background: var(--hl-surface);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--hl-shadow-sm);
    border: none;
}

.tp-blog-item__thumb img,
.blog__thumb img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.tp-blog-item__title a,
.blog__title a {
    font-size: 15.5px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--hl-ink);
}

.tp-blog-item__meta,
.blog__meta {
    font-size: 12px;
    color: #756B59;
}

/* ---------- 10. Footer — thẻ trắng bo góc ---------- */

.footer-area,
.main-footer {
    background: var(--hl-surface) !important;
    border-radius: 26px;
    box-shadow: var(--hl-shadow);
    max-width: 1280px;
    margin: 14px auto 30px;
    padding: 30px 34px 22px !important;
    color: var(--hl-ink-2);
}

.footer-area h4,
.footer-area .footer-widget__title,
.main-footer h4 {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--hl-ink-strong);
    text-transform: uppercase;
}

.footer-area a,
.main-footer a {
    color: #6E6455;
    font-size: 13px;
}

.footer-area a:hover,
.main-footer a:hover { color: var(--hl-link); }

.footer-company-name { color: var(--hl-ink-strong); font-weight: 800; }
.footer-company-detail, .footer-company-info { color: #6E6455; font-size: 12.5px; line-height: 1.8; }

.footer-copyright {
    border-top: 1px solid var(--hl-line);
    color: #756B59;
    font-size: 12px;
    padding-top: 14px;
}

.newsletter-form input {
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-line);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
}

/* ---------- 11. Thanh điều hướng dưới (mobile) ---------- */

.tp-bottom-menu,
.navigation-bar,
.bottom-mobile-menu {
    background: #fff;
    border-top: 1px solid var(--hl-line);
    box-shadow: 0 -4px 16px rgba(163, 124, 32, .08);
}

.tp-bottom-menu a,
.navigation-bar a {
    color: #756B59;
    font-size: 10px;
    font-weight: 700;
}

.tp-bottom-menu a.active,
.navigation-bar a.active { color: var(--hl-link); }

/* ---------- 12. Phân trang ---------- */

.basic-pagination ul li a,
.pagination li a,
.page-link {
    min-width: 38px;
    height: 38px;
    border-radius: var(--hl-r-sm);
    background: #fff;
    color: var(--hl-ink-2);
    font-weight: 700;
    border: none;
    box-shadow: 0 3px 10px rgba(163, 124, 32, .08);
    display: grid;
    place-items: center;
}

.basic-pagination ul li.active a,
.pagination li.active .page-link,
.page-item.active .page-link {
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
}

/* ---------- 13. Chip / nhãn / thẻ nhỏ ---------- */

.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 10px;
    background: var(--hl-gold-soft);
    color: var(--hl-gold-ink);
    font-size: 11.5px;
    font-weight: 800;
}

.hl-chip--green { background: var(--hl-green-soft); color: var(--hl-green); }
.hl-chip--red { background: #FFE6E0; color: #A8291A; }

/* ---------- 14. Bảng giỏ hàng / thanh toán ---------- */

.cart-area table,
.checkout-area table,
.table-content table {
    background: #fff;
    border-radius: var(--hl-r-md);
    overflow: hidden;
}

.table-content table th {
    background: var(--hl-gold-soft);
    color: var(--hl-ink-strong);
    font-weight: 800;
    font-size: 12.5px;
    border: none;
}

.table-content table td {
    border-bottom: 1px solid var(--hl-line);
    font-size: 13px;
}

.cart-page-total,
.your-order,
.checkout-summary {
    background: var(--hl-surface);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: var(--hl-shadow);
    border: none;
}

/* ---------- 15. Form ---------- */

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], textarea, select {
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-sm);
    background: var(--hl-surface-2);
    font-size: 13.5px;
    color: var(--hl-ink);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--hl-gold-2);
    box-shadow: 0 0 0 3px rgba(240, 162, 2, .15);
    outline: none;
}

/* ---------- 16. Điều chỉnh theo màn hình ---------- */

@media (max-width: 991px) {
    .mainmenuarea { margin: 8px 10px 0; border-radius: 18px; }
    .footer-area, .main-footer { margin: 10px 10px 20px; border-radius: 20px; padding: 22px 18px 16px !important; }
    .tpproduct__title { font-size: 12px; min-height: 34px; }
    .tpproduct__priceinfo-list span { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .tpproduct, .tp-btn, .tpsecondary-btn { transition: none !important; }
}

/* ---------- 17. Sale popup ("… đã mua") ---------- */

.sale-popup-section .sale-popup-container-wrap {
    background: var(--hl-surface);
    border: 1px solid var(--hl-line-2);
    border-radius: var(--hl-r-md);
    box-shadow: var(--hl-shadow-lg);
    overflow: hidden;
}

/* vạch gradient vàng trên đầu thẻ, đồng bộ nhận diện */
.sale-popup-section .sale-popup-container-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hl-grad);
}

.sale-popup-section .sale-popup-thumb {
    padding: 12px;
}

.sale-popup-section .sale-popup-thumb .js-sale-popup-a {
    background: var(--hl-tile);
    border: 1px solid var(--hl-line);
    border-radius: var(--hl-r-sm);
    padding: 5px;
}

.sale-popup-section .sale-popup-thumb img {
    display: block;
    width: 62px;
    height: 62px;
    max-width: none;
    object-fit: contain;
    border-radius: 8px;
}

.sale-popup-section .sale-popup-info .sale-popup-location {
    color: var(--hl-muted);
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 3px;
}

.sale-popup-section .sale-popup-info .sale-popup-location .js-sale-popup-location {
    color: var(--hl-ink-strong);
    font-size: 13px;
    font-weight: 700;
}

.sale-popup-section .sale-popup-title {
    color: var(--hl-link);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    margin-bottom: 6px;
    text-transform: none;
}

.sale-popup-section .sale-popup-title:hover {
    color: var(--hl-gold-ink);
}

.sale-popup-section .sale-popup-ago {
    gap: 8px;
}

.sale-popup-section .sale-popup-ago .sale-popup-time {
    color: var(--hl-muted);
    font-size: 12px;
}

/* chip "Đã xác minh" màu xanh dịu theo hệ màu HL */
.sale-popup-section .sale-popup-ago .sale-popup-verify {
    background: var(--hl-green-soft);
    color: var(--hl-green);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    font-size: 11.5px;
    font-weight: 700;
    gap: 5px;
    white-space: nowrap;
}

.sale-popup-section .sale-popup-ago .sale-popup-verify svg,
.sale-popup-section .sale-popup-ago .sale-popup-verify i {
    color: var(--hl-green);
    width: 15px;
    height: 15px;
    font-size: 15px;
}

/* nút đóng + nút xem nhanh: tròn, nhẹ, đúng tông */
.sale-popup-section .sale-popup-container-wrap a.pa {
    align-items: center;
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-line);
    border-radius: 999px;
    color: var(--hl-muted);
    display: inline-flex;
    font-size: 14px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    top: 10px;
    inset-inline-end: 10px;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
    width: 24px;
}

.sale-popup-section .sale-popup-container-wrap a.pa svg {
    width: 14px;
    height: 14px;
}

.sale-popup-section .sale-popup-container-wrap a.pa:hover {
    background: var(--hl-gold-soft);
    border-color: var(--hl-line-2);
    color: var(--hl-ink-strong);
}

.sale-popup-section .sale-popup-container-wrap a.sale-popup-quick-view {
    background: var(--hl-gold-soft);
    border-color: var(--hl-line-2);
    color: var(--hl-gold-ink);
    margin: 8px 0;
    opacity: 0;
}

.sale-popup-section .sale-popup-container-wrap:hover a.sale-popup-quick-view,
.sale-popup-section .sale-popup-container-wrap:focus-within a.sale-popup-quick-view {
    opacity: 1;
}

/* thiết bị không có hover (tablet ≥768px): luôn hiện nút xem nhanh */
@media (hover: none) {
    .sale-popup-section .sale-popup-container-wrap a.sale-popup-quick-view {
        opacity: 1;
    }
}

.sale-popup-section .sale-popup-container-wrap a.sale-popup-quick-view:hover {
    background: var(--hl-grad);
    color: var(--hl-ink-strong);
}