/* ================================
   Root Variables with Responsive
================================= */
:root {
  /* ======= Color Palette ======= */
  --color-primary: #b30000;           /* Đỏ cổ điển */
  --color-secondary: #d4af37;         /* Vàng */
  --color-accent: #1f3a5f;            /* Xanh trầm */
  --color-text-heading: #1a1a1a;
  --color-text-body: #333333;
  --color-text-muted: #666666;
  --color-bg: #ffffff;
  --color-bg-muted: #f9f9f9;
  --color-border: #e0d5d5; /* Nhạt hơn đỏ cổ điển để giữ độ tương phản */
  --color-shadow: rgba(179, 0, 0, 0.12); /* đỏ cổ điển nhưng nhẹ hơn cho bóng */

  /* ======= Typography ======= */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Noto Sans', sans-serif;

  /* ======= Font Sizes (Desktop) ======= */
  --font-extra-large: 48px;
  --font-h1: 36px;
  --font-large: 28px;
  --font-h2: 24px;
  --font-h3: 20px;
  --font-center: 18px;
  --font-base: 16px;
  --font-small: 14px;

  /* Line heights */
  --line-height-heading: 1.3;
  --line-height-body: 1.6;

  /* Spacing */
  --spacing-section: 80px;
  --spacing-block: 24px;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --font-extra-large: 40px;
    --font-h1: 32px;
    --font-large: 24px;
    --font-h2: 20px;
    --font-h3: 18px;
    --font-center: 17px;
    --font-base: 15px;
    --font-small: 13px;
    --spacing-section: 64px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --font-extra-large: 32px;
    --font-h1: 28px;
    --font-large: 22px;
    --font-h2: 18px;
    --font-h3: 16px;
    --font-center: 16px;
    --font-base: 14px;
    --font-small: 12px;
    --spacing-section: 48px;
  }
}

/* ===========================
   Reset & Base
=========================== */
body {
  font-family: var(--font-body) !important;
  font-size: var(--font-base);
  line-height: var(--line-height-body) !important;
  color: var(--color-text-body) !important;
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .heading {
  font-family: var(--font-heading) !important;
  color: var(--color-text-heading);
  line-height: var(--line-height-heading) !important;
  margin: 0 0 0.5em;
}
input,select,textarea{
  font-size:var(--font-body) !important;
}
h1 { font-size: var(--font-h1) !important; }
h2 { font-size: var(--font-h2) !important; }
h3 { font-size: var(--font-h3) !important; }
.heading,.heading a { 
    font-size: var(--font-h3) !important; 
    color:var(--color-primary) !important;
    font-weight: bold;
}
.banner h2.banner-heading{
  font-size:var(--font-h1) !important;
}
.sub-heading{
    font-size:var(--font-base) !important;
    color: var(--color-accent);
    font-family: var(--font-heading) !important;
    font-style:italic;
}

p, .body-text {
  font-size: var(--font-base);
  margin-bottom: 1em;
}
/* custom background */
.section-gradient-red-bottom{
    background: linear-gradient(to top, var(--color-primary), #ffffff);
}
.section-gradient-red-top{
    background: linear-gradient(to bottom, var(--color-primary), #ffffff);
}
/* Nghiêng chéo */
.section-gradient-diagonal-red-top{
background: linear-gradient(135deg, var(--color-primary), var(--color-bg-muted));
}
.section-gradient-diagonal-red-bottom{
background: linear-gradient(135deg, var(--color-bg-muted),var(--color-primary));
}

/* Radial từ giữa ra trắng */
.section-gradient-radial-center{
background: radial-gradient(circle, #ffffff 1%, var(--color-primary) 100%);
}
.text-white{
  color:#fff !important;
}
/* ===========================
   Components
=========================== */

/* Button - Primary */
.button.button-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-bg) !important;
  border: 2px solid var(--color-primary) !important;
}


/* Button - Secondary */
.button.button-secondary {
  color: var(--color-secondary) !important;
  background:rgba(0,0,0,0.3) !important;
  border: 2px solid var(--color-secondary);
}
.button.button-secondary:hover {
    background: var(--color-secondary) !important;
    color:#fff !important;
    box-shadow:none;
}
.button.cta-button{
  padding: 8px 16px;
  border-radius: 4px;
  font-size: var(--font-base);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}
.text-white{
  color:#fff !important;
}
/* Card */
.card {
  background-color: var(--color-bg-muted);
  padding: var(--spacing-block);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--color-shadow);
  border: 1px solid var(--color-border);
}
.card .heading {
  font-size: var(--font-h3);
  margin-bottom: 0.5em;
}
.card p {
  font-size: var(--font-base);
  color: var(--color-text-body);
}

/* Caption */
.caption {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Section spacing */
.section {
  padding: var(--spacing-section) 0;
}
body blockquote{
  border-left:4px solid var(--color-secondary);
  padding:5px 15px;
}
body blockquote p{
  color: var(--color-secondary);
  margin:0;
}
/* Utility classes */
.text-center {
  text-align: center;
}
.text-muted {
  color: var(--color-text-muted);
}
.bg-muted {
  background-color: var(--color-bg-muted);
}
.text-justify{
    text-align:justify !important; 
}
.col-no-padding-bottom{
    padding-bottom:0 !important;
}
.section-heading-text{
    font-weight:bold;
    color:var(--color-primary);
    text-transform: uppercase;
    font-family: var(--font);
}
.sub-section-heading{
    font-weight:500;
    color:var(--color-accent);
    font-family: var(--font-heading) !important;
    font-size:var(--font-center);
}
strong,b{
    font-weight:700 !important;
}
.banner strong, b{
  color:#fff !important;
}
.section-light-grey{
    background: #f7f7f7;
}
/* product */
.box-text-products{
    text-align: center !important;
}
.box-text-products .title-wrapper {
    text-transform: uppercase;
}
.box-text-products .price-wrapper span{
    color: var(--color-secondary) !important;
}
/* header */
.menu-megadropdown-uxblock {
    position:unset !important;
}
.menu-megadropdown-uxblock .sub-menu.nav-dropdown{
    width: 1050px;
    left: 0;
    transform: translateX(-15%);
    padding: 20px;
    border: 5px solid #b30000;
    background: linear-gradient(10deg, #b30000, #fff);
}
.menu-megadropdown-uxblock .sub-menu.nav-dropdown .ux-menu-link .ux-menu-link__text{
	color:#fff;
}
body .text-accent{
  color: var(--color-accent) !important;
}
hr.sub-line-heading {
    width: 25%;
    border-top: 2px solid var(--color-primary);
    opacity:.7;
    margin:5px 0 10px;
}

.banner .text-box-content p{
    margin:5px 0;
}
.sub-banner-heading{
    font-size: var(--font-h2);
    font-family: var(--font-heading) !important;
    margin:5px 0 20px;
}
@keyframes showSwiperLeft {
    0%{
        left:0;
        opacity:0;
    }
    100%{
        left:-2%;
        opacity:1;
    }
}
@keyframes showSwiperRight {
    0%{
        right:0;
        opacity:0;
    }
    100%{
        right:-2%;
        opacity:1;
    }
}
/* slider */
.slider-wrapper .slider-nav-light .flickity-prev-next-button .arrow, 
.slider-wrapper .slider-nav-light .flickity-prev-next-button svg{
  fill: #fff;
  border-color: #fff;
}
@media screen and (max-width:549px) {
  form.wpcf7-form a.button{
    width:100%;
    margin:0;
  } 
}
.section.footer-section {
    background: linear-gradient(165deg, #ffffff 40%, #b30000 100%);
}
.section-newest-content,.section-before-footer{
  background: linear-gradient(-20deg, #ffffff 50%, #b30000 100%);
}
.header-main{
	background: linear-gradient(to right, #ffffff 0, #b30000 100%);
}
.header-nav-main a.nav-top-link{
	position:relative;
}
/* header-category */
.custom-archive-header{
  position:relative;
  height:60vh;
}
.custom-archive-header.no-bg-image{
  height: fit-content;
}
.custom-archive-header.no-bg-image .bg-archive-page{
  padding:120px;
}
.custom-archive-header .bg-archive-page{
  background: linear-gradient(235deg, #ffffff, #b30000 100%);
  height:100%;
}
.custom-archive-header .bg-archive-page img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.custom-archive-header .bg-archive-page:before{
  content:"";
  background:rgba(0,0,0,0.25);
  position: absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:9;
}
.custom-archive-header.no-bg-image .bg-archive-page:before{
  display:none;
}
.shop-page-title.category-page-title{
  display:none;
}
.custom-archive-header .archive-header-content{
  position: absolute;
  top:50%;
  left:50%;
  z-index:9;
  transform:translate(-50%,-50%);
  text-align: center;
}
.custom-archive-header .archive-header-content h1{
  color:#fff;
}
.custom-archive-header .archive-header-content .woocommerce-breadcrumb {
  font-size:var(--font-center);
  text-transform: uppercase;
  font-weight: bold;
}
.custom-archive-header .archive-header-content .woocommerce-breadcrumb a{
  color:#fff;
  text-transform: uppercase;
  font-weight: 400;
}
.archive-content-data-list .row-category-child-list .list-archive-child .col.col-archive-child{
  width: fit-content;
}
.archive-content-data-list .row-category-child-list .list-archive-child{
  justify-content: center;
  padding-top:30px;
}
.archive-content-data-list .row-category-child-list .list-archive-child img{
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
}
.archive-content-data-list .row-category-child-list .list-archive-child .box-text-bottom .box-text .box-text-title{
  font-weight: 500;
  color:#fff;
  text-shadow: 2px 3px 5px var(--color-primary);
}
.archive-content-data-list .row-category-child-list .list-archive-child .box-text-bottom:hover img{
  border:5px solid var(--color-primary);
}
.archive-content-data-list .row-category-child-list .list-archive-child .box-image.thumb-category{
  text-align: center;
}
.related-products-wrapper .product-small .col-inner,
.archive-content-data-list .row-category-product-list .products .product-small .col-inner{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 10px;
  background: linear-gradient(to bottom, var(--color-primary), #ffffff);
  height:100%;
}
.related-products-wrapper .product-small .col-inner .box-text-products .title-wrapper,
.archive-content-data-list .row-category-product-list .products .product-small .col-inner .box-text-products .title-wrapper{
  height:50px;
}
.related-products-wrapper .product-small img,
.archive-content-data-list .row-category-product-list .products .product-small img{
  border-radius:10px 10px 0 0;
}
.product-lightbox.lightbox-content{
  height:70vh;
  overflow:hidden;
}
.product-lightbox.lightbox-content *{
  height:100%;
}
.product-lightbox.lightbox-content .product-lightbox-inner{
  overflow:scroll;
}
.product-lightbox.lightbox-content .product-lightbox-inner *{
  height:auto;
}
.product-lightbox.lightbox-content .badge-container{
  height:auto;
  font-size:var(--font-small);
}

.archive-content-data-list .category-page-row{
  padding-top:0
}
nav.woocommerce-pagination{
  margin-bottom:50px;
}
.archive-content-data-list{
	background: linear-gradient(180deg, #ffffff 3%, var(--color-primary) 5%, #ffffff 10%);
    background-blend-mode: multiply;
}
.archive-content-data-list.category-no-child{
  padding-top:50px;
  background: linear-gradient(-20deg, #ffffff 50%, #b30000 100%);
}
.flickity-prev-next-button.flickity-button{
  color:#fff;
}

header .stuck .header-main .nav > li > a{
  line-height: 1.1;
}
a.site-title{
    display:none;
}
div#wrapper article .article-inner b,
div#wrapper article .article-inner strong{
    color: var(--color-primary) !important;
}