/* Phòng truyền thống — trang /bao-chi/ và mục cửa vào "Báo chí viết về Khoai" ở trang chủ.
   Nạp SAU style.css (và doi-tong.css).
   TÔNG TƯƠI SÁNG (chủ quán chốt 04/10/2026, theo bản thiết kế Sổ tay): các mục của phòng này có nền xanh trời / cam đào / vàng
   nhân lên lớp collage báo, chữ navy, nhấn xanh dương + vàng — cố ý KHÁC tông tối của phần còn lại, ở cả hai tông Xanh/Vàng.
   Khối cuối file ("Tông tươi sáng") ghi đè các màu ở trên. Đỏ gạch --nhan KHÔNG dùng ở đây (chỉ cho đặt chỗ). */

:root{
  --bc-giay: #FBF7F0;
  --bc-chu-giay: #2E2018;
  --bc-chu-giay-mo: #6B5B4B;
  --bc-muc: #14100C;
}

/* Nền: lớp chữ báo xám rất mờ phía sau, không tranh nội dung */
.bc-nen{ position:relative; isolation:isolate; }
.bc-nen::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.06;
  background: url(../img/bao-chi/nen.jpg) top center / 1400px auto repeat-y;
}

/* ---------- Tờ giấy ghim lên tường ---------- */
.bc-giay{
  position:relative; background:var(--bc-giay); color:var(--bc-chu-giay);
  border-radius:4px; padding:28px 28px 20px;
  box-shadow:0 14px 30px rgba(0,0,0,.38);
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.bc-giay::before{
  content:""; position:absolute; top:-8px; left:50%; margin-left:-7px;
  width:14px; height:14px; border-radius:50%;
  background:var(--den-ho-phach); box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.bc-giay.bc-vang{ background:var(--den-ho-phach); color:#1A1410; }
.bc-giay.bc-vang::before{ background:var(--bc-giay); }
.bc-giay.bc-vang .bc-dich, .bc-giay.bc-vang .bc-nguon{ color:#1A1410; opacity:.85; }
.bc-giay.bc-toi{ background:var(--nen-toi); color:var(--chu-nhat); border:1px solid var(--vien-toi); }
.bc-giay.bc-toi .bc-dich, .bc-giay.bc-toi .bc-nguon{ color:var(--chu-nhat-mo); }

.bc-trich{
  margin:0; font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.15rem, 2.2vw, 1.4rem); line-height:1.6; font-weight:400;
}
.bc-trich.bc-viet{ font-family:"Be Vietnam Pro",sans-serif; font-weight:600; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.55; }
.bc-dich{ margin:0; font-size:.9rem; line-height:1.65; font-style:italic; color:var(--bc-chu-giay-mo); }
.bc-nguon{ margin:2px 0 0; font-size:.78rem; line-height:1.5; color:var(--bc-chu-giay-mo); }
.bc-nguon b{ font-weight:700; }
.bc-ngay{
  display:inline-block; margin-left:6px; padding:1px 8px; border:1px solid currentColor;
  border-radius:3px; font-size:.7rem; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.bc-chi-en{ display:none; }
html[lang="en"] .bc-chi-vi{ display:none; }
html[lang="en"] .bc-chi-en{ display:block; }

.bc-anh{ display:block; width:100%; object-fit:cover; border-radius:3px; }
.bc-anh-dai{ height:120px; }

/* Ảnh tờ báo gốc: miếng ghim nghiêng + nút ngón tay bấm */
.bc-goc{
  position:relative; display:block; align-self:flex-start; width:100%; max-width:260px;
  background:#fff; padding:6px; border-radius:3px; text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.28); transform:rotate(-2deg); margin:6px 0 2px;
  transition:transform .2s;
}
.bc-goc:hover, .bc-goc:focus-visible{ transform:rotate(0); }
.bc-goc:focus-visible{ outline:2px solid var(--den-ho-phach-nhat); outline-offset:3px; }
.bc-goc img{ display:block; width:100%; height:140px; object-fit:cover; object-position:top; border-radius:2px; }
.bc-bam{
  position:absolute; right:14px; bottom:14px; width:34px; height:34px; padding:6px; border-radius:50%;
  background:var(--den-ho-phach); color:#1A1410; box-shadow:0 3px 8px rgba(0,0,0,.4);
}

/* ---------- Trang /bao-chi/ ---------- */
.bc-hero{ background:var(--nen-chim); padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,96px); }
.bc-hero h1{
  font-size:clamp(2.4rem, 7vw, 5rem); line-height:1.04; margin:0 0 .35em;
}
.bc-hero h1 .vien{ color:var(--den-ho-phach-nhat); }
.bc-hero-trich{
  margin:28px 0 0; max-width:760px; padding-left:20px; border-left:3px solid var(--den-ho-phach);
  font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.4rem,3.4vw,2.3rem); line-height:1.3; color:var(--chu-nhat);
}
.bc-hero-nguon{ margin:12px 0 0; padding-left:23px; color:var(--chu-nhat-mo); font-size:.9rem; font-style:italic; }
.bc-hero-nguon b{ font-style:normal; color:var(--den-ho-phach-nhat); }
.bc-hero-di{ margin-top:30px; display:inline-flex; }

.bc-gian-gt{ margin:0 0 40px; max-width:640px; color:var(--chu-nhat-mo); }
.bc-gian-1{ background:var(--nen-mat); }
.bc-gian-2{ background:var(--nen-noi); }
.bc-gian-3{ background:var(--nen-mat); }
.bc-gian-4{ background:var(--nen-chim); text-align:center; }

/* Dòng thời gian một đêm */
.bc-zz{ position:relative; display:flex; flex-direction:column; gap:56px; }
.bc-zz::before{ content:""; position:absolute; left:50%; top:0; bottom:0; border-left:2px dashed var(--vien-toi); }
.bc-moc{ position:relative; z-index:1; width:min(620px,100%); display:flex; flex-direction:column; gap:14px; }
.bc-moc:nth-child(even){ margin-left:auto; }
.bc-gio{
  align-self:flex-start; background:var(--den-ho-phach); color:#1A1410;
  font-weight:800; font-size:1.5rem; line-height:1; padding:7px 16px; border-radius:3px; letter-spacing:.01em;
}
.bc-ben{ flex-direction:row; flex-wrap:wrap; gap:20px; }
.bc-ben .bc-anh{ flex:1 1 180px; max-width:240px; min-height:190px; width:auto; }
.bc-ben .bc-tx{ flex:2 1 260px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.bc-khuya-nut{ display:inline-flex; align-items:center; align-self:flex-start; min-height:48px; padding:0 26px; border-radius:999px; text-decoration:none; font-weight:700; background:var(--den-ho-phach); color:#1A1410; }
.bc-khuya-nut:hover{ background:var(--den-ho-phach-nhat); }

/* Bức tường báo */
.bc-tuong{ display:flex; flex-wrap:wrap; gap:44px 32px; align-items:flex-start; }
.bc-tuong > *{ flex:1 1 300px; }
.bc-tuong > *:nth-child(odd){ transform:rotate(-1.2deg); }
.bc-tuong > *:nth-child(even){ transform:rotate(1deg); }
.bc-tuong > .bc-rong{ flex:2 1 520px; }
.bc-nhan-zing{ align-self:flex-start; background:var(--den-ho-phach); color:#1A1410; font-size:.75rem; font-weight:700; padding:3px 8px; border-radius:3px; }
.bc-vien-ngoc{ background:#fff; color:#2E2018; font-weight:700; border-radius:999px; padding:14px 22px; font-size:1rem; line-height:1.5; text-align:center; }

/* Hóa đơn */
.bc-bill-khung{ display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center; }
.bc-bill{
  background:var(--bc-giay); color:var(--bc-chu-giay); width:100%; max-width:480px; text-align:left;
  padding:34px 30px; border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.45); transform:rotate(1.4deg);
}
.bc-bill-dau{ text-align:center; font-weight:700; letter-spacing:.12em; font-size:1rem; margin-bottom:14px; }
.bc-bill-dau small{ display:block; font-weight:500; font-size:.72rem; letter-spacing:.06em; margin-top:2px; }
.bc-dong{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px dashed #BDB1A0; font-size:.95rem; line-height:1.45;
}
.bc-dong:last-of-type{ border-bottom:0; }
.bc-dong small{ display:block; color:var(--bc-chu-giay-mo); font-size:.72rem; }
.bc-dong b{ font-family:"Roboto Mono",monospace; font-weight:700; white-space:nowrap; }
.bc-khoanh{
  display:inline-block; border:2px solid #8A5A0B; color:#8A5A0B; border-radius:50%;
  padding:2px 12px; transform:rotate(-3deg); font-family:"Be Vietnam Pro",sans-serif !important;
}
.bc-bill-chan{ margin-top:14px; font-size:.7rem; line-height:1.5; color:var(--bc-chu-giay-mo); text-align:center; }

.bc-gian-4 h2{ max-width:800px; margin:0 auto .4em; }
.bc-gian-4 p{ max-width:540px; margin:0 auto 24px; color:var(--chu-nhat-mo); }

/* ---------- Mục cửa vào ở trang chủ (#bao-chi) ---------- */
.bc-cua{ background:var(--nen-chim); }
.bc-cua-luoi{ display:flex; flex-wrap:wrap; gap:48px clamp(32px,5vw,72px); align-items:center; }
.bc-cua-trai{ flex:1 1 380px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.bc-cua-trai h2{ margin:0; }
.bc-cua-trai p{ margin:0; max-width:460px; color:var(--chu-nhat-mo); }
.bc-dem{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.bc-dem-so{ font-weight:800; font-size:2rem; line-height:1; color:var(--den-ho-phach-nhat); letter-spacing:.02em; }
.bc-dem-goiy{ font-size:.92rem; color:var(--chu-nhat-mo); }
.bc-cua-phai{ flex:1.15 1 440px; display:flex; flex-direction:column; gap:30px; min-width:0; }
.bc-cua-phai .bc-giay:nth-child(odd){ transform:rotate(-1.6deg); }
.bc-cua-phai .bc-giay:nth-child(even){ transform:rotate(1.3deg); margin-left:clamp(0px,4vw,48px); }
.bc-cua-hang{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Vạch đen gạch chữ */
.bc-vach{
  display:inline-block; vertical-align:baseline; border:0; margin:0 2px; padding:0 4px; min-height:1.15em; line-height:1.1;
  font:inherit; font-weight:700; cursor:pointer;
  border-radius:3px 9px 4px 10px / 8px 3px 9px 4px; transform:rotate(-1deg);
  transition:background .25s, color .25s;
}
.bc-vach.kin{ background:var(--bc-muc); color:transparent; box-shadow:0 2px 0 rgba(0,0,0,.25); min-width:2.2em; }
.bc-vach.kin:hover, .bc-vach.kin:focus-visible{ background:#4A3C2E; outline:none; }
.bc-vach.kin:focus-visible{ box-shadow:0 0 0 3px var(--den-ho-phach-nhat); }
.bc-vach.mo{ background:var(--den-ho-phach-nhat); color:#1A1410; cursor:default; }
.bc-cua .bc-bam{ animation:bcNhip 1.6s ease-in-out infinite; }
@keyframes bcNhip{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }

/* Cánh cửa dẫn vào /bao-chi/ */
.bc-canh{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px;
  width:168px; height:236px; padding:18px 12px; border-radius:84px 84px 4px 4px; text-decoration:none; text-align:center;
  background:var(--nen-toi); color:var(--den-ho-phach-nhat); border:6px solid var(--den-ho-phach);
  box-shadow:0 14px 30px rgba(0,0,0,.4); transition:transform .2s, background .3s, color .3s;
}
.bc-canh:hover, .bc-canh:focus-visible{ transform:translateY(-3px); }
.bc-canh:focus-visible{ outline:3px solid var(--den-ho-phach-nhat); outline-offset:4px; }
.bc-canh.mo-cua{ background:linear-gradient(180deg, var(--den-ho-phach-nhat) 0%, var(--den-ho-phach) 100%); color:#1A1410; border-color:var(--bc-giay); }
.bc-canh-chu{ font-weight:800; font-size:.95rem; letter-spacing:.08em; }
.bc-canh-bien{ background:var(--den-ho-phach); color:#1A1410; font-weight:700; font-size:.72rem; line-height:1.3; padding:6px 10px; border-radius:3px; letter-spacing:.04em; }
.bc-canh.mo-cua .bc-canh-bien{ background:#1A1410; color:var(--den-ho-phach-nhat); }
.bc-canh-nut{ position:absolute; right:20px; top:56%; width:14px; height:14px; border-radius:50%; background:var(--den-ho-phach-nhat); box-shadow:0 1px 3px rgba(0,0,0,.5); }
.bc-canh.mo-cua .bc-canh-nut{ background:#1A1410; }
.bc-cua-chan{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:22px; }
.bc-cua-chan p{ font-size:.88rem; line-height:1.55; max-width:200px; }

@media (max-width:700px){
  .bc-zz::before{ display:none; }
  .bc-moc:nth-child(even){ margin-left:0; }
  .bc-giay{ padding:24px 20px 18px; }
  .bc-bill{ padding:28px 22px; }
  .bc-cua-phai .bc-giay:nth-child(even){ margin-left:0; }
  .bc-goc{ max-width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .bc-cua .bc-bam{ animation:none; }
  .bc-goc, .bc-canh{ transition:none; }
}


/* =====================================================================
   Tông tươi sáng — ghi đè màu ở trên cho riêng các mục của phòng truyền thống.
   Trong các mục này biến của trang được đổi cục bộ: --den-ho-phach = vàng (nền huy hiệu/nút),
   --den-ho-phach-nhat = xanh dương (chữ nhấn), --chu-nhat = navy. Header/footer của trang vẫn theo tông tối.
   ===================================================================== */
.bc-hero, .bc-gian-1, .bc-gian-2, .bc-gian-3, .bc-gian-4, .bc-cua{
  --bc-xanh:#1A5FBF; --bc-navy:#14284B; --bc-vang:#FFD43B;
  --chu-nhat:#14284B; --chu-nhat-mo:#3D5573;
  --den-ho-phach:#FFD43B; --den-ho-phach-nhat:#1A5FBF;
  --vien-toi:rgba(26,95,191,.35); --nen-toi-2:#fff;
  --bc-giay:#fff; --bc-chu-giay:#14284B; --bc-chu-giay-mo:#4A5C6E;
  color:#14284B;
  background-image:url(../img/bao-chi/nen-sang.jpg); background-position:top center;
  background-size:max(1400px,100%) auto; background-repeat:repeat-y; background-blend-mode:multiply;
}
.bc-hero, .bc-cua{ background-color:#BDE3FC; }
.bc-gian-1{ background-color:#CBE9FF; }
.bc-gian-2{ background-color:#FFD8A8; }
.bc-gian-3{ background-color:#A8D8FA; }
.bc-gian-4{ background-color:#FFD23F; }
.bc-nen::before{ display:none; }

.bc-hero .nhan-so .gach, .bc-gian-1 .nhan-so .gach, .bc-gian-2 .nhan-so .gach,
.bc-gian-3 .nhan-so .gach, .bc-gian-4 .nhan-so .gach, .bc-cua .nhan-so .gach{ background:#1A5FBF; height:2px; }
.bc-hero .btn-outline, .bc-gian-4 .btn-outline{ border-color:#1A5FBF; color:#1A5FBF; background:#fff; font-weight:700; }
.bc-hero .btn-outline:hover, .bc-gian-4 .btn-outline:hover{ background:#1A5FBF; color:#fff; }
.bc-hero-trich{ border-left-color:#1A5FBF; }

.bc-giay{ box-shadow:0 12px 26px rgba(20,40,75,.2); }
.bc-giay::before{ background:#1A5FBF; box-shadow:0 2px 4px rgba(20,40,75,.3); }
.bc-giay.bc-vang{ background:#FFD43B; color:#14284B; }
.bc-giay.bc-vang::before{ background:#fff; }
.bc-giay.bc-vang .bc-dich, .bc-giay.bc-vang .bc-nguon{ color:#14284B; }
.bc-giay.bc-toi{ background:#1A5FBF; color:#FFD43B; border:0; }
.bc-giay.bc-toi::before{ background:#FFD43B; }
.bc-giay.bc-toi .bc-dich, .bc-giay.bc-toi .bc-nguon{ color:#FFD43B; }

.bc-gio, .bc-nhan-zing, .bc-khuya-nut{ background:#FFD43B; color:#1A5FBF; }
.bc-khuya-nut:hover{ background:#fff; }
.bc-bam{ background:#FFD43B; color:#1A5FBF; box-shadow:0 3px 8px rgba(20,40,75,.35); }
.bc-goc{ box-shadow:0 6px 14px rgba(20,40,75,.25); }
.bc-goc:focus-visible{ outline-color:#1A5FBF; }
.bc-vien-ngoc{ color:#1A5FBF; }

.bc-bill{ box-shadow:0 16px 36px rgba(20,40,75,.25); }
.bc-dong{ border-bottom-color:#B8C6D6; }
.bc-khoanh{ border-color:#1A5FBF; color:#1A5FBF; }

.bc-dem-so{ color:#1A5FBF; }
.bc-vach.kin{ background:#14284B; box-shadow:0 2px 0 rgba(20,40,75,.3); }
.bc-vach.kin:hover, .bc-vach.kin:focus-visible{ background:#2B4A7A; }
.bc-vach.kin:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 5px #1A5FBF; }
.bc-vach.mo{ background:#FFD43B; color:#14284B; }

.bc-canh{ background:#1A5FBF; color:#FFD43B; border-color:#FFD43B; box-shadow:0 14px 30px rgba(20,40,75,.35); }
.bc-canh:focus-visible{ outline-color:#1A5FBF; }
.bc-canh.mo-cua{ background:linear-gradient(180deg,#FFE680 0%,#FFD43B 100%); color:#14284B; border-color:#fff; }
.bc-canh-bien{ background:#FFD43B; color:#1A5FBF; }
.bc-canh.mo-cua .bc-canh-bien{ background:#14284B; color:#FFD43B; }
.bc-canh-nut{ background:#FFD43B; box-shadow:0 1px 3px rgba(20,40,75,.5); }
.bc-canh.mo-cua .bc-canh-nut{ background:#14284B; }