/* ==========================================================
   Trang "Tin tức" (tin-tuc.html)
   Figma node 468:3309 (file dt5I7wF6S9aoBL4810OvMM). Header dùng nguyên mega
   menu đầy đủ (không phải bản rút gọn của thanh-toan.html) + footer chuẩn dùng
   chung - phần riêng của trang này chỉ là hero + khu vực nội dung 2 cột.
   Dùng lại --romar-teal-dark (#0E6678) đã có sẵn trong style.css :root.
   ========================================================== */

/* Mục "Tin tức" đang active trong mega menu - trang hiện tại, không phải link.
   Cùng triết lý với .romar-brandbar-link--current (tab thương hiệu) nhưng áp
   dụng cho item mega menu - lần đầu dùng ở trang này. */
.romar-menu .nav-link--current{
  cursor:default;
}
.romar-menu .nav-link--current:hover{
  color:#005C6F;
}

/* ---------- Hero (node 468:3464/3465/3466/3470) ---------- */
/* Gap header -> tiêu đề đo được trong Figma: 333px (KHÔNG phải canh giữa dọc như
   dựng ban đầu - phát hiện khi rà soát lại, tiêu đề nằm cách khá xa mép trên
   Hero, không phải ở giữa khung 666px). */
.tintuc-hero{
  position:relative;
  height:666px;
  background:#9F9F9F;
  display:flex;
  align-items:flex-start;
  padding-top:333px;
  box-sizing:border-box;
}
.tintuc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000000;
  opacity:.3;
}
.tintuc-hero .container-xl{
  position:relative;
  z-index:1;
}
.tintuc-hero-title{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:64px;
  line-height:72px;
  color:#FFFFFF;
}
.tintuc-hero-desc{
  margin:17px 0 0;
  max-width:591px;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1.45;
  color:#FFFFFF;
}

/* ---------- Bố cục 2 cột ---------- */
.tintuc-main{
  padding-bottom:80px;
}
.tintuc-main .container-xl{
  padding-left:120px;
  padding-right:120px;
}
.tintuc-layout{
  display:flex;
  gap:126px;
  padding-top:40px;
}
.tintuc-col-left{
  width:792px;
  max-width:100%;
}
.tintuc-col-right{
  width:282px;
  max-width:100%;
  flex:none;
}

/* ---------- Tab lọc (node 468:3499/482:1988/482:1989 + đường kẻ 468:3500) ---------- */
.tintuc-tabs{
  display:flex;
  gap:48px;
  padding-bottom:22px;
  border-bottom:1px solid var(--romar-teal-dark);
}
.tintuc-tab{
  border:none;
  background:transparent;
  padding:0;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:32px;
  color:rgba(14,102,120,.2);
  cursor:pointer;
}
.tintuc-tab.is-active{
  color:var(--romar-teal-dark);
}

/* ---------- Lưới 6 thẻ tin (node 482:2034...) ---------- */
.tintuc-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:35px 24px;
  margin-top:38px;
}
.tintuc-card{
  width:100%;
}
/* Lưu ý: bbox thô của node 482:2040 (tiêu đề) trong Figma trông như tràn quá
   mép dưới ảnh ~31px, nhưng đo bằng absoluteRenderBounds (glyph thật sự nhìn
   thấy) thì tiêu đề nằm HOÀN TOÀN bên trong ảnh, cách mép dưới ~20px - bbox thô
   chỉ là vùng khung chữ có padding dư, không phải vị trí hiển thị thật (lỗi
   suýt mắc phải, đã tự sửa trước khi báo hoàn thành: ban đầu dựng theo bbox thô
   khiến class="tintuc-card-title" bị overflow:hidden của khung ảnh nuốt mất,
   không hiển thị gì cả). Giữ overflow:hidden bình thường trên khung ảnh. */
.tintuc-card-imgwrap{
  position:relative;
  width:100%;
  height:251px;
  border-radius:5px;
  background:#9F9F9F center/cover no-repeat;
  overflow:hidden;
}
.tintuc-card-date{
  position:absolute;
  top:16px;
  right:11px;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:16px;
  color:#FFFFFF;
}
.tintuc-card-title{
  position:absolute;
  left:11px;
  right:11px;
  bottom:20px;
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:32px;
  line-height:1.15;
  color:#FFFFFF;
}
.tintuc-card-desc{
  margin:22px 0 0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1.4;
  color:#000000;
}
.tintuc-card-more{
  display:block;
  margin-top:22px;
  text-align:center;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:16px;
  color:#000000;
  text-decoration:none;
}
.tintuc-card-more:hover{
  text-decoration:underline;
  color:#000000;
}

/* ---------- Cột phải "Khác" (node 468:3504 + đường kẻ 468:3503) ---------- */
.tintuc-other-title{
  margin:0 0 22px;
  font-family:'Anuphan', sans-serif;
  font-weight:500;
  font-size:32px;
  color:var(--romar-teal-dark);
  padding-bottom:22px;
  border-bottom:1px solid var(--romar-teal-dark);
}
/* Node 468:3521 track #EFEFEF cao 1420px / 468:3522 thumb #0E6678 - dùng
   overflow-y:auto + tự style thanh cuộn, không bắt buộc khớp px tuyệt đối vì
   là control trình duyệt (đã ghi rõ trong yêu cầu). */
.tintuc-other-list{
  max-height:1420px;
  overflow-y:auto;
  padding-right:24px;
  scrollbar-width:thin;
  scrollbar-color:var(--romar-teal-dark) #EFEFEF;
}
.tintuc-other-list::-webkit-scrollbar{
  width:5px;
}
.tintuc-other-list::-webkit-scrollbar-track{
  background:#EFEFEF;
  border-radius:3px;
}
.tintuc-other-list::-webkit-scrollbar-thumb{
  background:var(--romar-teal-dark);
  border-radius:3px;
}
.tintuc-other-item + .tintuc-other-item{
  margin-top:40px;
}
.tintuc-other-item-title{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:24px;
  color:#000000;
}
.tintuc-other-item-desc{
  margin:8px 0 0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.4;
  color:#000000;
}

@media (max-width:1199.98px){
  .tintuc-hero{
    height:auto;
    padding:56px 0;
  }
  .tintuc-hero-title{
    font-size:40px;
    line-height:48px;
  }
  .tintuc-hero-desc{
    font-size:18px;
    margin-top:16px;
  }
  .tintuc-main .container-xl{
    padding-left:24px;
    padding-right:24px;
  }
  .tintuc-layout{
    flex-direction:column;
    gap:48px;
    padding-top:32px;
  }
  .tintuc-col-left, .tintuc-col-right{
    width:100%;
  }
  .tintuc-tabs{
    gap:24px;
    flex-wrap:wrap;
  }
  .tintuc-tab{
    font-size:22px;
  }
  .tintuc-grid{
    grid-template-columns:1fr;
  }
  .tintuc-card-title{
    font-size:24px;
  }
  .tintuc-other-list{
    max-height:600px;
  }
}

/* ==========================================================
   Mobile thật - node 478:3666 "Tin tức" (402x3136, tìm 2026-09-16). Đã hỏi và
   người dùng xác nhận (2026-09-16): THEO ĐÚNG đề xuất ban đầu - bỏ qua tab thứ 3
   "Khác" thấy trong Figma mobile (nghi vấn chưa rõ là tab chuyển nội dung hay chỉ
   link neo xuống section, không tự suy đoán) - giữ nguyên 3 tab như desktop
   (Tin nổi bật/Về công ty/Chính sách), "Khác" vẫn là 1 section CỐ ĐỊNH nằm dưới
   lưới tin, không phải tab.
   Phát hiện khác so với desktop: Figma mobile KHÔNG có khung cuộn riêng cho
   "Khác" (không thấy track/thumb như 468:3521/468:3522 ở desktop) - chỉ là danh
   sách chữ chảy tự nhiên xuống, người dùng cuộn cả trang bình thường. Đã bỏ
   overflow-y:auto/max-height ở mốc mobile thật này (khác tablet/mobile fallback
   chung ở trên, nơi vẫn giữ khung cuộn 600px vì chưa có dữ liệu Figma riêng).
   ========================================================== */
@media (max-width:575.98px){
  /* Hero: node 478:3667/3668/3740 - cao cố định 540px (không phải auto), tiêu đề
     nhỏ hẳn còn 24px (không phải scale-artifact, số tròn = chủ đích), nội dung
     neo GẦN ĐÁY khung (giống ngôn ngữ thiết kế "chữ nằm nửa dưới" của bản desktop
     333px/666px, chỉ đổi cách neo cho đơn giản/chắc chắn hơn: dùng
     justify-content:flex-end + padding-bottom đo được 92px thay vì padding-top
     lớn, cho cùng 1 kết quả thị giác). */
  .tintuc-hero{
    height:540px;
    padding:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding-bottom:92px;
  }
  .tintuc-hero-title{
    font-size:24px;
    line-height:20px;
  }
  .tintuc-hero-desc{
    font-size:14px;
    line-height:16px;
    margin-top:8px;
    max-width:100%;
  }
  /* Tab lọc: 21px (node 478:3754), giữ đúng 3 tab desktop, KHÔNG thêm tab "Khác" */
  .tintuc-tab{
    font-size:21px;
  }
  /* Khoảng cách giữa các thẻ tin xếp dọc đo được ~18-20px (nhỏ hơn 35px desktop) */
  .tintuc-grid{
    gap:20px;
  }
  /* Tiêu đề "Khác" + mục con nhỏ lại đúng Figma mobile (478:3772/478:3777) */
  .tintuc-other-title{
    font-size:24px;
  }
  .tintuc-other-item-title{
    font-size:20px;
  }
  /* KHÔNG có khung cuộn riêng trên mobile thật - "Khác" chảy tự nhiên theo trang */
  .tintuc-other-list{
    max-height:none;
    overflow-y:visible;
    padding-right:0;
  }
}

/* ==========================================================================
   SỬA THEO FIGMA (2026-10-01) - desktop 468:3309 (1440), mobile 478:3666 (402)
   ========================================================================== */

/* ---------- Dùng chung ---------- */
/* Khung nội dung 1200px canh giữa (x120 ở 1440) cho CẢ banner lẫn phần dưới -
   trước đây chữ banner dính mép trái (x12) */
.tintuc-hero .container-xl,
.tintuc-main .container-xl{
  width:100%;
  max-width:none;
  padding-left:max(24px, calc((100% - 1200px) / 2));
  padding-right:max(24px, calc((100% - 1200px) / 2));
}
/* Banner: nền trắng phủ đen 30% (= xám #B3B3B3 như Figma 468:3464), chỗ để ảnh sau này */
.tintuc-hero{ background-color:#FFFFFF; }
.tintuc-hero-desc{ line-height:24px; }
.tintuc-tab--other,
.tintuc-more-btn{ display:none; }

/* Card bài viết (482:2034...): gạch xám 2px trên đầu, khung xám #D9D9D9 cách gạch
   9px, ảnh thụt vào 11px bên trong khung */
.tintuc-card{
  border-top:2px solid #D9D9D9;
  padding:30px 11px 19px;
  background:linear-gradient(#D9D9D9, #D9D9D9) 0 9px / 100% calc(100% - 9px) no-repeat;
  box-sizing:border-box;
}
.tintuc-card-desc{ margin-top:18px; line-height:24px; padding-right:11px; }
.tintuc-card-more{ margin-top:18px; line-height:24px; }

/* Cột "Khác": thanh dọc (468:3521/3522) bên trái danh sách, danh sách tự cuộn */
.tintuc-other-scroll{ position:relative; }
.tintuc-other-list{
  max-height:1420px;
  overflow-y:auto;
  padding:0;
  scrollbar-width:none;
}
.tintuc-other-list::-webkit-scrollbar{ display:none; }
.tintuc-other-track{
  position:absolute;
  left:-24px;
  top:0;
  bottom:0;
  width:5px;
  border-radius:7px;
  background:#EFEFEF;
  overflow:hidden;
}
.tintuc-other-thumb{
  display:block;
  width:5px;
  height:78px;
  border-radius:7px;
  background:var(--romar-teal-dark);
  transition:transform .1s linear;
}

/* ---------- Desktop >= 1200px ---------- */
@media (min-width:1200px){
  .tintuc-layout{ gap:126px; padding-top:40px; }
  .tintuc-col-left{ flex:0 1 792px; min-width:0; }
  .tintuc-col-right{ flex:0 0 282px; }
  /* Tab + "Khác": chữ 32px, gạch #005C6F 1px ngay dưới (y 865 ở cả 2 cột) */
  .tintuc-tabs{ gap:48px; padding-bottom:3px; border-bottom:1px solid #005C6F; }
  .tintuc-tab{ line-height:48px; }
  .tintuc-other-title{ line-height:48px; padding-bottom:3px; margin:0 0 15px; border-bottom:1px solid #005C6F; }
  /* Lưới: gạch tab -> gạch card đầu 37px, 2 cột 384px cách 24px, hàng cách 33px */
  .tintuc-grid{ margin-top:37px; gap:33px 24px; }
  /* Mục "Khác": tiêu đề 24px, mô tả 16/18 rộng 284px, mỗi mục cách nhau 168px */
  .tintuc-other-list{ padding-top:50px; margin-right:-2px; }
  .tintuc-other-item-title{ line-height:28px; }
  .tintuc-other-item-desc{ margin-top:0; line-height:18px; }
  .tintuc-other-item + .tintuc-other-item{ margin-top:50px; }
}

/* ---------- Mobile < 576px (478:3666) ---------- */
@media (max-width:575.98px){
  /* Banner: nền #595953, không phủ tối; "TIN TỨC" viết hoa; mô tả 12/14 canh đều */
  .tintuc-hero{ background:#595953; }
  .tintuc-hero::after{ display:none; }
  .tintuc-hero-title{ font-size:24px; line-height:23px; text-transform:uppercase; }
  .tintuc-hero-desc{ margin-top:0; max-width:353px; font-size:12px; line-height:14px; text-align:justify; }

  .tintuc-layout{ gap:0; padding-top:39px; }
  /* Tab: 3 tab 1 hàng "Tin nổi bật · Về công ty · Khác", không gạch dưới */
  .tintuc-tabs{ flex-wrap:nowrap; justify-content:space-between; gap:0; padding:0; border:0; }
  .tintuc-tab{ font-size:21px; line-height:37px; white-space:nowrap; }
  .tintuc-tab:not(.tintuc-tab--other):nth-child(3){ display:none; }
  .tintuc-tab--other{ display:inline-block; }

  /* Card: gạch 2px, khung xám cách gạch 8px, ảnh thụt 10px, chỉ 2 bài */
  .tintuc-grid{ margin-top:39px; gap:18px; }
  .tintuc-grid:not(.is-expanded) > .tintuc-card:nth-child(n+3){ display:none; }
  .tintuc-card{ padding:28px 10px 17px; background-position:0 8px; background-size:100% calc(100% - 8px); }
  .tintuc-card-imgwrap{ height:231px; border-radius:4.6px; }
  .tintuc-card-date{ top:18px; right:11px; font-size:14.8px; }
  .tintuc-card-title{ left:9px; bottom:19px; font-size:29.5px; }
  .tintuc-card-desc{ margin-top:7px; padding-right:0; font-size:22.1px; line-height:22.1px; }
  .tintuc-card-more{ margin-top:27px; font-size:14.8px; line-height:22px; }

  /* Nút "Xem thêm" dưới lưới (478:3771): 16px đậm 600, xanh, canh giữa */
  .tintuc-more-btn{
    display:block;
    margin:28px auto 0;
    padding:0;
    border:0;
    background:transparent;
    font-family:'Anuphan', sans-serif;
    font-weight:600;
    font-size:16px;
    line-height:31px;              /* khung chữ cao 31px như Figma 478:3771 */
    color:var(--romar-teal-dark);
    cursor:pointer;
  }
  .tintuc-more-btn[hidden]{ display:none; }

  /* "Khác" (478:3772-3779): không gạch, không thanh cuộn, chỉ 3 bài */
  .tintuc-col-right{ margin-top:11px; }
  .tintuc-other-title{ font-size:24px; line-height:37px; padding:0; margin:0 0 36px; border:0; }
  .tintuc-other-track{ display:none; }
  .tintuc-other-list{ max-height:none; overflow:visible; padding:0; }
  .tintuc-other-item:nth-child(n+4){ display:none; }
  .tintuc-other-item-title{ font-size:20px; line-height:24px; }
  .tintuc-other-item-desc{ margin-top:3px; font-size:16px; line-height:18px; }
  .tintuc-other-item + .tintuc-other-item{ margin-top:52px; }
}

/* Desktop: cột "Khác" ĐỨNG YÊN khi cuộn xem lưới bài bên trái; hết lưới bài thì
   cùng trôi lên. Danh sách vừa chiều cao màn hình (phần dư cuộn trong thanh dọc). */
@media (min-width:1200px){
  .tintuc-col-right{
    position:sticky;
    top:24px;                   /* header desktop không cố định */
    align-self:flex-start;
  }
  body.admin-bar .tintuc-col-right{ top:56px; }   /* thanh admin WordPress 32px */
  /* 48px = 2 x 24px mép trên/dưới, 67px = tiêu đề "Khác" + gạch + khoảng cách */
  .tintuc-other-list{ max-height:min(1420px, calc(100vh - 48px - 67px)); }
  body.admin-bar .tintuc-other-list{ max-height:min(1420px, calc(100vh - 80px - 67px)); }
}

/* Mobile: đường kẻ xanh trên banner (Figma 478:3755 - node nằm ngoài khung,
   đè lên banner): cách lề 24px, dài 354px, 1px #005C6F, cách đáy banner 48px */
@media (max-width:575.98px){
  .tintuc-hero::before{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    bottom:48px;
    height:1px;
    background:#005C6F;
    z-index:1;
  }
}