/* ======================================================================
   dauan.css — layout trang Dấu Ấn (/DauAn.aspx)
   ----------------------------------------------------------------------
   Bóc từ <style> inline trong DauAn.aspx [2026-08-18] theo luật "layout ở
   file CSS riêng, .aspx chỉ nhúng dữ liệu". Chỉ trang Dấu Ấn dùng bộ .da-*.
   Xanh thương hiệu dùng token --cq-green/--cq-navy (Theme.css). Các màu tối
   trang trí (#0f2b3d, nâu banner…) là riêng của trang này, giữ nguyên.
   ====================================================================== */
.da-wrap { max-width: 1240px; margin: 0 auto; padding: 18px 14px 60px; }

/* ===== CHIA DOI TRANG ===== */
/* 2 cột cao bằng nhau: cột phải giãn theo chiều cao cột trái.
   Nhân vật 1 phần — Ý tưởng 2 phần màn hình. Một khoảng cách duy nhất. */
.da-wrap { --g: 8px; }
.da-split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--g); align-items: stretch; margin-bottom: var(--g); }
.da-split > div { display: flex; flex-direction: column; min-height: 0; }
.da-bento { flex: 1; }

.da-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin: 0 0 12px; }
.da-head h2 { font-size: 19px; font-weight: 800; color:var(--cq-navy); margin:0; }
.da-head .sub { font-size: 12.5px; color:#8593a3; }

/* ===== TRÁI: lưới KTS lệch, ô đầu bự nhất — 1 ô lớn + 9 ô vuông (3x3) ===== */
.da-bento { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--g); align-content: start; }
.da-b { position:relative; overflow:hidden; background:#0f2b3d; display:block; text-decoration:none; aspect-ratio: 1/1; }
.da-b img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease, opacity .3s; }
.da-b:hover img { transform: scale(1.06); opacity:.92; }
.da-b .cap { position:absolute; left:0; right:0; bottom:0; padding: 9px 11px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color:#fff; }
.da-b .nm { font-size: 11.5px; font-weight:700; line-height:1.25; display:block; }
.da-b .ro { display:none; }
.da-b.big .ro, .da-pair .da-b .ro { display:block; font-size: 11px; opacity:.85; margin-top:2px; }
.da-b .cap { padding: 7px 8px; }
.da-b .no { display: none; }
.da-b.big { grid-column: span 3; aspect-ratio: 16/9; }
.da-b.big .cap { padding: 14px 16px; }
.da-b.big .nm { font-size: 19px; }
.da-b.big .ro { font-size: 12.5px; }

/* ===== BANNER RIÊNG (HTML thuần, không phải bài viết) — TOP KTS ===== */
.da-banner { grid-column: span 2; height: 100%; background: linear-gradient(115deg,#0d3d52 0%,var(--cq-green) 100%);
             color:#fff; display:flex; flex-direction:column; justify-content:center; padding: 20px 24px;
             text-decoration:none; position:relative; overflow:hidden; }
.da-banner::after { content:''; position:absolute; right:-40px; bottom:-40px; width:150px; height:150px;
                    border:14px solid rgba(255,255,255,.10); border-radius:50%; }
.da-banner .bn-k { font-size: 11px; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.da-banner .bn-t { font-size: 24px; font-weight: 900; line-height:1.05; margin: 4px 0 6px; letter-spacing:-.01em; }
.da-banner .bn-s { font-size: 11.5px; line-height:1.45; opacity:.92; }
.da-banner .bn-a { margin-top: 10px; font-size: 12px; font-weight:700; }
.da-banner:hover .bn-a { text-decoration: underline; }

/* Banner lớn chiếm cả hàng (ô số 1) + banner vuông 1 ô (banner thứ 2) */
.da-bannerbig { grid-column: span 3; height: auto; aspect-ratio: 16/9; padding: 30px 34px; }
.da-bannerbig .bn-t { font-size: 38px; line-height:1.05; letter-spacing:-.015em; }
.da-bannerbig .bn-s { font-size: 16px; margin-top: 4px; }
.da-banner2 { height: 100%; grid-column: span 1; background: linear-gradient(150deg,#8A5A2B 0%,#c49a5a 100%); }
.da-banner2 .bn-t { font-size: 17px; }
.da-banner2 .bn-s { font-size: 10.5px; }

/* Ô chia làm 4 (2x2 trong 1 ô vuông) */
.da-quad { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--g); aspect-ratio: 1/1; }
.da-quad .da-b { aspect-ratio: auto; height: 100%; }
.da-quad .da-b .nm { font-size: 9.5px; line-height:1.15; }
.da-quad .da-b .cap { padding: 5px 6px; }
.da-quad .da-b .no { font-size: 9px; padding: 0 4px; top:4px; left:5px; }

/* ===== PHẢI: 1 khung chiếu (1 ảnh một lúc) ===== */
.da-show { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.da-stage { position:relative; width:100%; flex: 1; min-height: 420px; background:#0f2b3d; overflow:hidden; }
.da-stage a { position:absolute; inset:0; opacity:0; transition: opacity .8s ease; text-decoration:none; }
.da-stage a.on { opacity:1; }
.da-stage img { width:100%; height:100%; object-fit:cover; display:block; }
.da-stage .cap { position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(transparent, rgba(0,0,0,.82)); color:#fff; }
.da-stage .nm { font-size:15px; font-weight:700; line-height:1.35; display:block; }
.da-stage .mt { font-size:11.5px; opacity:.85; display:block; margin-top:3px; }

/* Banner đè lên góc trên phải khung chiếu */
.da-tag { position:absolute; top:0; right:0; z-index:5; padding:28px 34px; color:#fff;
          background: linear-gradient(115deg, rgba(13,61,82,.94) 0%, rgba(18,131,106,.94) 100%);
          max-width: 66%; pointer-events:none; }
.da-tag .tg-k { display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.da-tag .tg-t { display:block; font-size:38px; font-weight:900; line-height:1.05; letter-spacing:-.015em; }
.da-tag .tg-s { display:block; font-size:16px; line-height:1.4; opacity:.9; margin-top:10px; }

/* Chấm điều hướng: đè lên đáy khung chiếu -> không làm cột phải cao hơn cột trái */
.da-dots { display:flex; gap: 4px; position:absolute; left:0; right:0; bottom:0; z-index:6; }

/* 4 view riêng (2x2). Hàng trên cao đúng bằng banner bên trái (ô 16/9). */
.da-quadview { display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: var(--g); flex:1; min-height:0; }
.da-quadview > .da-show:nth-child(1), .da-quadview > .da-show:nth-child(2) { aspect-ratio: 16/9; }
.da-quadview.da-canh > .da-show { aspect-ratio: auto; }

/* Ô thứ 4: banner Giải thưởng 2027 (coming soon) */
.da-giai { position:relative; overflow:hidden; min-height:0; color:#fff;
           background: linear-gradient(135deg,#1a1d24 0%,#0d3d52 55%,var(--cq-green) 100%);
           display:flex; flex-direction:column; justify-content:center; padding: 26px 30px; }
.da-giai::after { content:''; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px;
                  border:16px solid rgba(255,255,255,.08); border-radius:50%; }
.da-giai .gt-k { font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.da-giai .gt-t { font-size:30px; font-weight:900; line-height:1.05; letter-spacing:-.015em; margin:8px 0 10px; }
.da-giai .gt-s { font-size:13px; letter-spacing:.06em; opacity:.85;
                 border:1px solid rgba(255,255,255,.45); padding:5px 12px; align-self:flex-start; }
.da-quadview .da-show { min-height:0; }
.da-quadview .da-stage { min-height:0; }
.da-quadview .da-stage .nm { font-size: 12.5px; }
.da-quadview .da-stage .cap { padding: 10px 12px; }

/* Bỏ tiêu đề trên ảnh */
.da-b .cap, .da-stage .cap { display: none; }
.da-dots i { flex:1; height:3px; background:#d7dfe6; cursor:pointer; }
.da-dots i.on { background:var(--cq-green); }

@media (max-width: 900px) {
    .da-split { grid-template-columns: 1fr; }
    .da-bento { grid-template-columns: repeat(3,1fr); }
    .da-b.big { grid-column: span 3; }
    .da-stage { flex: none; aspect-ratio: 4/3; min-height: 0; }
}