/* ==========================================================
   Trang "Cẩm nang" (cam-nang.html)
   Figma node 196:2528 (file dt5I7wF6S9aoBL4810OvMM). Trang TĨNH, không tab/
   carousel/form - chỉ HTML/CSS. Header dùng nguyên mega menu đầy đủ + footer
   chuẩn dùng chung. Toàn bộ 4 khối nội dung + ảnh minh hoạ vẫn là chữ mẫu Lorem
   ipsum/placeholder xám - xem TODO trong cam-nang.html để biết chỗ cần thay khi
   có nội dung/ảnh thật.
   Dùng lại --romar-teal-dark (#0E6678) đã có sẵn trong style.css :root.
   ========================================================== */

/* Mục "Cẩm nang" đang active trong mega menu - trang hiện tại, không phải link.
   Dùng chung .nav-link--current đã tạo ở tin-tuc.html (định nghĩa gốc trong
   assets/css/tin-tuc.css) - khai lại ở đây vì trang này không load tin-tuc.css. */
.romar-menu .nav-link--current{
  cursor:default;
}
.romar-menu .nav-link--current:hover{
  color:#005C6F;
}

/* ---------- Banner đầu trang / cuối trang (node 196:2608/2609/2637 + 196:2635/2636) ---------- */
.camnang-banner{
  height:346px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
}
/* Gap từ mép trên banner -> tiêu đề đo riêng từng banner (KHÔNG canh giữa dọc
   như bản dựng đầu - phát hiện khi rà soát): banner đầu 126px, banner cuối 143px. */
.camnang-banner--dark{
  background:#595953;
  padding-top:126px;
}
.camnang-banner--light{
  background:var(--romar-bg-soft);
  padding-top:143px;
}
.camnang-banner-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:64px;
}
.camnang-banner-title{
  margin:0;
  max-width:871px;
  font-family:'Anuphan', sans-serif;
  font-weight:700;
  font-size:64px;
  line-height:72px;
  color:#FFFFFF;
  text-transform:uppercase;
  text-align:center;
}
/* Banner cuối: cùng cỡ chữ nhưng Regular 400 (không Bold) + màu teal - đúng
   Figma (node 196:2636 weight 400, khác node 196:2609 weight 700). */
.camnang-banner-title--dark{
  font-weight:400;
  color:var(--romar-teal-dark);
}

/* ---------- Placeholder "*đặt ảnh vào đây" (node 196:2637/2623/2626/2632/2640) ----------
   Anuphan Light 16px, uppercase (Figma textCase:UPPER dù characters gốc viết
   thường) - giữ nguyên chữ thường trong HTML, dùng text-transform:uppercase để
   khớp hiển thị, dễ đọc/sửa lại nội dung sau này hơn là gõ hoa cứng. */
.camnang-placeholder{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:300;
  font-size:16px;
  text-transform:uppercase;
  color:#000000;
}
.camnang-placeholder--light{
  color:#FFFFFF;
}
/* Placeholder ảnh minh hoạ 4 khối: làm nổi bật hơn cho dễ nhận biết vị trí cần
   thay ảnh thật (theo gợi ý trong yêu cầu - thêm icon/làm nổi bật). */
.camnang-media .camnang-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100%;
  padding:24px;
  box-sizing:border-box;
  border:2px dashed rgba(0,0,0,.25);
}

/* ---------- Dòng giới thiệu (node 196:2619) ---------- */
.camnang-intro{
  padding:80px 0 90px;
}
.camnang-intro-title{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:64px;
  line-height:72px;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
  text-align:center;
}

/* ---------- 4 khối nội dung zigzag ---------- */
.camnang-blocks{
  padding-bottom:52px;
}
.camnang-blocks .container-xl{
  padding-left:120px;
  padding-right:120px;
}
.camnang-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
}
.camnang-row--reverse{
  flex-direction:row-reverse;
}
/* Khoảng cách đo riêng từng cặp khối trong Figma (không đều nhau): 1->2=85px,
   2->3=80px, 3->4=99px. */
.camnang-row + .camnang-row{
  margin-top:85px;
}
.camnang-row:nth-of-type(3){
  margin-top:80px;
}
.camnang-row:nth-of-type(4){
  margin-top:99px;
}

/* border-radius đọc qua custom property `--camnang-radius` (in ra inline bởi
   `romar_render_cam_nang_blocks()`, inc/template-functions.php, giá trị lấy
   trực tiếp từ 4 field ACF trên-trái/trên-phải/dưới-phải/dưới-trái - cho phép
   lệch không đều, vd khối 2: 5px 0 0 216px). Fallback 5px khi field chưa có
   giá trị (vd trang mới tạo, chưa seed data). CỐ Ý không set thẳng
   `border-radius` (mà qua biến) để override ở @media mobile bên dưới hoạt
   động đúng - inline style thật (không phải biến) sẽ chặn đứng mọi override
   từ stylesheet, kể cả trong media query. */
.camnang-media{
  flex:none;
  background:#D9D9D9;
  border-radius:var(--camnang-radius, 5px);
}
.camnang-media--sq432{ width:432px; height:432px; }
.camnang-media--sq588{ width:588px; height:588px; }
.camnang-media--sq810{ width:810px; height:810px; }
.camnang-media--wide{ width:810px; height:413px; }

.camnang-text{ flex:none; }
.camnang-text--w586{ width:586px; max-width:100%; }
.camnang-text--w384{ width:384px; max-width:100%; }
.camnang-text--w485{ width:485px; max-width:100%; }

.camnang-block-title{
  margin:0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:64px;
  line-height:72px;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
}
.camnang-block-desc{
  margin:19px 0 0;
  font-family:'Anuphan', sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1.4;
  color:var(--romar-teal-dark);
}

@media (max-width:1199.98px){
  .camnang-blocks .container-xl{
    padding-left:24px;
    padding-right:24px;
  }
  .camnang-banner{ height:auto; padding:48px 0; }
  .camnang-banner-title{ font-size:36px; line-height:44px; }
  .camnang-intro{ padding:48px 0; }
  .camnang-intro-title{ font-size:28px; line-height:36px; }

  .camnang-row, .camnang-row--reverse{
    flex-direction:column;
    align-items:center;
    gap:24px;
    text-align:center;
  }
  .camnang-row + .camnang-row{ margin-top:56px; }
  .camnang-media,
  .camnang-media--sq432, .camnang-media--sq588, .camnang-media--sq810, .camnang-media--wide{
    width:100%;
    max-width:432px;
    height:auto;
    aspect-ratio:1/1;
  }
  .camnang-media--wide{ aspect-ratio:810/413; }
  .camnang-text, .camnang-text--w586, .camnang-text--w384, .camnang-text--w485{
    width:100%;
    max-width:586px;
  }
  .camnang-block-title{ font-size:32px; line-height:40px; }
  .camnang-block-desc{ font-size:18px; }
}

/* ==========================================================
   Mobile thật - node 462:2241 "cẩm nang" (402x3148, tìm 2026-09-16). Đặt ở CUỐI
   FILE có chủ đích: rule .camnang-media/.camnang-banner--light bên dưới dùng
   CÙNG độ đặc hiệu với rule gốc nên phải đứng SAU trong file mới thắng đúng
   (cùng loại lỗi độ đặc hiệu CSS đã gặp ở dang-nhap.html/thanh-toan.html).
   Đã hỏi và người dùng xác nhận (2026-09-16):
   - Khối 2: theo ĐÚNG Figma mobile - bo góc ĐỀU (không giữ bo lệch 216px của
     desktop ở mobile).
   - Khối 3: dựng ĐÚNG dạng "card" nền teal #72A7B0 lồng ảnh nhỏ bên trong, khác
     hẳn pattern ảnh-riêng của 3 khối kia (đã xác nhận qua characters/fill node
     462:2249/2252/2254 - không phải suy đoán).
   - Banner cuối trang: ẨN HẲN theo đúng Figma mobile (không có section này trong
     node 462:2241, khác quyết định "giữ để nhất quán" đã dùng ở các lần lệch
     Figma trước - lần này người dùng chọn theo sát Figma).
   ========================================================== */
@media (max-width:575.98px){
  .camnang-banner-title{ font-size:24px; line-height:1.3; }
  .camnang-intro-title{ font-size:16px; line-height:1.4; }

  /* Khối 2: bo đều nhẹ (node 462:2253 đo được ~4.4px, làm tròn 5px cho khớp các
     khối khác) - KHÔNG giữ bo lệch 5px/0/0/216px của desktop. Target thẳng
     `.camnang-media` (không riêng `--skew`) - cùng đặc hiệu (1 class) + đứng
     SAU rule gốc trong file nên thắng đúng qua cascade thường, không cần
     `!important`; áp dụng an toàn cho mọi khối (1/3/4 vốn đã luôn là 5px). */
  .camnang-media{
    border-radius:5px;
  }

  /* Khối 3: "card" nền teal, chữ trắng, ảnh nhỏ (275x275 gốc, dùng aspect-ratio
     1/1 co theo màn hình) lồng SAU title+desc bên trong card - đảo thứ tự so
     với layout mặc định (ảnh trước) bằng column-reverse, không cần đổi DOM. */
  .camnang-block3{
    flex-direction:column-reverse;
    background:var(--romar-teal-pale);
    border-radius:5px;
    padding:32px 24px;
    gap:16px;
  }
  .camnang-block3 .camnang-block-title,
  .camnang-block3 .camnang-block-desc{
    color:#FFFFFF;
  }
  .camnang-block3 .camnang-media{
    width:100%;
    max-width:275px;
    aspect-ratio:1/1;
    background:#A0A0A0;
  }

  /* Banner cuối trang: KHÔNG có trong Figma mobile - ẩn hẳn, nối thẳng khối 4
     xuống footer. */
  .camnang-banner--light{
    display:none;
  }
}

/* ==========================================================================
   SỬA THEO FIGMA (2026-10-01) - desktop 196:2528 (1440), mobile 462:2241 (402)
   ========================================================================== */

/* "*ĐẶT ẢNH VÀO ĐÂY" là ghi chú của designer (chỗ đặt ảnh), không phải nội dung
   -> ẩn; khung xám giữ chỗ chờ ảnh thật. */
.camnang-placeholder{ display:none !important; }

/* Tiêu đề dải cuối luôn canh giữa màn hình (trước đây lệch trái x12) */
.camnang-banner .container-xl{ width:100%; }
.camnang-banner-title{ margin-left:auto; margin-right:auto; }

/* ---------- Desktop >= 1200px ---------- */
@media (min-width:1200px){
  /* Khung nội dung 1200px (x120 -> 1320 ở 1440); ảnh khối 2 + 4 tràn sát mép phải màn hình */
  .camnang-blocks .container-xl{
    max-width:none;
    padding-left:max(24px, calc((100% - 1200px) / 2));
    padding-right:max(24px, calc((100% - 1200px) / 2));
  }
  .camnang-intro{ padding:80px 0 30px; }        /* chữ intro -> khối 1: 30px (Figma 678 -> 708) */
  .camnang-row{ gap:24px; }
  .camnang-text{ flex:0 1 auto; min-width:0; }
  .camnang-media{ flex-shrink:1; min-width:0; }
  .camnang-block-desc{ line-height:24px; }

  /* Khối 1 (196:2620/2621/452:1319): ảnh 432 thụt 78px (x198), chữ sát phải (x734) */
  .camnang-row:nth-of-type(1) .camnang-media{ margin-left:78px; }
  .camnang-row:nth-of-type(1) .camnang-block-desc{ margin-top:30px; }

  /* Khối 2 (196:2624/2625/452:1320): chữ x198 rộng 384, tiêu đề 1 dòng; ảnh 810x413
     bo 5/0/0/216 tràn mép phải */
  .camnang-row:nth-of-type(2){ margin-top:85px; }
  .camnang-row:nth-of-type(2) .camnang-text{ margin-left:78px; }
  .camnang-row:nth-of-type(2) .camnang-block-title{ white-space:nowrap; }
  .camnang-row:nth-of-type(2) .camnang-block-desc{ margin-top:11px; }
  .camnang-row:nth-of-type(2) .camnang-media{ margin-right:calc(-1 * max(24px, (100vw - 1200px) / 2)); }

  /* Khối 3 (196:2631/2630/452:1323): ảnh 588 x120, chữ x734 */
  .camnang-row:nth-of-type(3){ margin-top:80px; }
  .camnang-row:nth-of-type(3) .camnang-block-desc{ margin-top:22px; }

  /* Khối 4 (196:2633/2634/452:1324): chữ x122 rộng 485 (thấp hơn mép ảnh 4px);
     ảnh 810x810 tràn mép phải */
  .camnang-row:nth-of-type(4){ margin-top:95px; }
  .camnang-row:nth-of-type(4) .camnang-text{ margin:4px 0 0 2px; }
  .camnang-row:nth-of-type(4) .camnang-block-desc{ margin-top:11px; }
  .camnang-row:nth-of-type(4) .camnang-media{
    margin-right:calc(-1 * max(24px, (100vw - 1200px) / 2));
    height:auto;
    aspect-ratio:1 / 1;
  }
}

/* ---------- Mobile < 576px (462:2241) ---------- */
@media (max-width:575.98px){
  /* Banner đầu: cao 97px, tiêu đề 24px dòng 20px */
  .camnang-banner--dark{ height:97px; padding:0 24px 14px; align-items:center; }
  .camnang-banner-inner{ gap:0; }
  .camnang-banner-title{ font-size:24px; line-height:28px; } /* Figma 20px quá sát (2 dòng gần chạm) - giãn theo yêu cầu */

  /* "Ở đây, bạn sẽ biết…": 16px dòng 20px, lề 34px; cách banner 21px, cách ảnh 6px */
  .camnang-intro{ padding:21px 0 6px; }
  .camnang-intro .container-xl{ padding-left:34px; padding-right:34px; }
  .camnang-intro-title{ font-size:16px; line-height:20px; }

  .camnang-blocks{ padding-bottom:58px; }
  .camnang-blocks .container-xl{ padding-left:24px; padding-right:24px; }
  .camnang-row, .camnang-row--reverse{ gap:0; align-items:stretch; text-align:center; }
  .camnang-media,
  .camnang-media--sq432, .camnang-media--sq588, .camnang-media--sq810, .camnang-media--wide{
    width:100%; max-width:none; height:auto; aspect-ratio:1 / 1; border-radius:4.4px;
  }
  .camnang-text, .camnang-text--w586, .camnang-text--w384, .camnang-text--w485{ width:100%; max-width:none; }
  /* Tiêu đề "LOREM IPSUM" 24px thường; mô tả 12px dòng 14px canh đều 2 bên */
  .camnang-block-title{ font-size:24px; line-height:35px; }
  .camnang-block-desc{ margin-top:18px; font-size:12px; line-height:14px; text-align:justify; }

  /* Khối 1: ảnh vuông -> tiêu đề 18px -> mô tả 3px */
  .camnang-row:nth-of-type(1) .camnang-text{ margin-top:18px; }
  .camnang-row:nth-of-type(1) .camnang-block-desc{ margin-top:3px; }

  /* Khối 2: ảnh tràn quá 2 mép (476x148, lệch trái 47px), tiêu đề cách ảnh 23px */
  .camnang-row:nth-of-type(2){ margin-top:27px; }
  .camnang-row:nth-of-type(2) .camnang-media{ width:calc(100% + 122px); margin-left:-71px; aspect-ratio:auto; height:148px; }
  .camnang-row:nth-of-type(2) .camnang-text{ margin-top:23px; }

  /* Khối 3: card nền #72A7B0 354x557, chữ trắng, ảnh 275 #A0A0A0 */
  .camnang-row:nth-of-type(3){ margin-top:54px; padding:33px 23px 63px; gap:54px; }
  .camnang-row:nth-of-type(3) .camnang-block-desc{ margin-top:29px; }
  .camnang-block3 .camnang-media{ width:275px; max-width:100%; align-self:center; }

  /* Khối 4: ảnh 354x351, tiêu đề cách ảnh 25px */
  .camnang-row:nth-of-type(4){ margin-top:60px; }
  .camnang-row:nth-of-type(4) .camnang-media{ aspect-ratio:354 / 351; }
  .camnang-row:nth-of-type(4) .camnang-text{ margin-top:25px; }
}
/* Ảnh khối 2 mobile tràn quá 2 mép như Figma -> cắt phần ngoài màn hình, không cho kéo ngang trang */
@media (max-width:575.98px){
  .camnang-blocks{ overflow:hidden; }
}