/**

 * Xuan Cuong Handicraft - Module: pages.css

 * Subpages (Shop, Detail, About, Custom Orders, Journal, Single, Contact, FAQ, Search)

 */


/* ==========================================================================
   PAGE: SHOP CATALOG (SẢN PHẨM - designs/Sản phẩm.png)
   ========================================================================== */
.page-shop {
    background-color: #FFFFFF;
    padding: 0 0 90px 0;
}

/* 1. Hero Section */
.shop-hero-banner {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
    background-color: #0B0B0D;
}

.shop-parallax-bg {
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 150%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.shop-hero-inner,
.shop-hero-content {
    display: flex;
    justify-content: start;
    align-items: end;
    width: 100%;
    max-width: 1680px;
    padding: 120px 120px 0 120px;
    /* Nằm trên lớp nền parallax (.shop-parallax-bg z-index 1), nếu không tiêu đề bị che */
    position: relative;
    z-index: 2;
}

.shop-hero-title {
    color: var(--text-white, #FFF);
    /* heading-title */

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    text-align: center;
}

.shop-container {
    max-width: 1502px;
    margin: 0 auto;
    padding: 0 2rem;
}

.shop-layout-grid {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* 2. Sidebar Filters */
.shop-sidebar-filter {
    height: fit-content;
    display: flex;
    padding: var(--spacing-spacer, 32px);
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-large, 12px);
    background: #F6F6F7;
    box-sizing: border-box;
    width: 100%;
    border-right: none;
}

.filter-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    align-self: stretch;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.filter-main-heading {
    border-radius: var(--radius-large, 12px);
    background: #F6F6F7;
    color: var(--text-black, #1E262B);

    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.btn-clear-filters {
    color: var(--primary-color, #811);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.btn-clear-filters:hover {
    opacity: 0.8;
}

/* Search input */
.filter-search-box {
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.10);
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.filter-search-box .search-icon {
    color: #161519;
    font-size: 15px;
    flex-shrink: 0;
}

.filter-search-input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0;
    color: #161519;
    /* content-sub */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
}

.filter-search-input::placeholder {
    color: rgba(22, 21, 25, 0.6);

    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 28px;
}

/* Filter Groups (DANH MỤC & LOẠI, etc.) */
.filter-group {
    width: 100%;
    align-self: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 16px 0;
    margin-bottom: 0;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding-bottom: 12px;
}

.filter-group-header .group-name {
    color: var(--text-black, #1E262B);
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
}

.filter-group-header .toggle-arrow,
.filter-group-header i {
    color: var(--text-black, #1E262B);
    font-size: 14px;
    transition: transform 0.25s ease;
}

.filter-group:not(.open) .filter-checkbox-list,
.filter-group.is-collapsed .filter-checkbox-list {
    display: none;
}

.filter-group:not(.open) .toggle-arrow,
.filter-group.is-collapsed .filter-group-header i {
    transform: rotate(180deg);
}

.filter-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-checkbox-list li {
    margin: 0;
}

/* Checkbox căn theo dòng đầu để nhãn xuống 2 dòng không làm lệch khoảng cách */
.custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #C4BEB2;
    border-radius: 4px;
    background-color: #FFFFFF;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    /* (line-height 28px - 20px) / 2 */
    margin-top: 4px;
    transition: all 0.2s ease;
}

.custom-checkbox input:checked~.checkmark {
    background-color: var(--primary-color, #881111);
    border-color: var(--primary-color, #881111);
}

.custom-checkbox input:checked~.checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Các checkbox dạng uncheck */
.custom-checkbox .label-text {
    color: var(--text-gray, #60606B);
    /* content-sub */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    transition: color 0.2s ease;
}

/* Label của checkbox đã checked */
.custom-checkbox input:checked~.label-text,
.custom-checkbox:has(input:checked) .label-text {
    color: var(--text-black, #1E262B);
    /* content-sub */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
}

/* 3. Catalog Main Area & Dropdowns */
.shop-main-catalog {
    min-width: 0;
}

.catalog-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    gap: 16px;
}

.results-count {
    color: var(--text-gray, #60606B);

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.catalog-sort-group {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* Các dropdown chọn bộ lọc (Figma Node: Filter Dropdowns) */
.catalog-filter-dropdown {
    position: relative;
}

.catalog-dropdown-trigger {
    background: #F6F6F7;
    border-radius: 8px;
    border: none;
    outline: none;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.catalog-dropdown-trigger:hover,
.catalog-filter-dropdown.is-open .catalog-dropdown-trigger {
    background: #EEEEF0;
}

.catalog-dropdown-trigger .trigger-label {
    color: var(--text-black, #1E262B);
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
}

.catalog-dropdown-trigger .dropdown-chevron {
    width: 12px;
    height: 8px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.catalog-filter-dropdown.is-open .dropdown-chevron {
    transform: rotate(180deg);
}

/* Dropdown Menu Panel */
.catalog-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 244px;
    padding: 24px;
    border-radius: var(--radius-large, 12px);
    background: #F6F6F7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.catalog-filter-dropdown.is-open .catalog-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-panel-title {
    color: var(--text-black, #1E262B);

    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin: 0 0 16px 0;
}

.dropdown-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.dropdown-panel-list li {
    margin: 0;
}

.dropdown-panel-list .custom-checkbox {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dropdown-panel-list .custom-checkbox .label-text {
    font-size: var(--fs-body);
    line-height: 28px;
    font-weight: 500;
    color: var(--text-gray, #60606B);
}

.dropdown-panel-list .custom-checkbox input:checked~.label-text,
.dropdown-panel-list .custom-checkbox:has(input:checked) .label-text {
    color: var(--text-black, #1E262B);
}

/* 4. Products Grid & Card */
.catalog-grid-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.catalog-product-item {
    display: flex;
    flex-direction: column;
}

/* Card sản phẩm: ảnh */
.catalog-product-item .item-thumb-link {
    border-radius: var(--radius-middle, 8px);
    background: lightgray 0px -130.185px / 100% 151.355% no-repeat;
    display: flex;
    height: 291px;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 140px;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.catalog-product-item .item-thumb-link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

/* Ảnh của các sản phẩm ở đây khi hover vào đều có hiệu ứng zoom to */
.catalog-product-item:hover .item-thumb-link img {
    transform: scale(1.08);
}

.catalog-product-item .item-info {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* Card sản phẩm: tên */
.catalog-product-item .item-title {
    margin: 0;
}

.catalog-product-item .item-title a {
    color: var(--text-black, #1E262B);
    /* content-title-2 */

    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-product-item .item-title a:hover {
    color: var(--primary-color, #881111);
}

/* Card sản phẩm: giá */
.catalog-product-item .item-price {
    color: var(--text-black, #1E262B);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    display: block;
}

/* Pagination */
.catalog-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 36px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.catalog-pagination .page-indicator {

    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--text-black, #1E262B);
}

.catalog-pagination .page-nav-arrows {
    display: flex;
    align-items: center;
    gap: 32px;
}

.catalog-pagination .nav-arrow-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-black, #1E262B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.catalog-pagination .nav-arrow-btn svg {
    display: block;
    width: 22px;
    height: 22px;
}

.catalog-pagination .nav-arrow-btn:hover {
    color: var(--primary-color, #881111);
}

.catalog-pagination .nav-arrow-btn.prev-page-btn:hover {
    transform: translateX(-3px);
}

.catalog-pagination .nav-arrow-btn.next-page-btn:hover {
    transform: translateX(3px);
}


/* ==========================================================================
   PAGE: PRODUCT DETAIL (CHI TIẾT SẢN PHẨM - FIGMA MATCH)
   ========================================================================== */
.product-detail-page {
    padding: 4rem 0;
    background-color: #FFFFFF;
}

/* 1. Breadcrumb */
.product-breadcrumb {
    margin-bottom: 2rem;
    font-family: var(--font-sans);
    font-size: 18px;
    color: #60606B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-breadcrumb .back-link {
    color: #1E262B;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

.product-breadcrumb .back-link:hover {
    color: var(--primary-color, #811);
}

.product-breadcrumb .sep {
    color: #A0A0A5;
}

.product-breadcrumb .current-crumb {
    color: #1E262B;
    font-weight: 700;
}

/* 2. Main Product Layout (Gallery + Buy Box) */
.product-main-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem;
    margin-bottom: 5rem;
    align-items: flex-start;
}

/* Left: Gallery */
.product-gallery-wrap {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.product-thumbs-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 76px;
    flex-shrink: 0;
}

.product-thumbs-column .thumb-btn {
    width: 76px;
    height: 76px;
    border: 1.5px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #F4F4F5;
    padding: 0;
    transition: border-color 0.2s, opacity 0.2s;
}

.product-thumbs-column .thumb-btn.is-active,
.product-thumbs-column .thumb-btn:hover {
    border-color: #1E262B;
}

.product-thumbs-column .thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-main-image-wrap {
    position: relative;
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    background-color: #F7F5EF;
}

.product-main-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-zoom-trigger {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    z-index: 5;
}

.product-zoom-trigger img {
    width: 32px;
    height: 32px;
}

.product-zoom-trigger:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

/* ==========================================================================
   Product Gallery Lightbox Modal
   ========================================================================== */
.product-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.product-gallery-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.pg-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 17, 19, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: zoom-out;
}

.pg-lightbox-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.pg-lightbox-container>* {
    pointer-events: auto;
}

/* Lightbox Header */
.pg-lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 12px;
}

.pg-lightbox-counter {
    color: #D6BF89;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(214, 191, 137, 0.3);
}

.pg-lightbox-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.pg-lightbox-close:hover {
    background: #D6BF89;
    color: #1E262B;
    transform: rotate(90deg) scale(1.05);
}

/* Lightbox Stage */
.pg-lightbox-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 0;
}

.pg-lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 86vw;
    max-height: calc(100vh - 210px);
    margin: 0 60px;
}

.pg-lightbox-img-wrap img {
    max-width: 100%;
    max-height: calc(100vh - 210px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Lightbox Nav Arrows */
.pg-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s, color 0.2s;
    z-index: 5;
}

.pg-lightbox-prev {
    left: 8px;
}

.pg-lightbox-next {
    right: 8px;
}

.pg-lightbox-nav:hover {
    background: #D6BF89;
    color: #1E262B;
    border-color: #D6BF89;
    transform: translateY(-50%) scale(1.08);
}

/* Lightbox Bottom Thumbnails */
.pg-lightbox-thumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1280px;
    margin: 14px auto 0;
    overflow-x: auto;
    padding: 6px 12px;
    scrollbar-width: thin;
}

.pg-lightbox-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: #111;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

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

.pg-lightbox-thumb.is-active,
.pg-lightbox-thumb:hover {
    opacity: 1;
    border-color: #D6BF89;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(214, 191, 137, 0.35);
}


/* Right: Buy Box */
.product-buy-box {
    display: flex;
    flex-direction: column;
    padding-left: 0.5rem;
}

.product-name-heading {
    font-size: var(--fs-title-lg);
    font-weight: 700;
    color: #1E262B;
    line-height: 1.25;
    margin: 0 0 0.75rem 0;
}

.product-price-tag {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-price);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Term badges / Pill tags */
.product-pills-row {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2rem;
}

.product-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(144, 145, 156, 0.15);
    color: var(--text-black, #1E262B);
    text-align: center;

    /* Nhỏ hơn giá (--fs-price) một bậc để cân với tên & giá sản phẩm */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
}

/* Short Description */
.product-short-desc {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.product-short-desc p {
    margin: 0;
}

.product-short-desc strong {
    font-weight: 600;
    margin-right: 4px;
}

/* Attributes Specs Table */
.product-meta-specs {
    border-top: 1px solid #ECECED;
    border-bottom: 1px solid #ECECED;
    margin-top: 1.5rem;
    margin-bottom: 4rem;
}

.product-meta-specs .spec-row {
    display: flex;
    align-items: center;
    padding: 13px 0;
    font-family: var(--font-sans);
    font-size: 14px;
    border-bottom: 1px solid #ECECED;
}

.product-meta-specs .spec-row:last-child {
    border-bottom: none;
}

.product-meta-specs .spec-label {
    width: 140px;
    flex-shrink: 0;
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.product-meta-specs .spec-val {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

/* Action Buttons Group */
.product-actions-group {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.btn-detail-rfq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color, #801416);
    color: #FFFFFF;

    font-size: 18px;
    font-weight: 600;
    padding: 13px 30px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(128, 20, 22, 0.15);
}

.btn-detail-rfq:hover {
    background-color: #6a1012;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-detail-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E262B;

    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.btn-detail-custom .arrow {
    display: inline-block;
    transition: transform 0.2s;
}

.btn-detail-custom:hover {
    color: var(--primary-color, #801416);
}

.btn-detail-custom:hover .arrow {
    transform: translateX(4px);
}

/* 3. Section: Customer Reviews ("Đánh giá của khách hàng") */
.section-product-reviews {
    margin: 5rem 0 6rem 0;
}

/* Mô tả chi tiết sản phẩm (nội dung bài viết: thông số, lưu ý, cách bảo quản) */
a.product-tag-pill {
    text-decoration: none;
}

.product-full-desc {
    max-width: 940px;
    margin: 0 0 4rem;
}

.product-full-desc-title {
    font-family: var(--font-main);
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.product-full-desc ul {
    padding-left: 1.25rem;
    margin: 0 0 1.5rem;
}

.product-full-desc li {
    margin-bottom: 0.4rem;
}

.product-full-desc h3 {
    font-family: var(--font-main);
    font-size: 22px;
    font-weight: 600;
    margin: 1.75rem 0 0.75rem;
}

.reviews-layout-grid {
    padding: 5rem 0;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}

.reviews-intro-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reviews-script {
    color: var(--brown, #534833);
    font-family: "Luxurious Script";
    font-size: var(--fs-script);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.reviews-main-title {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.reviews-nav-arrows {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rev-arrow-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #1E262B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.rev-arrow-btn:hover {
    background-color: #F4F4F5;
    color: var(--primary-color, #801416);
    transform: scale(1.05);
}

.rev-arrow-btn.swiper-button-disabled,
.rev-arrow-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.reviews-cards-slider:not(.swiper) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

.review-slide-card {
    max-width: 480px;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: #2D3748;
}

.review-slide-card .review-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.review-slide-card .review-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.review-slide-card:hover .review-card-media img {
    transform: scale(1.04);
}

.review-card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 32px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.4);
}

.review-card-caption p {
    color: var(--text-white, #FFF);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin: 0;
}

/* 4. Section: Related Products ("Sản phẩm liên quan") */
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
}

/* Column 1: Red Banner Card */
/* Không dùng overflow: hidden để aspect-ratio tự giãn khi tiêu đề dài hơn khung */
.related-banner-card {
    position: relative;
    aspect-ratio: 33 / 52;
    background: linear-gradient(135deg, #5F070A 0%, #811115 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 1.5rem;
}

.related-banner-noise {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url('../../images/noise-bg-red.png');
    background-repeat: repeat;
    opacity: 0.85;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.related-banner-content {
    position: relative;
    z-index: 2;
}

.related-banner-title {
    color: var(--text-white, #FFF);
    font-size: var(--fs-title-lg);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Columns 2, 3, 4: Related Product Cards */
/* Wrapper chỉ dùng cho hàng cuộn ngang ở mobile (mobile.css); desktop/tablet card nằm trực tiếp trong lưới */
.related-products-track {
    display: contents;
}

.related-product-card {
    position: relative;
    aspect-ratio: 33 / 52;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    background-color: #2D3748;
}

.related-product-card .related-product-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.related-product-card .related-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.related-product-card:hover .related-product-thumb img {
    transform: scale(1.06);
}

.related-product-card .related-product-overlay {
    position: relative;
    z-index: 2;
    backdrop-filter: blur(2px);
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    background: rgba(0, 0, 0, 0.40);
}

.related-product-title {
    font-size: var(--fs-body);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Mobile Filter Toggle Button (Shop Page)
   ========================================================================== */
.mobile-filter-toggle-btn {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #1E262B;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;

    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 24px;
    box-sizing: border-box;
    transition: background 0.2s;
}

.mobile-filter-toggle-btn svg {
    flex-shrink: 0;
}

.mobile-filter-toggle-btn .filter-toggle-chevron {
    transition: transform 0.25s ease;
    font-size: 14px;
}

.mobile-filter-toggle-btn.is-active .filter-toggle-chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   RESPONSIVE: TRANG SẢN PHẨM & CHI TIẾT SẢN PHẨM
   ========================================================================== */


/* ==========================================================================
   PAGE: ABOUT US (VỀ CHÚNG TÔI)
   ========================================================================== */
.about-hero-section {
    background-color: var(--xc-primary, #881111);
    max-height: 960px;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 560px;
}

.about-hero-text {
    position: relative;
    padding: 5rem 3.5rem 5rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
    display: flex;
    align-items: flex-end;
    background-color: var(--xc-primary, #881111);
}

.watermark-handicraft {
    position: absolute;
    left: -20px;
    opacity: 0.08;
    bottom: 15%;
    transform: translateY(-50%) rotate(-90deg);
    color: var(--text-white, #FFF);
    font-family: "Luxurious Script";
    font-size: 300px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.about-hero-text-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.about-hero-title {
    color: var(--text-white, #FFF);
    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 16px;
}

.about-hero-desc {
    color: var(--yellow, #D6BF89);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.btn-about-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: var(--xc-cta, #D6BF89);
    color: var(--xc-cta-text, #1E262B);
    padding: 0.75rem 1.6rem;
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.btn-about-cta:hover {
    background-color: var(--xc-cta-hover, #E2CCA0);
    color: #000000;
    transform: translateX(3px);
}

.btn-about-cta .arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.btn-about-cta:hover .arrow {
    transform: translateX(4px);
}

.about-hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 960px;
    overflow: hidden;
}

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

/* Brand Story Section */
.about-story-section {
    padding: 5.5rem 0 4.5rem;
    background-color: #FFFFFF;
}

.story-intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.5rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

.story-heading-col .script-accent-dark {
    font-family: var(--font-script, 'Playfair Display', serif);
    font-size: 1.6rem;
    font-style: italic;
    color: #8F7649;
    display: block;
    margin-bottom: 0.4rem;
}

.story-main-title {
    font-size: var(--fs-heading);
    font-weight: 700;
    color: #1E262B;
    line-height: 1.2;
    margin: 0;
}

.story-quote-col p {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.8;
    color: #4A4A4A;
    margin: 0;
}

.story-two-photos {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2.2rem;
    margin-bottom: 4.5rem;
    align-items: stretch;
}

.story-two-photos .photo-left img,
.story-two-photos .photo-right img {
    border-radius: var(--radius-sm, 4px);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.about-stats-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 3.5rem;
    border-top: 1px solid #ECE7DE;
    text-align: center;
}

.about-stats-strip .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-stats-strip .stat-box .num {
    font-size: 2.75rem;
    font-weight: 700;
    color: #1E262B;
    display: block;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.about-stats-strip .stat-box .txt {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: #60606B;
    line-height: 1.4;
}

/* Team / Makers Section */
.about-team-section {
    background-color: #F4F1EA;
    background-image: url('../../images/noise-bg-beige.png');
    background-repeat: repeat;
    padding: 5.5rem 0 6rem;
    position: relative;
}

.team-header {
    margin-bottom: 3rem;
}

.team-header .script-accent-dark {
    font-family: var(--font-script, 'Playfair Display', serif);
    font-size: 1.6rem;
    font-style: italic;
    color: #8F7649;
    display: block;
    margin-bottom: 0.4rem;
}

.team-title {
    font-size: var(--fs-heading);
    font-weight: 700;
    color: #1E262B;
    line-height: 1.2;
    margin: 0;
}

.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
    align-items: stretch;
}

.maker-card {
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

.maker-card-lead {
    background-color: var(--xc-primary, #881111);
}

.maker-card-lead .maker-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.maker-card-lead .maker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.maker-card-info {
    background-color: var(--xc-primary, #881111);
    color: #FFFFFF;
    padding: 1.8rem 1.6rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.maker-card-info .maker-name {
    font-size: 1.45rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 0.25rem 0;
}

.maker-card-info .maker-role {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    display: block;
    margin-bottom: 0.9rem;
    letter-spacing: 0.3px;
}

.maker-card-info .maker-quote {
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.maker-card-simple {
    height: 100%;
}

.maker-card-simple .maker-photo {
    height: 100%;
    min-height: 100%;
}

.maker-card-simple .maker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* About Projects Section (Same styling as Home Journal Section) */
.about-projects-section {
    padding: 5.5rem 0;
    background-color: #FFFFFF;
}

.about-projects-section .journal-entry-desc {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #60606B;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.about-projects-section .journal-date {
    font-size: 14.5px;
    color: #8C8C94;
    margin-bottom: 0.35rem;
}

.about-projects-section .journal-entry-title {
    font-size: 1.45rem;
    line-height: 1.35;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.about-projects-section .journal-entry-title a {
    color: #1E262B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.about-projects-section .journal-entry-title a:hover {
    color: var(--xc-primary, #881111);
}

/* ==========================================================================
   PAGE: CUSTOM & GIFT ORDERS (ĐẶT HÀNG & QUÀ TẶNG - FIGMA MATCH)
   ========================================================================== */

/* 1. Hero Banner */
.order-hero-banner {
    background-color: #534833;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    height: 800px;
    min-height: 800px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
}

/* Lớp noise bên trên */
.order-hero-noise {
    position: absolute;
    inset: 0;
    background-image: url('../../images/noise-bg-red.png');
    background-repeat: repeat;
    opacity: 0.18;
    pointer-events: none;
    z-index: 1;
}

/* Dòng text chìm bên dưới */
.order-hero-watermark {
    position: absolute;
    right: -30px;
    bottom: -60px;
    color: var(--text-white, #FFF);
    font-family: "Luxurious Script", cursive;
    font-size: 300px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}

.order-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
    box-sizing: border-box;
}

.order-hero-layout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
}

/* Ảnh: sát mép trái section, chiều rộng = 50% section, giữ tỷ lệ */
.order-hero-photo-wrap {
    max-height: 600px;
    width: 50vw;
    margin-left: calc(-50vw + 50%);
    /* full-bleed trick: flush with section left edge */
    aspect-ratio: 900 / 560;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0 4px 4px 0;
}

.order-hero-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bên phải ảnh có lớp gradient — chiều cao luôn bằng chiều cao ảnh */
.order-hero-photo-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 57%;
    /* tỷ lệ gốc ≈ 514/900 */
    height: 100%;
    background: linear-gradient(to left, #534833 0%, rgba(0, 0, 0, 0.00) 100%);
    pointer-events: none;
    z-index: 2;
}

.order-hero-content-wrap {
    position: relative;
    z-index: 4;
    margin-left: -220px;
    flex: 1;
    max-width: 620px;
}

/* Title */
.order-hero-heading {
    color: var(--text-white, #FFF);
    /* heading-title */

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 24px 0;
}

/* Desc */
.order-hero-lead {
    color: var(--yellow, #D6BF89);
    /* content-button */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    max-width: 560px;
    margin: 0;
}

/* 2. Section: Sản phẩm quà tặng đã thực hiện */
.section-gift-showcase {
    padding: 5.5rem 0 5rem 0;
    background-color: #FFFFFF;
}

.gift-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
}

.gift-header-left .script-accent-gold {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    font-style: italic;
    color: var(--brown, #534833);
    line-height: 1;
    margin-bottom: 0.25rem;
    display: block;
}

.gift-main-title {

    font-size: var(--fs-title-lg);
    font-weight: 700;
    color: #1E262B;
    line-height: 1.2;
    margin: 0;
}

.view-all-products-link {

    font-size: 18px;
    font-weight: 500;
    color: #1E262B;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, transform 0.2s;
}

.view-all-products-link:hover {
    color: var(--primary-color, #801416);
}

.view-all-products-link:hover .arrow {
    transform: translateX(4px);
}

.gift-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gift-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #1E262B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
    transition: background-color 0.2s, transform 0.15s;
}

.gift-nav-btn:hover {
    background-color: #F4F4F5;
    color: var(--primary-color, #801416);
}

.gift-prev-btn {
    left: -56px;
}

.gift-next-btn {
    right: -56px;
}

.gift-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
    width: 100%;
}

.gift-product-card {
    display: flex;
    flex-direction: column;
}

.gift-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background-color: #F4F4F5;
    margin-bottom: 1rem;
}

.gift-card-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.gift-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gift-product-card:hover .gift-card-media img {
    transform: scale(1.05);
}

.gift-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: #801416;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    z-index: 2;
    pointer-events: none;
}

.gift-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 0.35rem;
}

.gift-price-row .current-price {

    font-size: var(--fs-price);
    font-weight: 700;
    color: #C02626;
}

.gift-price-row .orig-price {

    font-size: 16px;
    color: #8A8A8E;
    text-decoration: line-through;
}

.gift-card-title {

    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.gift-card-title a {
    color: #1E262B;
    text-decoration: none;
    transition: color 0.2s;
}

.gift-card-title a:hover {
    color: var(--primary-color, #801416);
}

/* 3. Section: Khắc logo và đơn số lượng lớn */
.section-custom-logo-bulk {
    padding: 3.5rem 0 5.5rem 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.logo-bulk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    margin-bottom: 5rem;
}

.logo-bulk-title-col {
    flex: 1;
    min-width: 0;
}

.logo-bulk-title-col .script-accent-gold {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    font-weight: 400;
    font-style: normal;
    color: var(--brown, #534833);
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
    display: block;
}

.logo-bulk-heading {

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    color: var(--text-black, #1E262B);
    line-height: normal;
    margin: 0;
}

.logo-bulk-desc-col {
    width: 452px;
    flex: 0 0 452px;
    max-width: 100%;
}

.logo-bulk-desc-col p {

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: var(--text-black, #1E262B);
    margin: 0;
    width: 452px;
    max-width: 100%;
}

.logo-bulk-grid {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 48px;
    width: 100%;
}

/* Ảnh bên trái sử dụng khac-logo.jpg, nằm tràn ra ngoài container */
.logo-bulk-photo-col {
    margin-left: calc(-50vw + 50%);
    width: calc(40vw + 50% - 452px - 48px);
    flex: 0 0 calc(40vw + 50% - 452px - 48px);
    height: 400px;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
}

.logo-bulk-photo-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.logo-bulk-card-col {
    width: 452px;
    flex: 0 0 452px;
    max-width: 100%;
}

.bulk-red-card {
    position: relative;
    width: 452px;
    max-width: 100%;
    height: 400px;
    background: #801416 url('../../images/figma/bulk-red-card-bg.png') no-repeat center / cover;
    overflow: hidden;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    border-radius: 4px;
    box-sizing: border-box;
}

.bulk-red-title {
    color: var(--text-white, #FFF);
    /* content-title-2 */

    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.bulk-red-text {
    color: rgba(255, 255, 255, 0.70);
    /* content-sub */

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    margin: 0;
    max-width: 100%;
}

.bulk-red-cta {
    color: var(--yellow, #D6BF89);
    text-align: center;
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, opacity 0.2s;
}

.bulk-red-cta:hover {
    color: #FFFFFF;
    transform: translateX(4px);
}

.bulk-red-cta svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s;
}

/* 4. Section: Đặt hàng sẵn */
.section-ready-order {
    padding: 5rem 0 5.5rem 0;
    background-color: #FFFFFF;
}

.ready-order-layout {
    display: grid;
    grid-template-columns: 452px minmax(0, 1fr);
    gap: 8rem;
    align-items: flex-start;
}

.ready-order-left .section-title {
    margin: 0;
}

.ready-order-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.contact-label {
    color: var(--text-black, #1E262B);
    text-align: center;
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
}

.contact-block .contact-label {
    color: rgba(255, 255, 255, 0.75);
    text-align: left;
}

.social-pills-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.social-pill-btn {
    border-radius: 8px;
    background: var(--primary-color, #811);
    display: flex;
    padding: var(--spacing-2, 12px) var(--spacing-4, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1, 8px);
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s, opacity 0.2s;
    box-sizing: border-box;
}

.social-pill-btn:hover {
    background-color: #650e10;
    transform: translateY(-2px);
}

.social-pill-btn span {
    color: var(--text-white, #FFF);
    text-align: center;
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    white-space: nowrap;
}

.social-pill-btn img,
.social-pill-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.ready-order-left {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ready-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 50px;
}

.ready-step-col {
    display: flex;
    flex-direction: column;
}

.step-num-line {
    color: var(--text-black, #1E262B);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #60606B;
}

.step-title {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;
}

.step-desc {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

/* 5. Section: Chế tác theo yêu cầu riêng (5 bước + Ảnh hộp) */
.section-custom-process {
    padding: 5rem 0 5.5rem 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.custom-process-header {
    margin-bottom: 0.5rem;
}

.custom-process-header .script-accent-gold {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    font-style: normal;
    font-weight: 400;
    color: var(--brown, #534833);
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
    display: block;
}

.custom-process-heading {

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    color: var(--text-black, #1E262B);
    line-height: normal;
    margin: 0;
}

.custom-process-grid {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Phần nội dung bên trái cao bằng 80% ảnh (80% của 916px = 732.8px), nền có noise-bg-beige */
.custom-process-card {
    flex: 1;
    min-width: 0;
    height: calc(760px * 0.8);
    background-color: #EFF3DD;
    background-image: url('../../images/noise-bg-beige.png');
    padding: 60px 48px 60px var(--edge-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.process-steps-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 60px;
}

/* Item 3 bắt đầu ở cột 1 hàng 2 */
.p-step-item:nth-child(3) {
    grid-column: 1;
}

.p-step-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* Các con số */
.p-step-num {
    border-radius: 30px;
    background: var(--brown, #534833);
    display: flex;
    width: 50px;
    height: 50px;
    padding-bottom: 6px;
    justify-content: center;
    align-items: center;
    color: var(--text-white, #FFF);

    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Item title */
.p-step-title {
    color: var(--text-black, #1E262B);
    /* content-title-2 */

    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 8px 0;
}

/* Desc */
.p-step-desc {
    color: rgba(0, 0, 0, 0.75);
    /* content-sub */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    margin: 0;
}

.process-card-action {
    margin-top: 50px;
}

/* Button */
.btn-brief-gold {
    display: inline-flex;
    padding: var(--spacing-2, 12px) var(--spacing-4, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1, 8px);
    border-radius: 8px;
    background: var(--yellow, #D6BF89);
    color: var(--text-black, #1E262B);
    text-align: center;
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    width: fit-content;
    box-sizing: border-box;
}

.btn-brief-gold:hover {
    background-color: #c9af75;
    transform: translateY(-2px);
}

/* Ảnh bên phải cao 916px, chiều rộng 35% màn hình */
.custom-process-photo {
    width: 35vw;
    flex: 0 0 35vw;
    height: 760px;
    overflow: hidden;
    position: relative;
}

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

/* 6. Section: Form Chế tác theo yêu cầu riêng (Deep Red Section #801416) */
.section-custom-rfq-full {
    position: relative;
    background: linear-gradient(135deg, #5F070A 0%, #811115 100%);
    padding: 5.5rem 0;
    overflow: hidden;
}

.custom-rfq-noise {
    position: absolute;
    inset: 0;
    background-image: url('../../images/noise-bg-red.png');
    background-repeat: repeat;
    opacity: 0.85;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.custom-rfq-container {
    position: relative;
    z-index: 2;
}

.custom-rfq-layout {
    display: grid;
    grid-template-columns: 700px minmax(0, 1fr);
    gap: 40px;
    align-items: flex-start;
}

.rfq-script {
    font-size: var(--fs-script);
    font-style: italic;
    color: #D6BF89;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.rfq-main-heading {
    font-size: var(--fs-heading);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0;
}

.bespoke-order-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.form-row-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    color: var(--text-white, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 8px;
}

.rfq-input,
.rfq-select,
.rfq-textarea {

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    width: 100%;
    padding: 12px 14px;
    color: #FFFFFF;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    border: transparent;
    outline: transparent;
}

.rfq-input::placeholder,
.rfq-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.rfq-input:focus,
.rfq-select:focus,
.rfq-textarea:focus {
    border-color: #D6BF89;
    background-color: rgba(0, 0, 0, 0.35);
}

.select-wrapper {
    position: relative;
}

.rfq-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

.rfq-select option {
    background-color: #4A0B0E;
    color: #FFFFFF;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.date-input-wrapper {
    position: relative;
}

.date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.rfq-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Upload Zone */
.rfq-upload-zone {
    padding: 24px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s, background-color 0.2s;

    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.60);
    background: rgba(255, 255, 255, 0.06);
}

.rfq-upload-zone:hover {
    border-color: #D6BF89;
    background-color: rgba(0, 0, 0, 0.25);
}

.upload-icon {
    color: rgba(255, 255, 255, 0.8);
}

.upload-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

/* Checkbox */
.form-checkbox-group {
    margin-top: 0.25rem;
}

.rfq-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;

    color: var(--text-white, #FFF);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.rfq-checkbox-label input[type="checkbox"] {
    accent-color: #D6BF89;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.rfq-checkbox-label a {
    color: #D6BF89;
    text-decoration: underline;
}

.btn-rfq-submit-gold {
    border: transparent;
    outline: transparent;

    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    border-radius: 8px;
    background: var(--yellow, #D6BF89);
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--text-black, #1E262B);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.btn-rfq-submit-gold:hover {
    background-color: #c7ad73;
    transform: translateY(-1px);
}

/* 7. Section: Câu hỏi thường gặp (FAQ) */
.section-order-faq {
    padding: 5.5rem 0 6rem 0;
    background-color: #FFFFFF;
}

.order-faq-layout {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 40px;
    align-items: flex-start;
}

.order-faq-bottom-link {
    margin-top: 2.5rem;
    text-align: center;
}

.view-all-faq-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;

    color: var(--text-black, #1E262B);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 30px;
}

.view-all-faq-link:hover {
    color: var(--primary-color, #801416);
}

.view-all-faq-link:hover .arrow {
    transform: translateX(4px);
}


/* ==========================================================================
   PAGE: JOURNAL (HERO + DANH SÁCH BÀI VIẾT)
   Exact match with Figma design: designs/Journal.png
   ========================================================================== */
.page-journal {
    background-color: #FFFFFF;
}

/* 1. HERO BANNER (Height 600px) */

@media (max-width: 1520px) {
    .custom-rfq-layout {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .bespoke-order-form {
        gap: 1rem;
    }

    .btn-rfq-submit-gold {
        padding: 8px 20px;
        font-size: 18px;
    }

}

.journal-hero-banner {
    position: relative;
    width: 100%;
    height: 600px;
    background: url('../../images/figma/journal-hero-bg.png') center / cover no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.journal-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}

.journal-hero-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 320px;
    padding-bottom: 0;
}

.journal-hero-content {
    max-width: 680px;
}

.journal-hero-title {
    color: var(--text-white, #FFF);

    font-size: var(--fs-hero);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 12px 0;
}

.journal-hero-desc {
    color: var(--yellow, #D6BF89);

    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* FILTER BUTTONS (3 Tabs aligned bottom right) */
.journal-filter-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 40px;
    width: 100%;
}

.journal-tab-btn {
    display: flex;
    width: 260px;
    padding: 20px var(--spacing-grid-spacer, 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background: var(--brown, #534833);
    color: var(--text-white, #FFF);

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0;
    position: relative;
    user-select: none;
}

.journal-tab-btn .tab-btn-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.journal-tab-btn .tab-close-icon {
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}

/* Nút active: background #D6BF89, width 260px, padding 20px 20px 20px 40px, align-items center, gap 24px, color #1E262B, Alegreya 18px 500 */
.journal-tab-btn.is-active {
    background: var(--yellow, #D6BF89);
    display: flex;
    flex-direction: row;
    width: 260px;
    padding: 20px 20px 20px var(--spacing-grid-spacer, 40px);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--text-black, #1E262B);

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.journal-tab-btn.is-active .tab-close-icon {
    display: inline-flex;
}

/* 2. SECTION: DANH SÁCH BÀI VIẾT */
.section-journal-articles {
    background-color: #FFFFFF;
    padding: 80px 0 100px 0;
}

/* Featured Card (Card nổi bật) */
.journal-featured-post {
    display: flex;
    align-items: center;
    gap: 72px;
    margin-bottom: 100px;
}

.featured-post-thumb-wrap {
    display: flex;
    width: 577px;
    max-width: 100%;
    height: 438px;
    flex-direction: column;
    align-items: center;
    gap: 140px;
    flex-shrink: 0;
    aspect-ratio: 137 / 104;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
}

.featured-post-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.featured-post-thumb-wrap:hover img {
    transform: scale(1.02);
}

.featured-post-content {
    flex: 1;
    max-width: 600px;
}

.featured-post-title {
    color: var(--text-black, #1E262B);

    font-size: var(--fs-title-lg);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 24px 0;
}

.featured-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.featured-post-title a:hover {
    color: var(--primary-color, #881111);
}

.featured-post-desc {
    color: var(--text-black, #1E262B);

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    margin: 0 0 24px 0;
}

.featured-post-readmore {
    color: var(--text-black, #1E262B);
    text-align: center;

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.featured-post-readmore:hover {
    color: var(--primary-color, #881111);
    gap: 14px;
}

/* Regular Cards Grid (Card bình thường) */
.journal-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 60px;
}

.journal-article-card {
    display: flex;
    flex-direction: column;
}

.article-card-thumb-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 45 / 33;
    border-radius: 4px;
    overflow: hidden;
    background-color: #F5F3ED;
    text-decoration: none;
}

.article-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.journal-article-card:hover .article-card-thumb-wrap img {
    transform: scale(1.03);
}

.article-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 12px;
}

/* Tên danh mục dài quá 120px thì cắt "..." (tên đầy đủ ở thuộc tính title) */
.article-card-badge {
    display: block;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px 8px;
    border-radius: var(--radius-middle, 8px);
    background: rgba(144, 145, 156, 0.15);
    color: var(--text-black, #1E262B);

    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

.article-card-date {
    color: var(--text-gray, #60606B);

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
}

.article-card-title {
    color: var(--text-black, #1E262B);

    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.article-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-card-title a:hover {
    color: var(--primary-color, #881111);
}

.article-card-desc {
    color: var(--text-gray, #60606B);
    font-size: 16px;
    line-height: 1.55;
    margin: 10px 0 0;
}

.journal-pagination {
    margin-top: 60px;
}


/* ==========================================================================
   PAGE: SINGLE ARTICLE (CHI TIẾT BÀI VIẾT)
   Exact match with Figma design: designs/Chi tiết bài viết.png
   ========================================================================== */
.article-single {
    padding: 64px 0;
    background-color: #FFFFFF;
}

.article-header {
    width: 100%;
    margin-bottom: 32px;
}

/* date: color: var(--text-black, #1E262B); font-family: Alegreya; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px; */
.article-meta-date {
    color: var(--text-black, #1E262B);
    /* content-sub */

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    display: block;
    margin-bottom: 8px;
}

/* title: color: var(--text-black, #1E262B); font-family: Alegreya; font-size: 52px; font-style: normal; font-weight: 700; line-height: normal; */
.article-main-title {
    color: var(--text-black, #1E262B);
    /* heading-title */

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 24px 0;
}

.article-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.meta-bar-left {
    display: flex;
    align-items: center;
    gap: 32px;

    font-size: 18px;
    color: var(--text-black, #1E262B);
}

.meta-source-group,
.meta-author-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-label {
    color: #60606B;
    font-weight: 400;
}

.meta-value {
    color: var(--text-black, #1E262B);
    font-weight: 700;
}

.meta-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 18px;
    color: var(--text-black, #1E262B);
}

.meta-share-label {
    color: #60606B;
    font-weight: 400;
}

.meta-share-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--text-black, #1E262B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    line-height: 1;
}

.meta-share-btn:hover {
    opacity: 0.7;
    transform: translateY(-1px);
}

/* 2 Columns: ảnh cover và nội dung nằm ở cột bên trái có width 940px */
.article-layout-grid {
    display: grid;
    grid-template-columns: 940px minmax(0, 1fr);
    gap: 60px;
    align-items: flex-start;
}

.article-left-col {
    width: 940px;
    max-width: 100%;
}

.article-featured-visual {
    width: 100%;
    aspect-ratio: 940 / 580;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 32px;
}

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

.article-content-body {
    width: 100%;
    color: var(--text-black, #1E262B);

}

.article-content-body p {
    color: var(--text-black, #1E262B);

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
    margin-bottom: 24px;
}

.article-content-body h2,
.article-subheading {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 36px 0 18px 0;
}

.article-tags-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.tags-title {
    font-size: 18px;
    font-weight: 500;
    color: #60606B;
}

.tag-pill {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 4px;
    background: #F4F4F5;
    color: #1E262B;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.tag-pill:hover {
    background: var(--primary-color, #881111);
    color: #FFFFFF;
}

/* Sidebar: Đọc tiếp & Card Ưu đãi */
.article-sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidebar-heading {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 24px 0;
}

.next-article-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
}

.next-thumb {
    display: block;
    aspect-ratio: 45 / 33;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.next-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.next-article-card:hover .next-thumb img {
    transform: scale(1.02);
}

.next-date {
    color: var(--text-gray, #60606B);

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 6px;
    display: block;
}

.next-title {
    color: var(--text-black, #1E262B);

    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin: 0;
}

.next-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.next-title a:hover {
    color: var(--primary-color, #881111);
}

/* card ưu đãi của sidebar: display: flex; padding: 56px; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px; flex: 1 0 0; align-self: stretch; */
.sidebar-promo-banner {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    padding: 56px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    min-height: 480px;
    box-sizing: border-box;
    color: var(--text-white, #FFF);
}

.sidebar-promo-banner .promo-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sidebar-promo-banner .promo-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
}

.sidebar-promo-banner .promo-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.sidebar-promo-banner .promo-tag {
    color: var(--text-white, #FFF);

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    opacity: 0.9;
}

/* title: color: var(--text-white, #FFF); font-family: Alegreya; font-size: 40px; font-style: normal; font-weight: 700; line-height: normal; */
.sidebar-promo-banner .promo-title {
    color: var(--text-white, #FFF);
    /* content-title-1 */

    font-size: var(--fs-title-lg);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* subtitle: color: var(--text-white, #FFF); font-family: Alegreya; font-size: 20px; font-style: normal; font-weight: 500; line-height: 28px; */
.sidebar-promo-banner .promo-subtitle {
    color: var(--text-white, #FFF);
    /* content-sub */

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    margin: 0;
}

/* button nhận ngay: display: flex; padding: var(--spacing-2, 12px) var(--spacing-4, 20px); justify-content: center; align-items: center; gap: var(--spacing-1, 8px); color: var(--text-white, #FFF); text-align: center; font-family: Alegreya; font-size: 20px; font-style: normal; font-weight: 500; line-height: 32px; */
.sidebar-promo-banner .promo-action-btn {
    display: flex;
    padding: var(--spacing-2, 12px) var(--spacing-4, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1, 8px);
    color: var(--text-white, #FFF);
    text-align: center;
    /* content-button */

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    /* 160% */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    text-decoration: none;
    background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-promo-banner .promo-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #FFFFFF;
}


/* ==========================================================================
   PAGE: CONTACT (LIÊN HỆ THEO FIGMA MỚI)
   ========================================================================== */
.contact-hero-section {
    padding: 5rem 0 4rem 0;
    background-color: #FFFFFF;
}

.contact-brand-title {
    font-size: var(--fs-heading);
    font-weight: 700;
    line-height: 1.25;
    color: #161519;
    margin: 0 0 0.6rem 0;
}

.contact-intro-sub {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 32px;
}

.contact-social-pills {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.contact-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    text-decoration: none;
    color: #161519;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    background: var(--secondary-color, #EFF3DD);
}

.contact-social-pill:hover {
    background-color: #EBDDCB;
    color: #161519;
}

/* Responsive for Single Article */
@media (max-width: 1400px) {
    .article-layout-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 40px;
    }

    .article-left-col {
        width: 100%;
    }

    .sidebar-promo-banner {
        padding: 40px 28px;
    }

    .sidebar-promo-banner .promo-title {
        font-size: 26px;
    }
}

.contact-pill-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* SECTION 2: MAP SECTION */
.contact-map-section {
    position: relative;
    width: 100%;
    height: 580px;
    overflow: hidden;
    background-color: #E5EDE5;
}

.map-visual-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-iframe-embed {
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.85) contrast(1.05);
    display: block;
}

.map-overlay-tint {
    position: absolute;
    inset: 0;
    background-color: rgba(235, 240, 235, 0.08);
    pointer-events: none;
}

.map-center-pin {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-pin-pulse {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(22, 21, 25, 0.15);
    animation: mapPinPulse 2s infinite ease-out;
}

@keyframes mapPinPulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.map-pin-core {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #161519;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}

.map-card-container {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.map-floating-card {
    pointer-events: auto;
    background-color: #FFFFFF;
    padding: 2.5rem 2.25rem;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
}

.card-info-group {
    margin-bottom: 1.5rem;
}

.card-group-label {
    font-family: 'Alegreya', Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    color: #161519;
    display: block;
    margin-bottom: 0.4rem;
}

.card-venue-name {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    margin: 0 0 0.25rem 0;
}

.card-group-text {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

.card-hotline-link {
    color: #881111;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.card-hotline-link:hover {
    color: #5b0c0c;
    text-decoration: underline;
}

.btn-card-directions {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #881111;
    color: #FFFFFF;
    padding: 0.85rem 1.25rem;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.btn-card-directions:hover {
    background-color: #6a0d0d;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(136, 17, 17, 0.25);
}

/* SECTION 3: KHÁM PHÁ KHÔNG GIAN (1.4 SLIDES PER VIEW) */
.contact-space-slider-section {
    padding: 5.5rem 0 6rem 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.space-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.space-header-left {
    flex: 0 0 688px;
}

.space-slider-title {
    font-size: var(--fs-heading);
    font-weight: 700;
    color: #161519;
    margin: 0;
    line-height: 1.2;
}

.space-slider-desc {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.space-slider-outer:not(.swiper) {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    user-select: none;
}

.space-slider-track:not(.swiper-wrapper) {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 calc((100vw - min(calc(100vw / 1.4), 1300px)) / 2);
    cursor: grab;
}

.space-slider-track:not(.swiper-wrapper)::-webkit-scrollbar {
    display: none;
}

.space-slider-track:not(.swiper-wrapper):active {
    cursor: grabbing;
}

.space-slide-item:not(.swiper-slide) {
    flex: 0 0 min(calc(100vw / 1.4), 1300px);
    width: min(calc(100vw / 1.4), 1300px);
    max-width: 1300px;
    aspect-ratio: 13 / 7;
    height: auto;
    scroll-snap-align: center;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: opacity 0.3s ease;
}

.space-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.space-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.space-slide-item:hover .space-slide-img {
    transform: scale(1.02);
}

.space-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 2.75rem;
    font-family: 'Alegreya', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #161519;
    letter-spacing: 0.05em;
}

.space-counter-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 2px;
}

.space-counter-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #161519;
    opacity: 0.8;
}

.space-counter-num {
    font-weight: 600;
    min-width: 24px;
    text-align: center;
}

/* ==========================================================================
   PAGE: FAQ (CÂU HỎI THƯỜNG GẶP)
   ========================================================================== */
.page-faq {
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.faq-layout-grid {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 40px;
    align-items: flex-start;
}

.faq-title-col .script-accent-dark {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    font-weight: 400;
    line-height: 1;
    color: var(--primary-color, #801416);
    margin-bottom: 8px;
    display: block;
}

.faq-main-heading {
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-heading);
    font-weight: 700;
    line-height: normal;
    color: var(--text-black, #1E262B);
    margin: 0;
}

.faq-accordion-list {
    display: flex;
    flex-direction: column;
}

.faq-accordion-item {
    border-top: 1px solid var(--xc-border);
    padding: 2rem 0;
}

@media (max-width: 640px) {

    .btn-sale-view-all,
    .link-view-all {
        font-size: 14px;
    }

    .slider-arrow-btn {
        display: none !important;
    }

    .sale-slider-track {
        gap: 12px;
        padding: 6px 0 10px 0;
    }

    .sale-product-card {
        flex: 0 0 68%;
        width: 68%;
        max-width: 240px;
    }


    .sale-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
        top: 8px !important;
        left: 8px !important;
    }

    .sale-card-price-row {
        margin-top: 8px;
        gap: 6px;
    }

    .sale-price-current {
        font-size: 17px !important;
    }

    .sale-price-original {
        font-size: 12px !important;
    }

    .sale-card-title {
        font-size: 15px !important;
        margin-top: 2px;
    }

    .bulk-red-card {
        padding: 20px 16px !important;
        gap: 10px !important;
    }

    .bulk-red-title {
        font-size: 20px !important;
    }

    .bulk-red-desc {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .bulk-red-cta {
        font-size: 15px !important;
    }

    .social-pills-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .social-pill-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        gap: 4px !important;
        justify-content: center !important;
        border-radius: 6px !important;
    }

    .social-pill-btn span {
        font-size: 12px !important;
        line-height: normal !important;
        white-space: nowrap !important;
    }

    .ready-steps-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ready-step-col {
        padding-top: 4px !important;
    }

    .step-num-line {
        font-size: 12px !important;
        line-height: 18px !important;
        padding-bottom: 4px !important;
        margin-bottom: 6px !important;
    }

    .step-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .step-desc {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .process-steps-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .p-step-item {
        gap: 6px !important;
    }

    .p-step-item:nth-child(3) {
        grid-column: auto !important;
    }

    .p-step-num {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        padding-bottom: 2px !important;
        margin-bottom: 2px !important;
    }

    .p-step-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }

    .p-step-desc {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .btn-brief-gold {
        font-size: 15px !important;
        padding: 9px 16px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }

    .rfq-desc {
        font-size: 13px;
        line-height: 19px;
        margin-bottom: 12px;
    }

    .form-row-two {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-label {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .rfq-input,
    .rfq-select,
    .rfq-textarea {
        font-size: 14px;
        padding: 8px 10px;
    }

    .rfq-upload-zone {
        padding: 12px 10px;
        gap: 4px;
    }

    .upload-title {
        font-size: 14px;
    }

    .upload-text {
        font-size: 14px;
    }

    .rfq-checkbox-label {
        font-size: 14px;
        line-height: 17px;
    }

    .btn-rfq-submit {
        font-size: 15px;
        padding: 10px 18px;
    }

    .order-faq-item {
        margin-bottom: 8px;
    }

    .faq-question-bar {
        grid-template-columns: 55px minmax(0, 1fr) 20px;
        gap: 8px;
        padding: 10px 0;
    }

    .faq-label-counter {
        font-size: 13px;
        line-height: 20px;
    }

    .faq-question-title {
        font-size: 15px;
        line-height: 20px;
    }

    .faq-answer-drawer {
        padding: 6px 0 0 0 !important;
    }

    .faq-answer-drawer p {
        font-size: 13px;
        line-height: 19px;
    }

    .view-all-faq-link {
        font-size: 14px;
        margin-top: 10px;
    }

    .journal-hero-desc {
        font-size: 16px;
    }

    .article-card-title {
        font-size: 20px;
    }

    .featured-post-title {
        font-size: 26px;
    }

    .article-single {
        padding: 30px 0 50px 0;
    }

    .article-meta-date {
        font-size: 16px;
    }

    .article-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
    }

    .meta-bar-left {
        flex-wrap: wrap;
        gap: 16px;
        font-size: 15px;
    }

    .article-content-body p {
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 18px;
    }

    .article-subheading {
        font-size: 20px;
        margin: 24px 0 12px 0;
    }

    .sidebar-promo-banner .promo-title {
        font-size: 26px;
    }

    .sidebar-promo-banner .promo-action-btn {
        width: 100%;
        font-size: 16px;
        padding: 6px 12px;
    }
}

.faq-question-bar {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 24px;
    gap: 24px;
    align-items: start;
    cursor: pointer;
}

.faq-label-counter {
    color: var(--text-black, #1E262B);
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.faq-question-title {
    color: var(--text-black, #1E262B);
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.faq-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-black, #1E262B);
    transition: transform 0.25s ease, color 0.2s ease;
    transform-origin: center center;
    flex-shrink: 0;
}

.faq-toggle-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.faq-accordion-item.is-open .faq-toggle-icon {
    transform: rotate(45deg);
}

.faq-answer-drawer {
    padding: 1rem 0 0 164px;
    color: var(--text-black, #1E262B);
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.faq-more-btn-wrap {
    padding-top: 3rem;
    padding-bottom: 5rem;
    border-top: 1px solid var(--xc-border);
    text-align: center;
}

.btn-faq-loadmore {
    background: transparent;
    border: none;
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: var(--text-black, #1E262B);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, transform 0.2s;
}

.btn-faq-loadmore .arrow {
    transform: rotate(90deg);
}

.btn-faq-loadmore[aria-expanded="true"] .arrow {
    transform: rotate(-90deg);
}

.btn-faq-loadmore:hover {
    color: var(--primary-color, #801416);
    transform: translateY(2px);
}

/* FAQ Support Banner (Figma designs/FAQ.png) */
.section-faq-support {
    position: relative;
    background: url('../../images/figma/section-faq-support.png') center/cover no-repeat;
    padding: 90px 0;
    overflow: hidden;
}

.faq-support-container {
    position: relative;
    z-index: 2;
}

.faq-support-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.faq-support-left {
    display: flex;
    flex-direction: column;
}

.faq-support-script {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    font-style: italic;
    color: var(--yellow, #D6BF89);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

.faq-support-heading {
    color: var(--text-white, #FFF);
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 12px 0;
}

.faq-support-desc {
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-heading, 'Alegreya', serif);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
}

.section-faq-support .social-pill-btn {
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
}

.section-faq-support .social-pill-btn:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: #D6BF89;
}


/* ==========================================================================
   PAGE: SEARCH RESULTS (KẾT QUẢ TÌM KIẾM)
   ========================================================================== */
.page-search {
    padding: 4rem 0 6rem 0;
    background-color: #FFFFFF;
}

.search-header-bar {
    margin-bottom: 3.5rem;
}

.search-page-title {
    font-size: var(--fs-heading);
    margin-bottom: 0.5rem;
}

.search-results-info {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: #555;
}

.search-results-grid-four {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 2rem;
}

.search-product-item {
    display: flex;
    flex-direction: column;
}

.search-item-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #F6F4EE;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.search-product-item:hover .search-item-thumb img {
    transform: scale(1.04);
}

.search-item-title {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.search-item-price {
    color: var(--text-black, #1E262B);
    font-size: var(--fs-price);
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}


/* 6. Page Về chúng tôi: Nghệ nhân 4 Cards & Team Slider (Node 4259:5786 & 4259:5812) */
.section-artisan-heritage {
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.artisan-profile-row {
    display: grid;
    grid-template-columns: 452px minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    margin-bottom: 5.5rem;
}

.artisan-photo-col {
    display: flex;
    justify-content: flex-start;
}

.artisan-photo-frame {
    width: 100%;
    max-width: 452px;
    aspect-ratio: 452 / 580;
    overflow: hidden;
}

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

.artisan-info-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
}

.artisan-section-script {
    font-family: "Luxurious Script", cursive;
    font-size: var(--fs-script);
    line-height: 1.2;
    color: #383431;
    margin-bottom: 6px;
    display: block;
}

.artisan-main-heading {
    font-size: var(--fs-heading-md);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-black, #1E262B);
    margin: 0 0 22px 0;
}

.artisan-lead-p {
    font-size: 18px;
    line-height: 1.65;
    color: #333333;
    margin: 24px 0 16px 0;
}

.artisan-sub-p {
    font-size: 18px;
    line-height: 1.65;
    color: #60606B;
    margin: 0 0 28px 0;
}

.btn-artisan-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    border-radius: 8px;
    background: var(--primary-color, #811);
    color: #FFFFFF;
    padding: 8px 24px 9px;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-artisan-more:hover {
    background-color: #6E0E0E;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(136, 17, 17, 0.3);
    color: #FFFFFF;
}

.btn-artisan-more .arrow {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.25s ease;
}

.btn-artisan-more:hover .arrow {
    transform: translateX(4px);
}

/* 4 Artisan Columns */
.artisan-four-cols-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
}

.artisan-col-item {
    display: flex;
    flex-direction: column;
}

.artisan-col-role {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    color: #1E262B;
}

/* Dòng chức danh trên đường kẻ: luôn 1 dòng, dài hơn thì hiện "..." */
.artisan-col-role a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(----Black-Light, #161519);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    transition: color 0.2s ease;
}

.artisan-col-divider {
    height: 1px;
    background-color: #60606B;
    margin: 12px 0 16px 0;
    width: 100%;
}

.artisan-col-title {
    color: var(--Black, #111013);
    font-size: var(--fs-card-title);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;

}


.artisan-col-title a {
    color: inherit;
    text-decoration: none;
}

.artisan-col-title a:hover {
    color: var(--xc-primary, #881111);
}


.artisan-col-desc {
    color: var(----Black-Light, #161519);
    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}


/* Team Slider (TeamMemberSC - Node 4259:5812) */
.section-team-slider {
    padding: 5rem 0;
    background-color: #F7F5EE;
}

.team-slider-header {
    text-align: center;
    margin-bottom: 3rem;
}

.team-slider-title {
    font-size: 2.6rem;
    color: var(--xc-dark);
    margin-top: 0.4rem;
}

.team-slider-wrapper {
    position: relative;
}

.team-slider-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 0 20px;
    scrollbar-width: none;
}

.team-slider-track::-webkit-scrollbar {
    display: none;
}

.team-member-card {
    flex: 0 0 340px;
    background-color: #FFFFFF;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
}

.team-member-thumb {
    height: 400px;
    overflow: hidden;
}

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

.team-member-info {
    padding: 18px 20px;
}

.team-member-name {
    font-family: var(--font-main);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--xc-dark);
    margin-bottom: 4px;
}

.team-member-role {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: #8C8C94;
}

.about-partners-invite-banner {
    padding: 5rem 0;
    background-color: #FFFFFF;
}

.about-invite-btn-wrap {
    margin-top: 2rem;
}


/* ==========================================================================
   PAGE ABOUT: SECTION ACHIEVEMENTS (BẰNG CẤP & GIẢI THƯỞNG)
   ========================================================================== */
.section-achievements {
    padding: 5.5rem 0 6rem;
    background-color: #FFFFFF;
    overflow: hidden;
}

.achievements-header {
    margin-bottom: 3.5rem;
}

.achievements-header .script-accent-gold {
    font-family: var(--font-script, 'Luxurious Script', cursive);
    font-size: var(--fs-script);
    line-height: 1;
    color: var(--brown, #534833);
    margin-bottom: 0.35rem;
    display: block;
}

.achievements-title {
    color: var(--text-black, #1E262B);

    font-size: var(--fs-heading);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

/* Slider Section Wrapper: prev button at left gutter, track bleeds right */
.achievements-slider-section-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    position: relative;
    padding-left: var(--edge-gutter);
    padding-right: 0;
    box-sizing: border-box;
}

/* Nút mũi tên prev duy nhất */
.achievements-nav-prev {
    width: 48px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    color: var(--text-black, #1E262B);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.achievements-nav-prev:hover {
    transform: translateX(-4px);
    opacity: 0.75;
}

.achievements-nav-prev svg {
    width: 28px;
    height: 28px;
    display: block;
}

/* Viewport & Track: bleeds to right margin */
.achievements-slider-viewport {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding: 10px 0;
}

.achievements-slider-viewport::-webkit-scrollbar {
    display: none;
}

.achievements-slider-viewport:active {
    cursor: grabbing;
}

.achievements-slider-track {
    display: flex;
    gap: 40px;
    width: max-content;
    padding-right: var(--edge-gutter);
}

/* Card: Chiều cao bằng nhau cố định, hình ảnh full card */
.achievement-card {
    display: flex;
    width: 350px;
    height: 460px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
}

.achievement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

.achievement-image-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #F4F1EA;
    display: block;
}

.achievement-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.achievement-card:hover .achievement-image-box img {
    transform: scale(1.06);
}

/* Panel đúng theo thông số của người dùng, trượt lên khi hover vào ảnh */
.achievement-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 24px 32px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    background: var(--primary-color, #811);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease,
        visibility 0.35s ease;
    z-index: 3;
}

.achievement-card:hover .achievement-panel,
.achievement-card:focus-within .achievement-panel {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.achievement-year {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

.achievement-card-title {
    color: var(--text-white, #FFF);

    font-size: var(--fs-body);
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 140% */
    margin: 0;
}


/* ==========================================================================
   Inquiry Forms – thông báo kết quả gửi (AJAX) & trạng thái phụ
   ========================================================================== */
.xc-form-message {
    color: white;
    margin: 4px 0 16px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.xc-form-message.is-success {
    border-color: #D6BF89;
    color: #F5EBD3;
}

.xc-form-message.is-error {
    background: rgba(255, 255, 255, 0.92);
    border-color: #ffb4b4;
}

.js-xc-inquiry-form button[type="submit"][disabled] {
    opacity: 0.7;
    cursor: wait;
}

.rfq-upload-zone.is-dragover {
    border-color: #D6BF89;
    background: rgba(214, 191, 137, 0.08);
}

.faq-accordion-item[hidden],
.faq-more-btn-wrap[hidden] {
    display: none !important;
}

/* ==========================================================================
   Trang Sản phẩm & Tìm kiếm – trạng thái lọc thật (số đếm, rỗng, phân trang)
   ========================================================================== */
.btn-clear-filters {
    text-decoration: none;
}

/* Thẻ sản phẩm: nhãn (Bán chạy nhất / Mới / Ưu đãi) nằm trên ảnh */
.catalog-product-item .item-thumb-link .product-badge {
    z-index: 2;
}

.catalog-pagination a.nav-arrow-btn {
    text-decoration: none;
}

.catalog-pagination .nav-arrow-btn.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.catalog-empty-state {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-gray, #60606B);
    font-size: var(--fs-body);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.catalog-empty-state p {
    margin: 0;
    max-width: 640px;
}

.search-empty-form {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 520px;
}

.search-empty-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #C4BEB2;
    border-radius: 4px;
    font-size: 16px;
}

.search-empty-form button {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    background: var(--primary-color, #881111);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
}

.btn-apply-filters {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background: var(--primary-color, #881111);
    color: #FFFFFF;
    cursor: pointer;
}

/* Trang chi tiết nghệ nhân: đoạn mở đầu (tóm tắt) */
.article-content-body .article-lead {
    font-size: 1.15em;
    font-weight: 500;
    color: var(--text-black, #1E262B);
}

/* ==========================================================================
   Journal – tab chủ đề dạng link, chip bộ lọc đang áp dụng
   ========================================================================== */
a.journal-tab-btn,
a.article-card-badge {
    text-decoration: none;
}

.journal-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.journal-active-label {
    color: var(--text-gray, #60606B);
    font-size: 18px;
}

.journal-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 20px;
    background: var(--yellow, #D6BF89);
    color: var(--text-black, #1E262B);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.journal-filter-chip:hover {
    background: #cbb27a;
}

@media (max-width: 1200px) {

    /* Responsive for Order & Gift Page */
    .order-hero-content-wrap {
        margin-left: -60px;
    }

    .order-hero-heading {
        font-size: 34px;
    }

    .order-hero-watermark {
        font-size: 200px;
    }

    .ready-order-layout {
        gap: 4rem;
    }

    /* RESPONSIVE STYLES */
    .journal-featured-post {
        gap: 40px;
    }

    .featured-post-thumb-wrap {
        width: 480px;
        height: auto;
    }

    .featured-post-title {
        font-size: 26px;
    }

    .featured-post-desc {
        font-size: 18px;
        line-height: 26px;
    }

    .article-card-title {
        font-size: 20px;
    }

    .journal-articles-grid {
        column-gap: 30px;
        row-gap: 45px;
    }

    .journal-filter-tabs {
        gap: 20px;
    }

    .journal-tab-btn,
    .journal-tab-btn.is-active {
        width: 220px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 1024px) {

    /* --- Tablet Landscape / Small Desktop (<= 1024px) --- */
    /* Shop Page */
    .shop-container {
        padding: 0 var(--page-gutter);
    }

    .shop-layout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .mobile-filter-toggle-btn {
        padding: 12px 24px;
        display: flex;
    }

    .shop-sidebar-filter {
        display: none;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .shop-sidebar-filter.is-open {
        display: flex;
    }

    .shop-sidebar-filter .filter-main-heading {
        font-size: 20px;
    }

    .shop-sidebar-filter .btn-clear-filters {
        font-size: 16px;
        line-height: 24px;
    }

    .shop-sidebar-filter .filter-search-box {
        padding: 10px 14px;
        margin-bottom: 14px;
    }

    .shop-sidebar-filter .filter-search-input,
    .shop-sidebar-filter .filter-search-input::placeholder {
        font-size: 16px;
        line-height: 24px;
    }

    .shop-sidebar-filter .filter-group-header .group-name {
        font-size: 17px;
        line-height: 26px;
    }

    .shop-sidebar-filter .custom-checkbox .label-text,
    .shop-sidebar-filter .custom-checkbox input:checked~.label-text,
    .shop-sidebar-filter .custom-checkbox:has(input:checked) .label-text {
        font-size: 16px;
        line-height: 24px;
    }

    .shop-sidebar-filter .custom-checkbox .checkmark {
        margin-top: 2px;
    }

    .catalog-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    /* Product Detail Page */
    .product-main-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .product-buy-box {
        padding-left: 0;
    }

    .reviews-layout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding: 3rem 0;
    }

    .related-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .related-banner-card,
    .related-product-card {
        aspect-ratio: 3 / 4;
    }

    /* ==========================================================================
        RESPONSIVE OVERRIDES FOR SUBPAGES
        ========================================================================== */
    .shop-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-main-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-hero-grid,
    .order-hero-grid,
    .corporate-layout-grid,
    .journal-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-stats-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Responsive for Artisan Heritage Section */
    .section-artisan-heritage {
        padding: 4rem 0;
    }

    .artisan-profile-row {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 36px;
        margin-bottom: 4rem;
    }

    .artisan-photo-frame {
        max-width: 340px;
    }

    .artisan-section-script,
    .artisan-info-col .script-accent-gold {
        font-size: 30px;
    }

    .artisan-main-heading,
    .section-artisan-heritage .materialstitle {
        font-size: 30px;
        margin-bottom: 16px;
    }

    .artisan-lead-p {
        font-size: 16px;
        margin: 18px 0 12px;
    }

    .artisan-sub-p {
        font-size: 16px;
        margin: 0 0 24px;
    }

    .artisan-four-cols-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 32px;
    }

    .artisan-col-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .artisan-col-desc {
        font-size: 17px;
        line-height: 26px;
    }

    /* Responsive for Achievements Section */
    .section-achievements {
        padding: 4rem 0 4.5rem;
    }

    .achievements-header {
        margin-bottom: 2.25rem;
    }

    .achievements-header .script-accent-gold {
        font-size: 30px;
    }

    .achievements-title {
        font-size: 30px;
    }

    .achievements-slider-section-wrap {
        padding-left: var(--page-gutter);
        gap: 20px;
    }

    .achievements-slider-track {
        gap: 28px;
        padding-right: var(--page-gutter);
    }

    .achievement-card {
        width: 300px;
        height: 420px;
    }

    .achievement-panel {
        padding: 20px 24px;
        gap: 10px;
    }

    .achievement-card-title {
        font-size: 19px;
        line-height: 26px;
    }
}

@media (max-width: 991px) {
    .section-custom-logo-bulk {
        padding: 2rem 0;
    }

    .sale-card-details {
        padding: 12px 0 16px;
    }

    /* Section 1: Hero Banner */
    .order-hero-banner {
        height: auto;
        min-height: auto;
        padding: 32px 0 24px 0;
        overflow: hidden;
    }

    .order-hero-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .order-hero-photo-wrap {
        width: 100%;
        margin-left: 0;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
        overflow: hidden;
    }

    .order-hero-photo-gradient {
        display: none !important;
    }

    .order-hero-content-wrap {
        margin-left: 0;
        max-width: 100%;
    }

    .order-hero-heading {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .order-hero-lead {
        font-size: 15px;
        line-height: 23px;
    }

    .order-hero-watermark {
        font-size: 90px;
        bottom: -10px;
        right: 0;
        opacity: 0.03;
    }

    /* Section 2: Quà tặng doanh nghiệp / Sản phẩm ưu đãi */
    .section-sale-products {
        padding: 32px 0;
    }

    .sale-header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 18px;
        position: relative;
    }

    .sale-main-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .sale-action-group {
        position: static;
        margin-top: 4px;
    }

    /* Section 3: Khắc logo và đơn số lượng lớn */
    .section-logo-bulk {
        padding: 32px 0;
        overflow: hidden;
    }

    .logo-bulk-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .logo-bulk-heading {
        font-size: 30px;
        line-height: 1.25;
    }

    .logo-bulk-desc-col,
    .logo-bulk-desc-col p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px;
        line-height: 24px;
        flex: none;
    }

    .logo-bulk-grid {
        flex-direction: column;
        gap: 16px;
    }

    .logo-bulk-photo-col {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
        height: auto !important;
        aspect-ratio: 16 / 9;
        border-radius: 6px;
        overflow: hidden;
    }

    .logo-bulk-photo-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .logo-bulk-card-col,
    .bulk-red-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
        height: auto !important;
        min-height: unset !important;
        box-sizing: border-box;
        border-radius: 6px;
    }

    .bulk-red-card {
        padding: 28px 20px;
        gap: 14px;
    }

    .bulk-red-title {
        font-size: 20px;
    }

    .bulk-red-desc {
        font-size: 16px;
        line-height: 24px;
    }

    /* Section 4: Đặt hàng sẵn */
    .p-step-num {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .p-step-title {
        font-size: 20px;
    }

    .p-step-desc {
        font-size: 16px;
    }

    .section-ready-order {
        padding: 32px 0;
    }

    .ready-order-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ready-order-left .section-title {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    .ready-order-contact {
        width: 100%;
        gap: 10px;
    }

    .social-pills-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .social-pill-btn {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 90px;
        padding: 8px 12px;
        justify-content: center;
        box-sizing: border-box;
    }

    .social-pill-btn span {
        font-size: 15px;
        line-height: 22px;
    }

    .ready-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    /* Section 5: Chế tác theo yêu cầu riêng */
    .section-custom-process {
        padding: 32px 0;
    }

    .custom-process-grid {
        flex-direction: column !important;
        min-height: unset !important;
        gap: 18px;
    }

    .custom-process-card {
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        padding: 28px 20px !important;
        box-sizing: border-box;
        border-radius: 6px;
    }

    .custom-process-header .section-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .process-steps-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 22px;
    }

    .p-step-item:nth-child(3) {
        grid-column: auto !important;
    }

    .custom-process-photo {
        width: 100% !important;
        flex: 0 0 auto !important;
        height: 240px !important;
        order: -1 !important;
        border-radius: 6px;
        overflow: hidden;
    }

    .custom-process-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .btn-brief-gold {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
        margin-top: 10px;
        font-size: 16px;
        padding: 10px 18px;
    }

    /* Section 6: Form chế tác RFQ */
    .section-custom-rfq-full {
        padding: 32px 0;
    }

    .custom-rfq-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .rfq-main-heading {
        font-size: 30px;
        line-height: 1.25;
    }

    .btn-rfq-submit {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* Section 7: FAQ */
    .section-order-faq {
        padding: 32px 0;
    }

    .order-faq-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .order-faq-left .section-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .journal-hero-banner {
        height: auto;
        min-height: 520px;
        padding-top: 140px;
    }

    .journal-hero-container {
        padding-top: 0;
        gap: 40px;
    }

    .journal-hero-title {
        font-size: 40px;
    }

    .journal-filter-tabs {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16px;
    }

    .journal-tab-btn,
    .journal-tab-btn.is-active {
        width: auto;
        flex: 1 1 200px;
    }

    .journal-featured-post {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 60px;
    }

    .featured-post-thumb-wrap {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .featured-post-content {
        max-width: 100%;
    }

    .journal-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-layout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .article-main-title {
        font-size: 34px;
    }

    .sidebar-promo-banner {
        min-height: 340px;
        padding: 36px 24px;
    }

    .faq-layout-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .faq-support-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .pg-lightbox-container {
        padding: 14px 12px;
    }

    .pg-lightbox-img-wrap {
        margin: 0 40px;
        max-width: 92vw;
        max-height: calc(100vh - 180px);
    }

    .pg-lightbox-img-wrap img {
        max-height: calc(100vh - 180px);
    }

    .pg-lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .pg-lightbox-prev {
        left: 2px;
    }

    .pg-lightbox-next {
        right: 2px;
    }

    .pg-lightbox-thumb {
        width: 48px;
        height: 44px;
    }

    /* --- Tablet Portrait & Mobile (<= 768px) --- */
    /* Shop Page */
    .shop-hero-banner {
        height: 220px;
        min-height: 200px;
    }

    .shop-hero-content {
        padding: 24px;
    }

    .shop-hero-title {
        font-size: clamp(28px, 6vw, 34px);
    }

    .shop-container {
        padding: 0 16px;
    }

    /* Shop Sidebar Filter on Mobile (<= 768px) */
    .shop-sidebar-filter {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .shop-sidebar-filter .filter-header-row {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .shop-sidebar-filter .filter-main-heading {
        font-size: 18px;
    }

    .shop-sidebar-filter .btn-clear-filters {
        font-size: 14px;
        line-height: 20px;
    }

    .shop-sidebar-filter .filter-search-box {
        padding: 8px 12px;
        margin-bottom: 12px;
        border-radius: 6px;
    }

    .shop-sidebar-filter .filter-search-box .search-icon {
        font-size: 14px;
    }

    .shop-sidebar-filter .filter-search-input,
    .shop-sidebar-filter .filter-search-input::placeholder {
        font-size: 14px;
        line-height: 20px;
    }

    .shop-sidebar-filter .filter-group {
        padding: 10px 0;
    }

    .shop-sidebar-filter .filter-group-header {
        padding-bottom: 6px;
    }

    .shop-sidebar-filter .filter-group-header .group-name {
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
    }

    .shop-sidebar-filter .filter-group-header .toggle-arrow,
    .shop-sidebar-filter .filter-group-header i {
        font-size: 11px;
    }

    .shop-sidebar-filter .filter-checkbox-list {
        gap: 8px;
    }

    .shop-sidebar-filter .custom-checkbox {
        gap: 8px;
    }

    .shop-sidebar-filter .custom-checkbox .checkmark {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        margin-top: 4px;
    }

    .shop-sidebar-filter .custom-checkbox input:checked~.checkmark::after {
        left: 4.5px;
        top: 1.5px;
        width: 4px;
        height: 8px;
    }

    .shop-sidebar-filter .custom-checkbox .label-text,
    .shop-sidebar-filter .custom-checkbox input:checked~.label-text,
    .shop-sidebar-filter .custom-checkbox:has(input:checked) .label-text {
        font-size: 14px;
        line-height: 20px;
    }

    .catalog-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .results-count {
        font-size: 16px;
        line-height: 24px;
    }

    .catalog-sort-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .catalog-dropdown-trigger {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .catalog-dropdown-trigger .trigger-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 16px);
    }

    .catalog-dropdown-panel {
        position: absolute;
        left: 0;
        right: 0;
        min-width: 240px;
        max-width: 90vw;
        z-index: 50;
    }

    /* Dropdown cuối hàng neo mép phải để panel không tràn ra ngoài màn hình */
    .catalog-filter-dropdown:last-child .catalog-dropdown-panel {
        left: auto;
        right: 0;
    }

    .catalog-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        margin-bottom: 40px;
    }

    .catalog-product-item .item-thumb-link {
        height: 195px;
        padding: 12px;
        border-radius: 6px;
    }

    .catalog-product-item .item-info {
        padding-top: 10px;
        gap: 4px;
    }

    .catalog-product-item .item-title a {
        font-size: 18px;
        line-height: 24px;
    }

    .catalog-product-item .item-price {
        font-size: 16px;
        line-height: 22px;
    }

    /* Product Detail Page */
    .product-detail-page {
        padding: 2rem 0 3rem 0;
    }

    .product-breadcrumb {
        font-size: 15px;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 6px;
    }

    .product-gallery-wrap {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .product-thumbs-column {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .product-thumbs-column .thumb-btn {
        width: 68px;
        height: 68px;
        flex-shrink: 0;
        border-radius: 4px;
    }

    .product-main-image-wrap {
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

    .product-zoom-trigger {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }

    .product-zoom-trigger img {
        width: 22px;
        height: 22px;
    }

    .product-name-heading {
        font-size: clamp(24px, 5.5vw, 26px);
        line-height: 1.25;
    }

    .product-price-tag {
        font-size: 20px;
        line-height: 30px;
    }

    .product-pills-row {
        margin-top: 6px;
        margin-bottom: 1.5rem;
        gap: 8px;
    }

    .product-tag-pill {
        font-size: 14px;
        line-height: 20px;
        padding: 3px 8px;
    }

    .product-short-desc {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 1.5rem;
    }

    .product-meta-specs {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .product-meta-specs .spec-row {
        padding: 10px 0;
    }

    .product-meta-specs .spec-label {
        width: 110px;
        font-size: 15px;
        line-height: 22px;
    }

    .product-meta-specs .spec-val {
        font-size: 15px;
        line-height: 22px;
    }

    .product-actions-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-detail-rfq {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 14px 20px;
        font-size: 17px;
        box-sizing: border-box;
    }

    .btn-detail-custom {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 17px;
        border: 1px solid #1E262B;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .section-product-reviews {
        margin: 2.5rem 0 3rem 0;
    }

    .reviews-layout-grid {
        padding: 2rem 0;
        gap: 1.5rem;
    }

    .reviews-script {
        font-size: 30px;
    }

    .reviews-main-title {
        font-size: 32px;
        line-height: 1.2;
    }

    .reviews-cards-slider {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .review-slide-card {
        flex: 0 0 280px;
        max-width: 85vw;
        scroll-snap-align: start;
        border-radius: 6px;
    }

    .review-card-caption {
        padding: 18px 16px;
    }

    .review-card-caption p {
        font-size: 15px;
        line-height: 22px;
    }

    .related-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .related-banner-card,
    .related-product-card {
        border-radius: 6px;
    }

    .related-banner-card {
        padding: 20px 16px;
    }

    .related-banner-title {
        font-size: 28px;
        line-height: 1.3;
    }

    .related-product-card .related-product-overlay {
        padding: 20px 12px 14px;
    }

    .related-product-title {
        font-size: 14px;
    }

    .section-artisan-heritage {
        padding: 3rem 0;
    }

    .artisan-profile-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        margin-bottom: 3.5rem;
    }

    .artisan-photo-col {
        justify-content: center;
        width: 100%;
    }

    .artisan-photo-frame {
        max-width: 100%;
        width: 100%;
        max-height: 460px;
        aspect-ratio: 4 / 5;
        border-radius: 4px;
    }

    .artisan-info-col {
        max-width: 100%;
    }

    .artisan-section-script,
    .artisan-info-col .script-accent-gold {
        font-size: 28px;
        margin-bottom: 4px;
    }

    .artisan-main-heading,
    .section-artisan-heritage .materialstitle {
        font-size: 30px;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .artisan-lead-p {
        font-size: 15px;
        line-height: 1.6;
        margin: 14px 0 10px;
    }

    .artisan-sub-p {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 22px;
    }

    .artisan-action-wrap {
        width: 100%;
    }

    .btn-artisan-more {
        display: flex;
        width: 100%;
        justify-content: center;
        font-size: 18px;
        line-height: 28px;
        padding: 10px 20px;
        box-sizing: border-box;
    }

    .artisan-four-cols-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .artisan-col-item {
        padding-bottom: 6px;
    }

    .artisan-col-role a {
        font-size: 17px;
        line-height: 24px;
    }

    .artisan-col-divider {
        margin: 8px 0 12px;
    }

    .artisan-col-title {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .artisan-col-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .section-achievements {
        padding: 3rem 0 3.5rem;
    }

    .achievements-header {
        margin-bottom: 1.75rem;
    }

    .achievements-header .script-accent-gold {
        font-size: 28px;
    }

    .achievements-title {
        font-size: 28px;
        line-height: 1.3;
    }

    .achievements-slider-section-wrap {
        padding-left: 1rem;
        gap: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .achievements-nav-prev {
        display: none;
    }

    .achievements-slider-viewport {
        width: 100%;
        padding: 6px 0;
        -webkit-overflow-scrolling: touch;
    }

    .achievements-slider-track {
        gap: 18px;
        padding-right: 1rem;
    }

    .achievement-card {
        width: 270px;
        height: 380px;
        border-radius: 4px;
    }

    .achievement-panel {
        padding: 16px 20px;
        gap: 6px;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        background: linear-gradient(180deg, rgba(136, 17, 17, 0.92) 0%, rgba(136, 17, 17, 0.98) 100%);
    }

    .achievement-year {
        font-size: 13px;
    }

    .achievement-card-title {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (max-width: 640px) {
    .order-hero-photo-wrap {
        aspect-ratio: 16 / 10;
        border-radius: 4px;
    }

    .order-hero-heading {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .order-hero-lead {
        font-size: 14px;
        line-height: 20px;
    }

    .order-hero-watermark {
        font-size: 60px;
        bottom: -4px;
    }

    /* Section 2: Quà tặng sản phẩm */
    .sale-main-title {
        font-size: 24px;
    }

    .sale-header-flex {
        margin-bottom: 12px;
        gap: 4px;
    }

    /* Section 3: Khắc logo */
    .logo-bulk-header {
        margin-bottom: 12px;
        gap: 8px;
    }

    .logo-bulk-heading {
        font-size: 24px;
    }

    .logo-bulk-desc-col p {
        font-size: 14px;
        line-height: 21px;
    }

    .logo-bulk-photo-col {
        height: 180px !important;
        aspect-ratio: unset;
    }

    /* Section 4: Đặt hàng sẵn */
    .ready-order-left .section-title {
        font-size: 24px;
    }

    .ready-order-layout {
        gap: 16px;
    }

    .social-pill-btn img,
    .social-pill-btn svg,
    .social-pill-btn .social-pill-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Section 5: Chế tác theo yêu cầu riêng */
    .custom-process-photo {
        height: 180px !important;
    }

    .custom-process-card {
        padding: 20px 14px !important;
    }

    .custom-process-header .section-title {
        font-size: 24px;
    }

    /* Section 6: Form chế tác RFQ */
    .rfq-main-heading {
        font-size: 24px;
    }

    /* Section 7: FAQ */
    .order-faq-left .section-title {
        font-size: 24px;
    }

    .order-faq-layout {
        gap: 12px;
    }

    .journal-hero-banner {
        min-height: 480px;
    }

    .journal-hero-title {
        font-size: 24px;
    }

    .journal-filter-tabs {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .journal-tab-btn,
    .journal-tab-btn.is-active {
        width: 100%;
    }

    .journal-articles-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }

    .article-main-title {
        font-size: 24px;
    }

    .sidebar-promo-banner {
        padding: 28px 20px;
        min-height: 280px;
    }

    .faq-question-bar {
        grid-template-columns: 90px minmax(0, 1fr) 24px;
        gap: 12px;
    }

    .faq-question-title {
        font-size: 20px;
    }

    .faq-answer-drawer {
        padding-left: 0;
    }

    .faq-support-heading {
        font-size: 28px;
    }
}

@media (max-width: 480px) {

    /* --- Mobile Small Screen (<= 480px) --- */
    .catalog-sort-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .catalog-product-item .item-thumb-link {
        height: 240px;
    }

    .catalog-product-item .item-title a {
        font-size: 18px;
        line-height: 22px;
    }

    .catalog-product-item .item-price {
        font-size: 15px;
    }

    .related-products-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .related-product-card {
        aspect-ratio: 1 / 1;
    }

    .related-banner-card {
        aspect-ratio: auto;
        min-height: 200px;
    }

    .section-product-related {
        margin-bottom: 2rem;
    }

    .artisan-main-heading,
    .section-artisan-heritage .materialstitle {
        font-size: 26px;
    }

    .artisan-col-title {
        font-size: 20px;
    }

    .artisan-col-desc {
        font-size: 15px;
    }

    .achievements-header .script-accent-gold {
        font-size: 24px;
    }

    .achievements-title {
        font-size: 24px;
    }

    .achievements-slider-track {
        gap: 14px;
    }

    .achievement-card {
        width: 240px;
        height: 340px;
    }

    .achievement-panel {
        padding: 12px 16px;
        gap: 4px;
    }

    .achievement-year {
        font-size: 12px;
    }

    .achievement-card-title {
        font-size: 16px;
        line-height: 22px;
    }
}