:root{
    --xanh:      #0B3C6B;
    --xanh-2:    #10528F;
    --xanh-nhat: #E8EFF6;
    --do:        #C0261D;
    --vang:      #E9B111;
    --nen:       #EFF2F5;
    --vien:      #DCE1E7;
    --chu:       #1E2429;
    --chu-mo:    #6B7480;
  }
  *{box-sizing:border-box}
  body{
    margin:0;background:var(--nen);color:var(--chu);
    font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.nen-hep{font-family:"Roboto Condensed",Roboto,sans-serif;margin:0;line-height:1.25}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .khung{width:min(1200px,94vw);margin-inline:auto}

  /* ================= Thanh tiện ích ================= */
  .tienich{background:#082C4E;color:#B7C8DA;font-size:12.5px}
  .tienich .trong{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:7px 0;flex-wrap:wrap}
  .tienich b{color:#fff;font-weight:500}
  .tienich .mxh{display:flex;gap:14px}
  .tienich .mxh a:hover{color:#fff}

  /* ================= Băng đầu trang ================= */
  .bang{
    background:linear-gradient(105deg,var(--xanh) 0%,var(--xanh-2) 55%,#1668B0 100%);
    color:#fff;position:relative;overflow:hidden
  }
  .bang::after{ /* hoạ tiết cửa vòm nhà thờ mờ ở góc phải */
    content:"";position:absolute;right:-40px;top:-30px;width:340px;height:200%;
    background:
      radial-gradient(circle at 50% 78%,rgba(255,255,255,.09) 0 78px,transparent 79px),
      linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) 50% 0/2px 100% no-repeat;
    transform:rotate(-6deg);pointer-events:none
  }
  .bang .trong{display:flex;align-items:center;gap:20px;padding:22px 0;position:relative}
  .huyhieu{
    flex:0 0 74px;height:74px;border-radius:50%;background:rgba(255,255,255,.12);
    border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;overflow:hidden
  }
  .huyhieu img{width:100%;height:100%;object-fit:cover}
  .bang h1{font-size:clamp(1.7rem,4.6vw,2.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  .bang .duoi{font-size:13.5px;color:#C6DCF0;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
  @media(max-width:560px){.huyhieu{flex-basis:56px;height:56px}}

  /* ================= Thanh điều hướng ================= */
  .dieuhuong{background:var(--do);position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(0,0,0,.15)}
  .khung-dieuhuong{display:flex;align-items:center}
  .dieuhuong ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
  .dieuhuong a{
    display:block;color:#fff;padding:12px 16px;font-family:"Roboto Condensed",sans-serif;
    font-weight:600;font-size:14.5px;text-transform:uppercase;letter-spacing:.03em;
    border-right:1px solid rgba(255,255,255,.15);transition:background .2s
  }
  .dieuhuong a:hover,.dieuhuong a.dang{background:rgba(0,0,0,.22)}
  .mo-menu{display:none;background:none;border:0;color:#fff;font-size:22px;padding:10px 16px;cursor:pointer}
  @media(max-width:900px){
    .mo-menu{display:block}
    .khung-dieuhuong{flex-wrap:wrap}
    .dieuhuong ul{display:none;flex-direction:column}
    .dieuhuong ul.hien{display:flex;width:100%}
    .dieuhuong a{border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}
  }

  /* ================= Tin mới chạy ================= */
  .tinmoi{background:#fff;border-bottom:1px solid var(--vien)}
  .tinmoi .trong{display:flex;align-items:center;gap:14px;padding:9px 0;overflow:hidden}
  .tinmoi .nhan{
    flex:0 0 auto;background:var(--do);color:#fff;font-family:"Roboto Condensed",sans-serif;
    font-weight:700;font-size:13px;text-transform:uppercase;padding:4px 12px;letter-spacing:.05em
  }
  .tinmoi .chay{white-space:nowrap;overflow:hidden}
  .tinmoi .chay span{display:inline-block;padding-left:100%;animation:chay 34s linear infinite;font-size:14px}
  .tinmoi .chay a{margin-right:44px;color:var(--xanh)}
  .tinmoi .chay a:hover{color:var(--do)}
  @keyframes chay{to{transform:translateX(-100%)}}

  /* ================= Bố cục hai cột ================= */
  .thanmain{padding:20px 0 34px}
  .haicot{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start}
  @media(max-width:1000px){.haicot{grid-template-columns:1fr}}

  .hop{background:#fff;border:1px solid var(--vien);margin-bottom:20px}
  .hop-dau{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    border-bottom:2px solid var(--xanh);padding:0 14px
  }
  .hop-dau h2{
    background:var(--xanh);color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;padding:9px 16px;margin:0 0 -2px -14px
  }
  .hop-dau .tatca{font-size:13px;color:var(--do);font-weight:500}
  .hop-dau .tatca:hover{text-decoration:underline}
  .hop-noi{padding:16px}

  /* ---- Tin nổi bật ---- */
  .noibat{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
  .noibat .lon .anh{aspect-ratio:16/9}
  .noibat .lon h3{font-size:22px;font-weight:700;margin:10px 0 6px}
  .noibat .lon p{margin:0;color:var(--chu-mo);font-size:14px}
  .noibat .ds{display:flex;flex-direction:column;gap:12px}
  .noibat .ds article{display:grid;grid-template-columns:96px 1fr;gap:10px}
  .noibat .ds .anh{aspect-ratio:4/3}
  .noibat .ds h4{font-size:14.5px;font-weight:600;line-height:1.35}
  @media(max-width:760px){.noibat{grid-template-columns:1fr}}

  /* ảnh giữ chỗ — thay bằng <img> khi có ảnh thật */
  .anh{
    background:linear-gradient(135deg,#D9E4EF,#EDF2F7);border:1px solid var(--vien);
    position:relative;overflow:hidden
  }
  .anh::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(#9FB6CC,#9FB6CC) 50% 22%/2px 46% no-repeat,
      linear-gradient(#9FB6CC,#9FB6CC) 50% 34%/26% 2px no-repeat;
    opacity:.55
  }
  .anh.co-nhan::after{
    content:attr(data-nhan);position:absolute;left:0;bottom:0;
    background:var(--do);color:#fff;font-family:"Roboto Condensed",sans-serif;
    font-size:11.5px;font-weight:600;text-transform:uppercase;padding:3px 9px;letter-spacing:.04em
  }
  a:hover > .anh,article:hover .anh{filter:brightness(1.04)}

  .meta{font-size:12.5px;color:var(--chu-mo);margin-top:5px;display:flex;gap:14px;flex-wrap:wrap}
  .meta i{font-style:normal}
  h3 a:hover,h4 a:hover{color:var(--do)}

  /* ---- Danh sách tin thường ---- */
  .ds-tin article{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:14px 0;border-top:1px dashed var(--vien)}
  .ds-tin article:first-child{border-top:0;padding-top:0}
  .ds-tin .anh{aspect-ratio:4/3}
  .ds-tin h3{font-size:17px;font-weight:600;margin-bottom:4px}
  .ds-tin p{margin:6px 0 0;font-size:13.5px;color:var(--chu-mo)}
  @media(max-width:560px){.ds-tin article{grid-template-columns:110px 1fr;gap:10px}.ds-tin h3{font-size:15px}.ds-tin p{display:none}}

  /* ---- Thông báo dạng gạch đầu dòng ---- */
  .tb-ds{list-style:none;margin:0;padding:0}
  .tb-ds li{display:flex;gap:12px;padding:10px 0;border-top:1px dashed var(--vien);align-items:flex-start}
  .tb-ds li:first-child{border-top:0;padding-top:0}
  .tb-ds .cham{flex:0 0 7px;height:7px;border-radius:50%;background:var(--do);margin-top:8px}
  .tb-ds .ngay{flex:0 0 auto;font-size:12.5px;color:var(--chu-mo);white-space:nowrap}
  .tb-ds a{font-weight:500;font-size:14.5px}
  .tb-ds a:hover{color:var(--do)}

  /* ---- Lưới ảnh ---- */
  .luoi-anh{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .luoi-anh .anh{aspect-ratio:1}
  @media(max-width:640px){.luoi-anh{grid-template-columns:repeat(2,1fr)}}

  /* ================= Cột phải ================= */
  .canh .hop-dau h2{background:var(--do);font-size:15px}
  .canh .hop-dau{border-bottom-color:var(--do)}

  .giole-bang{width:100%;border-collapse:collapse;font-size:14px}
  .giole-bang th{
    background:var(--xanh-nhat);color:var(--xanh);font-family:"Roboto Condensed",sans-serif;
    font-size:13px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:7px 10px
  }
  .giole-bang td{padding:8px 10px;border-top:1px solid var(--vien)}
  .giole-bang td:last-child{text-align:right;font-weight:700;color:var(--xanh);white-space:nowrap}
  .giole-bang tr.homnay td{background:#FFF7E0}
  .giole-bang tr.homnay td:first-child::after{
    content:"hôm nay";margin-left:7px;background:var(--vang);color:#4A3400;
    font-size:10.5px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:3px;letter-spacing:.04em
  }
  .ghichu{font-size:12.5px;color:var(--chu-mo);padding:10px 12px;background:#FAFBFC;border-top:1px solid var(--vien)}

  .phungvu{padding:16px;text-align:center}
  .phungvu .ngay-lon{font-family:"Roboto Condensed",sans-serif;font-size:52px;font-weight:700;line-height:1;color:var(--do)}
  .phungvu .thang{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--chu-mo)}
  .phungvu .le{margin-top:10px;font-weight:500;font-size:15px}
  .phungvu .mau{
    display:inline-block;margin-top:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
    background:#2F6B4F;color:#fff;padding:2px 10px;border-radius:3px
  }
  .phungvu .doc{margin-top:12px;text-align:left;font-size:13.5px;border-top:1px solid var(--vien);padding-top:10px}
  .phungvu .doc div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
  .phungvu .doc b{color:var(--xanh);font-weight:500}

  .lienket{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
  .lienket a{
    display:grid;place-items:center;text-align:center;gap:4px;padding:12px 8px;
    background:#F7F9FB;border:1px solid var(--vien);font-size:12.5px;font-weight:500;color:var(--xanh);
    min-height:74px;transition:.2s
  }
  .lienket a:hover{background:var(--xanh);color:#fff;border-color:var(--xanh)}
  .lienket .bieu{font-size:20px}

  .truycap{padding:12px 14px;font-size:13.5px}
  .truycap div{display:flex;justify-content:space-between;padding:4px 0;border-top:1px dotted var(--vien)}
  .truycap div:first-child{border-top:0}
  .truycap b{font-variant-numeric:tabular-nums;color:var(--do)}

  /* ================= Chân trang ================= */
  footer{background:#082C4E;color:#AFC3D6;margin-top:10px}
  .chan{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding:34px 0 26px}
  .chan h4{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;
    padding-bottom:8px;border-bottom:2px solid var(--do);display:inline-block}
  .chan p{margin:0 0 8px;font-size:14px}
  .chan ul{list-style:none;margin:0;padding:0;font-size:14px}
  .chan li{padding:3px 0}
  .chan a:hover{color:#fff}
  .chan-cuoi{border-top:1px solid rgba(255,255,255,.12);padding:14px 0;font-size:12.5px;
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  @media(max-width:820px){.chan{grid-template-columns:1fr;gap:24px}}


  /* ảnh thật: thả file vào thư mục anh/ là tự hiện, thiếu file thì giữ ô giữ chỗ */
  .anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .anh.co-anh::before{display:none}

  :focus-visible{outline:2px solid var(--vang);outline-offset:2px}
  @media(prefers-reduced-motion:reduce){.tinmoi .chay span{animation:none;padding-left:0}}

  /* ================= Thân bài viết =================
     Khớp với content_style của trình soạn thảo trong trang quản trị
     (public/js/soan-thao.js): sửa một bên thì sửa cả bên kia, để bài đăng
     ra đúng như người soạn nhìn thấy lúc gõ. */
  /* Đo dòng áp cho khối chữ; ảnh, lưới ảnh, video được trải hết bề ngang cột */
  .than-bai > p,.than-bai > h2,.than-bai > h3,.than-bai > h4,.than-bai > ul,.than-bai > ol,
  .than-bai > blockquote,.than-bai > pre,.than-bai > dl{max-width:72ch}
  .than-bai > :first-child{margin-top:0}
  .than-bai p{margin:0 0 1em}
  .than-bai h2,.than-bai h3,.than-bai h4{
    font-family:"Roboto Condensed",Roboto,sans-serif;line-height:1.3;margin:1.5em 0 .5em;color:var(--xanh)
  }
  .than-bai h2{font-size:1.4em}
  .than-bai h3{font-size:1.2em}
  .than-bai h4{font-size:1.08em}
  .than-bai a{color:var(--xanh);text-decoration:underline;text-underline-offset:2px}
  .than-bai img{max-width:100%;height:auto;margin:1.2em 0}
  .than-bai figure{margin:1.4em 0}
  .than-bai figcaption{font-size:.85em;color:var(--chu-mo);text-align:center;margin-top:.5em}
  .than-bai blockquote{
    margin:1.4em 0;padding:.2em 0 .2em 1.1em;
    border-left:3px solid var(--xanh);color:#3A4750;font-style:italic
  }
  .than-bai ul,.than-bai ol{margin:0 0 1em;padding-left:1.5em}
  .than-bai li{margin-bottom:.35em}
  .than-bai hr{border:0;border-top:1px solid var(--vien);margin:2em 0}
  .than-bai pre{
    background:var(--xanh-nhat);padding:12px 14px;overflow-x:auto;
    font-size:.92em;line-height:1.5;margin:1.2em 0
  }
  .than-bai table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.96em}
  .than-bai table td,.than-bai table th{border:1px solid var(--vien);padding:8px 11px;text-align:left}
  .than-bai table th{background:var(--xanh-nhat);font-weight:600}
  .than-bai iframe{max-width:100%;margin:1.4em 0;aspect-ratio:16/9;width:100%;height:auto;border:0}
  .than-bai .bo-anh{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:1.4em 0}
  .than-bai .bo-anh figure{margin:0}
  .than-bai .bo-anh img{margin:0;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--xanh-nhat)}
  .than-bai .bo-anh figure:only-child{grid-column:1/-1}
  .than-bai .bo-anh figure:only-child img{aspect-ratio:auto}
  .than-bai .bo-anh a{display:block}
  @media(max-width:480px){.than-bai .bo-anh{grid-template-columns:1fr}}
  /* Bảng rộng hơn khung thì cho cuộn ngang thay vì phá vỡ bố cục trang */
  @media(max-width:560px){
    .than-bai table{display:block;overflow-x:auto;white-space:nowrap}
  }

  /* ================= Trang bài viết ================= */
  .bai{padding:0}
  .bai-dau{padding:22px 24px 16px;border-bottom:1px solid var(--vien)}
  .bai-muc{
    display:inline-block;background:var(--do);color:#fff;font-family:"Roboto Condensed",sans-serif;
    font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;margin-bottom:12px
  }
  .bai-muc:hover{background:var(--xanh)}
  .bai-dau h1{font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:700;line-height:1.22;color:var(--xanh)}
  .bai-dau .meta{margin-top:10px;font-size:13px}
  .bai-dau .meta i:first-child{color:var(--do);font-weight:500}
  .bai-anh-dau{margin:0;background:var(--xanh-nhat);border-bottom:1px solid var(--vien)}
  .bai-anh-dau img{width:100%;max-height:560px;object-fit:contain;margin:0 auto}
  .bai-noi{padding:22px 24px 6px;font-size:17px;line-height:1.7}
  .bai-noi > :first-child{margin-top:0}
  .bai-cuoi{
    display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 24px 18px;border-top:1px solid var(--vien);
    font-size:13.5px;background:#FAFBFC
  }
  .bai-cuoi a{color:var(--xanh);font-weight:500}
  .bai-cuoi a:hover{color:var(--do)}
  @media(max-width:640px){
    .bai-dau,.bai-noi,.bai-cuoi{padding-left:16px;padding-right:16px}
    .bai-noi{font-size:16px}
  }

  /* Bài mới ở cột phải */
  .bai-moi{list-style:none;margin:0;padding:6px 12px}
  .bai-moi li{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:9px 0;border-top:1px dashed var(--vien)}
  .bai-moi li:first-child{border-top:0}
  .bai-moi .anh{aspect-ratio:4/3}
  .bai-moi li > div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .bai-moi li > div a{font-size:13.5px;font-weight:500;line-height:1.35}
  .bai-moi li > div a:hover{color:var(--do)}
  .bai-moi .ngay{font-size:12px;color:var(--chu-mo)}

  /* Phóng to ảnh trong bài */
  .phong-to{
    position:fixed;inset:0;background:rgba(10,20,35,.92);display:grid;place-items:center;z-index:100;
    padding:24px;cursor:zoom-out
  }
  .phong-to img{max-width:100%;max-height:calc(100vh - 48px);object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .phong-to button{
    position:absolute;top:14px;right:16px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer
  }
  .than-bai a.anh-lon,.bai-anh-dau a.anh-lon{cursor:zoom-in;text-decoration:none}