/* ================= Updecor Custom — HERO slider 500x383 + News ================= */
/* Constants: W=500px, H=383px → H/W = 0.766 => padding-top: 76.6% */

/* ---- Spacing ---- */
.home_hero_wrap{ margin-bottom:20px; }
.hero-left, .hero-right{ margin-bottom:15px; }

/* ---- SLIDER core ---- */
.slider_section{ position:relative; overflow:hidden; }
.home_sec_slider{ width:100%; }

/* Mỗi slide = khung tỉ lệ 500x383, ảnh cover */
.home_sec_slider .item{
  position:relative; width:100%; max-width:100%;
  overflow:hidden; border-radius:8px;
}
.home_sec_slider .item::before{ content:""; display:block; padding-top:76.6%; } /* 383/500 */
.home_sec_slider .item > a,
.home_sec_slider .item > img{ position:absolute; inset:0; }
.home_sec_slider .item > a{ display:block; width:100%; height:100%; }
.home_sec_slider .item img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block; border-radius:8px;
}

/* ---- DESKTOP layout: slider 500px, news sát slider, bằng chiều cao ---- */
@media (min-width: 992px){
  /* Hàng chứa .hero-left + .hero-right thành flex để 2 cột bằng chiều cao */
  .row.row-padding-15 > .col-md-9.col-sm-12.col-xs-12.col-md-push-3 > .row{
    display:flex; align-items:stretch;
  }
  /* Tắt float của 2 cột để flex quản lý */
  .row.row-padding-15 > .col-md-9.col-sm-12.col-xs-12.col-md-push-3 > .row > .hero-left,
  .row.row-padding-15 > .col-md-9.col-sm-12.col-xs-12.col-md-push-3 > .row > .hero-right{
    float:none;
  }

  /* Trái = đúng bề rộng slider 500px, căn trái */
  .hero-left{ display:flex; justify-content:flex-start; }
  .hero-left .slider_section,
  .hero-left .home_sec_slider,
  .hero-left .home_sec_slider .slick-list,
  .hero-left .home_sec_slider .owl-stage-outer{
    width:500px !important; margin-left:0 !important; margin-right:0 !important; overflow:hidden;
  }

  /* Cột trái cố định 500px, cột phải chiếm phần còn lại; gutter hẹp */
  .row.row-padding-15 > .col-md-9.col-sm-12.col-xs-12.col-md-push-3 > .row > .hero-left{
    flex:0 0 500px; max-width:500px; padding-right:6px !important;
  }
  .row.row-padding-15 > .col-md-9.col-sm-12.col-xs-12.col-md-push-3 > .row > .hero-right{
    flex:1 1 auto; min-width:260px; padding-left:6px !important; display:flex;
  }

  /* Card TIN TỨC cao đúng 383px (tính cả padding/border), list co giãn bên trong */
  .home-news{
    height:383px; box-sizing:border-box;
    display:flex; flex-direction:column;
  }
  .home-news__list{
    flex:1 1 auto; min-height:0; overflow:auto; /* scroll nếu nội dung dài */
  }

  /* Nếu cần sát thêm: chỉnh 6px -> 4px hoặc 0px ở 2 dòng padding trên */
}

/* ---- BOX TIN TỨC ---- */
.home-news{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:12px 12px 8px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* Heading “TIN TỨC” nổi bật + gạch chân đỏ */
.home-news__title{
  margin:0 0 10px; font-weight:800; font-size:18px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.3px;
  position:relative; padding-bottom:6px; color:#e03232 !important;
}
.home-news__title a{ color:#e03232 !important; text-decoration:none; }
.home-news__title::after{
  content:""; position:absolute; left:0; bottom:0; width:48px; height:3px;
  background:#e03232; border-radius:2px;
}

/* List item */
.home-news__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.home-news__item{
  display:grid; grid-template-columns:88px 1fr;
  gap:10px; align-items:start; padding:8px 0;
  border-bottom:1px solid #eee; background:transparent;
}
.home-news__item:last-child{ border-bottom:0; }
.home-news__item > *, .home-news__meta{ min-width:0; }

/* Thumb vuông */
.home-news__thumb img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:6px; display:block;
}

/* Tiêu đề bài viết: hiển thị đầy đủ, xuống dòng */
.home-news__link{
  font-weight:700; line-height:1.35;
  display:block; white-space:normal !important;
  overflow:visible !important; text-overflow:clip !important;
  word-break:break-word;
}

/* Mô tả 2 dòng (nếu có) */
.home-news__excerpt{
  font-size:14px; color:#555; margin:4px 0 0; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* ---- Mobile tweaks ---- */
@media (max-width:991px){
  .home-news__item{ grid-template-columns:72px 1fr; padding:8px 0; }
}

/* ---- ARROWS (Slick/Owl dùng chung) ---- */
.slider_section{ position:relative; } /* để mũi tên bám đúng khung */

.hero-arrow,
.owl-nav button.owl-prev,
.owl-nav button.owl-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid #ddd; box-shadow:0 1px 2px rgba(0,0,0,.08);
  z-index:3; cursor:pointer; transition:transform .15s ease, opacity .15s ease;
  opacity:.95;
}
.hero-arrow.prev, .owl-nav button.owl-prev{ left:8px; }
.hero-arrow.next, .owl-nav button.owl-next{ right:8px; }

/* Icon mũi tên bằng CSS */
.hero-arrow::before,
.owl-nav button.owl-prev::before,
.owl-nav button.owl-next::before{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  border-top:2px solid #333; border-left:2px solid #333;
  transform:translate(-50%,-50%) rotate(-45deg); /* prev */
}
.hero-arrow.next::before,
.owl-nav button.owl-next::before{
  transform:translate(-50%,-50%) rotate(135deg);
}

.hero-arrow:hover,
.owl-nav button:hover{ transform:translateY(-50%) scale(1.06); }
.hero-arrow:active,
.owl-nav button:active{ transform:translateY(-50%) scale(0.98); }

@media (max-width:767px){
  .hero-arrow,
  .owl-nav button{ display:none !important; }
}
/* ===== FORCE-SHOW ARROWS FOR SLICK / OWL ===== */
/* đảm bảo vùng định vị và z-index đúng */
.slider_section{ position:relative; z-index:0; }
.slider_section .hero-arrow{ z-index:10; }

/* OWL: ép hiển thị nav và đặt nav phủ toàn khung */
.home_sec_slider .owl-nav{
  display:block !important;
  position:absolute; top:0; left:0; right:0; bottom:0;
  pointer-events:none; /* cho container xuyên click... */
  z-index:9;
}
/* ...nhưng nút vẫn click được */
.home_sec_slider .owl-nav button{
  pointer-events:auto;
  display:block !important;
  position:absolute !important;
  top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid #ddd;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  z-index:10;
}
.home_sec_slider .owl-nav button.owl-prev{ left:8px; }
.home_sec_slider .owl-nav button.owl-next{ right:8px; }
.home_sec_slider .owl-nav button::before{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  border-top:2px solid #333; border-left:2px solid #333;
  transform:translate(-50%,-50%) rotate(-45deg); /* prev */
}
.home_sec_slider .owl-nav button.owl-next::before{
  transform:translate(-50%,-50%) rotate(135deg);
}

/* SLICK: nếu dùng mũi tên tuỳ biến .hero-arrow, đảm bảo không bị ẩn */
.slider_section .hero-arrow{
  display:block !important;
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid #ddd; box-shadow:0 1px 2px rgba(0,0,0,.08);
  opacity:.95; cursor:pointer;
}
.slider_section .hero-arrow.prev{ left:8px; }
.slider_section .hero-arrow.next{ right:8px; }
.slider_section .hero-arrow::before{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px;
  border-top:2px solid #333; border-left:2px solid #333;
  transform:translate(-50%,-50%) rotate(-45deg); /* prev */
}
.slider_section .hero-arrow.next::before{
  transform:translate(-50%,-50%) rotate(135deg);
}

/* đừng ẩn trên desktop */
@media (max-width: 767px){
  .hero-arrow,
  .home_sec_slider .owl-nav button{ display:none !important; }
}
/* ==================================================
   Updecor - Xem thêm / Thu gọn phần đầu danh mục sản phẩm
   Chỉ áp dụng cho trang danh mục sản phẩm WooCommerce
================================================== */

body.tax-product_cat .updecor-top-cat-box {
    position: relative;
    margin-bottom: 22px;
}

body.tax-product_cat .updecor-top-cat-content {
    position: relative;
    max-height: 250px;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

/* Lớp mờ phía dưới để tạo cảm giác còn nội dung */
body.tax-product_cat .updecor-top-cat-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
    pointer-events: none;
}

body.tax-product_cat .updecor-top-cat-box.is-open .updecor-top-cat-content {
    max-height: 9000px;
}

body.tax-product_cat .updecor-top-cat-box.is-open .updecor-top-cat-content::after,
body.tax-product_cat .updecor-top-cat-content.no-fade::after {
    display: none;
}

/* Nút Xem thêm / Thu gọn */
body.tax-product_cat .updecor-top-cat-toggle {
    display: table;
    margin: 14px auto 0 auto;
    padding: 9px 24px;
    border: 1px solid #e03232;
    border-radius: 999px;
    background: #e03232;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(224, 50, 50, 0.28);
    animation: updecorTopPulse 1.8s infinite;
    transition: all 0.25s ease;
}

body.tax-product_cat .updecor-top-cat-toggle:hover {
    background: #c82323;
    border-color: #c82323;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(224, 50, 50, 0.35);
}

body.tax-product_cat .updecor-top-cat-box.is-open .updecor-top-cat-toggle {
    background: #555;
    border-color: #555;
    box-shadow: none;
    animation: none;
}

body.tax-product_cat .updecor-top-cat-icon {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    transition: transform 0.25s ease;
}

body.tax-product_cat .updecor-top-cat-box.is-open .updecor-top-cat-icon {
    transform: rotate(180deg);
}

body.tax-product_cat .updecor-top-cat-content img {
    max-width: 100%;
    height: auto;
}

@keyframes updecorTopPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(224, 50, 50, 0.38);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(224, 50, 50, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(224, 50, 50, 0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    body.tax-product_cat .updecor-top-cat-content {
        max-height: 250px;
    }

    body.tax-product_cat .updecor-top-cat-content::after {
        height: 65px;
    }

    body.tax-product_cat .updecor-top-cat-toggle {
        padding: 8px 20px;
        font-size: 14px;
        margin-top: 12px;
    }
}
/* ==================================================
   Updecor - Đồng bộ font tiêu đề đầu danh mục sản phẩm
   Chỉ áp dụng cho trang danh mục sản phẩm WooCommerce
================================================== */

/* Tiêu đề chính danh mục */
body.tax-product_cat h1.page-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #e03232 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #e03232 !important;
}

/* Tiêu đề H2/H3 trong phần mô tả đầu danh mục */
body.tax-product_cat .updecor-top-cat-content h2,
body.tax-product_cat .updecor-top-cat-content h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    color: #e03232 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

/* Đoạn văn trong phần mô tả đầu danh mục cho dễ đọc hơn */
body.tax-product_cat .updecor-top-cat-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}
/* Mobile */
@media (max-width: 768px) {
    body.tax-product_cat h1.page-title {
        font-size: 22px !important;
        line-height: 1.35 !important;
        margin-bottom: 8px !important;
    }

    body.tax-product_cat .updecor-top-cat-content h2,
    body.tax-product_cat .updecor-top-cat-content h3 {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
    }

    body.tax-product_cat .updecor-top-cat-content p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }
}
/* ==================================================
   Updecor - Làm nổi bật nút Xem thêm / Thu gọn ở trang sản phẩm
   Chỉ áp dụng cho trang chi tiết sản phẩm
================================================== */

/* Khối chứa nút xem thêm / thu gọn có sẵn */
body.single-product .devvn-readmore-ctrl {
    text-align: center !important;
    background: #fff !important;
}
/* Tao khoang trong rieng cho nut Xem them */
body.single-product .devvn-readmore-more {
    padding-bottom: 12px !important;
    box-sizing: content-box;
}

/* Nút Xem thêm / Thu gọn */
body.single-product .devvn-readmore-ctrl a,
body.single-product .devvn_readmore_flatsome a {
    display: inline-block !important;
    padding: 9px 24px !important;
    border: 1px solid #e03232 !important;
    border-radius: 999px !important;
    background: #e03232 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(224, 50, 50, 0.28);
    animation: updecorTopPulse 1s infinite !important;
    transition: all 0.25s ease !important;
}

/* Hover nút */
body.single-product .devvn-readmore-ctrl a:hover,
body.single-product .devvn_readmore_flatsome a:hover {
    background: #c82323 !important;
    border-color: #c82323 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(224, 50, 50, 0.35) !important;
}

/* Mũi tên của nút Xem thêm */
body.single-product .devvn-readmore-more a:after,
body.single-product .devvn_readmore_flatsome a:after {
    border-top-color: #fff !important;
    margin-left: 7px !important;
}

/* Mũi tên của nút Thu gọn */
body.single-product .devvn-readmore-less a:after {
    border-bottom-color: #fff !important;
    margin-left: 7px !important;
}

/* Khi là nút Thu gọn thì đổi sang màu xám */
body.single-product .devvn-readmore-less a {
    background: #555 !important;
    border-color: #555 !important;
    color: #fff !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Hiệu ứng nhịp nhẹ để khách chú ý */
@keyframes updecorProductReadmorePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(224, 50, 50, 0.38);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(224, 50, 50, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(224, 50, 50, 0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    body.single-product .devvn-readmore-ctrl a,
    body.single-product .devvn_readmore_flatsome a {
        padding: 8px 22px !important;
        font-size: 14px !important;
    }
}
/* =============================================
   UPDECOR - NUT XEM THEM / THU GON BLOG
   Giong trang san pham va danh muc
============================================= */

/* Khung nut */
body.single-post .devvn-readmore-ctrl {
    text-align: center !important;
    background: #fff !important;
}
/* Tao khoang trong cho vong sang nut Xem them Blog */
body.single-post .devvn-readmore-more {
    bottom: 0 !important;
    padding-bottom: 12px !important;
    background: #fff !important;
    box-sizing: border-box;
}

/* Nut Xem them */
body.single-post .devvn-readmore-more a {
    display: inline-block !important;
    padding: 9px 26px !important;
    background: #e03232 !important;
    border: 1px solid #e03232 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;

    /* Vong sang nhap nhay */
    box-shadow: 0 4px 12px rgba(224,50,50,0.28);
    animation: updecorProductReadmorePulse 1.2s infinite !important;

    transition: background 0.25s ease !important;
}

/* Hover */
body.single-post .devvn-readmore-more a:hover {
    background: #c82323 !important;
    border-color: #c82323 !important;
}

/* Mui ten Xem them */
body.single-post .devvn-readmore-more a::after {
    border-top-color: #fff !important;
    margin-left: 7px !important;
}

/* Nut Thu gon - mau xam */
body.single-post .devvn-readmore-less a {
    display: inline-block !important;
    padding: 9px 26px !important;
    background: #555 !important;
    border: 1px solid #555 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Mui ten Thu gon */
body.single-post .devvn-readmore-less a::after {
    border-bottom-color: #fff !important;
    margin-left: 7px !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.single-post .devvn-readmore-ctrl a {
        padding: 8px 22px !important;
        font-size: 14px !important;
    }
}