/* ================= 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; }
}