/* =====================================================================
   BỘ THẺ SCE (v4.20.0, 21/10/2026) — nạp toàn site, sau style.css.
   Đồng bộ mọi loại thẻ theo kiểu trang chủ mới (Untitled UI):
   bo góc 20px, viền mảnh, nổi lên khi rê chuột, ảnh phóng chậm, chữ đỏ khi rê.
   1. Thẻ bài viết dùng chung  .sce-pc            (Trang Quốc gia "Cẩm nang", có thể dùng ở nơi khác)
   2. Lưới blog                 .blog-grid .hentry (template của theme cha — chỉ đổi CSS)
   3. Bài nổi bật trang blog    .sce-blog-featured (ảnh phủ, chữ trắng trên máy tính)
   4. Danh sách bài liên quan   .related-post-item
   5. Thẻ dẫn về Trang Quốc gia trong bài viết  .sce-pillar-card / .sce-pillar-inline
   Chỉ dùng token màu --sce-* → chế độ tối tự hoạt động. Hiệu ứng tắt khi "giảm chuyển động".
   ===================================================================== */
:root{ --sce-card-r:20px; --sce-card-shadow:0 1px 2px rgba(16,24,40,.05); --sce-card-shadow-hover:0 24px 40px -16px rgba(16,24,40,.22);
  --sce-card-ease:cubic-bezier(.2,.7,.2,1); }

/* ---------- 1. Thẻ bài viết dùng chung ---------- */
.sce-pc{ position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--sce-card-r); background:var(--sce-white);
  border:1px solid var(--sce-line); color:var(--sce-ink)!important; text-decoration:none!important; box-shadow:var(--sce-card-shadow);
  transition:transform .35s var(--sce-card-ease), box-shadow .35s ease, border-color .35s ease; }
.sce-pc:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--sce-red) 25%,var(--sce-line)); box-shadow:var(--sce-card-shadow-hover); }
.sce-pc__img{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--sce-bg); }
.sce-pc__img img{ position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover; transition:transform .8s var(--sce-card-ease); }
.sce-pc:hover .sce-pc__img img{ transform:scale(1.07); }
.sce-pc__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--sce-ink-faint); }
.sce-pc__ph .sce-icon{ width:40px!important; height:40px!important; }
.sce-pc__cat{ position:absolute; top:14px; left:14px; z-index:2; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--sce-ink);
  background:color-mix(in srgb,var(--sce-white) 82%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(16,24,40,.12); }
.sce-pc__body{ display:flex; flex-direction:column; gap:8px; flex:1; padding:18px 22px 20px; }
.sce-pc__meta{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--sce-ink-soft); }
.sce-pc__meta i{ font-style:normal; color:var(--sce-ink-faint); }
.sce-pc__body strong{ font-size:17px; font-weight:700; line-height:1.4; letter-spacing:-.01em; color:var(--sce-ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s ease; }
.sce-pc:hover .sce-pc__body strong{ color:var(--sce-red); }
.sce-pc__more{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--sce-red); }
.sce-pc__more .sce-icon{ width:16px!important; height:16px!important; transition:transform .25s ease; }
.sce-pc:hover .sce-pc__more .sce-icon{ transform:translateX(4px); }

/* ---------- 2. Lưới blog (markup theme cha) ---------- */
.blog-grid .hentry .post-content-archive-wrap{ border-radius:var(--sce-card-r)!important; box-shadow:var(--sce-card-shadow)!important;
  transition:transform .35s var(--sce-card-ease), box-shadow .35s ease, border-color .35s ease!important; }
.blog-grid .hentry:hover .post-content-archive-wrap{ transform:translateY(-6px)!important; box-shadow:var(--sce-card-shadow-hover)!important;
  border-color:color-mix(in srgb,var(--sce-red) 25%,var(--sce-line))!important; }
.blog-grid .post-media{ aspect-ratio:16/9!important; }
.blog-grid .post-media img{ transition:transform .8s var(--sce-card-ease)!important; }
.blog-grid .hentry:hover .post-media img{ transform:scale(1.07)!important; }
.blog-grid .hentry .post-content-wrap{ padding:18px 22px 20px!important; }
.blog-grid .sce-post-cat-badge{ padding:5px 12px; font-size:12px; letter-spacing:.03em; background:var(--sce-red-softer); border:1px solid color-mix(in srgb,var(--sce-red) 18%,transparent); }
.blog-grid .hentry .post-title{ font-size:17px!important; letter-spacing:-.01em; -webkit-line-clamp:3!important; transition:color .2s ease; }
.blog-grid .hentry:hover .post-title a{ color:var(--sce-red)!important; }
.blog-grid .hentry .post-excerpt{ -webkit-line-clamp:2!important; }
.blog-grid .hentry:hover .post-link a .sce-icon{ transform:translateX(4px); }
/* Chế độ Danh sách (nút đổi Lưới/Danh sách) giữ nguyên bố cục, chỉ đồng bộ bo góc/bóng ở trên. */

/* ---------- 3. Bài nổi bật trang blog: ảnh phủ, chữ trắng (máy tính) ---------- */
.sce-blog-featured{ border-radius:24px!important; transition:transform .35s var(--sce-card-ease), box-shadow .35s ease!important; }
.sce-blog-featured:hover{ transform:translateY(-4px)!important; box-shadow:var(--sce-card-shadow-hover)!important; }
.sce-blog-featured-img img{ transition:transform .8s var(--sce-card-ease); }
.sce-blog-featured:hover .sce-blog-featured-img img{ transform:scale(1.05); }
@media (min-width:900px){
  .sce-blog-featured{ position:relative; isolation:isolate; display:block!important; min-height:440px; border:0!important; }
  .sce-blog-featured-img{ position:absolute!important; inset:0; min-height:0!important; z-index:-1; }
  .sce-blog-featured-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,24,40,.92) 0%,rgba(16,24,40,.7) 42%,rgba(16,24,40,.1) 75%); }
  .sce-blog-featured-body{ position:relative; max-width:58%; min-height:440px; justify-content:flex-end!important; padding:40px 44px!important; }
  .sce-blog-featured-body h2{ color:#fff!important; font-size:clamp(26px,2.6vw,34px)!important; }
  .sce-blog-featured-body p{ color:rgba(255,255,255,.85)!important; }
  .sce-blog-featured-meta,.sce-blog-featured-meta .sce-icon{ color:rgba(255,255,255,.8)!important; }
  .sce-blog-featured-tag{ background:var(--sce-red)!important; color:#fff!important; }
}

/* ---------- 4. Bài liên quan (danh sách gọn cuối bài) ---------- */
.related-post-item{ border-radius:14px; padding-left:8px!important; padding-right:8px!important; transition:background-color .25s ease, gap .25s ease!important; }
.related-post-item:hover{ background:var(--sce-red-softer); }
.related-post-thumb{ border-radius:12px!important; overflow:hidden; }
.related-post-thumb img{ transition:transform .6s var(--sce-card-ease); }
.related-post-item:hover .related-post-thumb img{ transform:scale(1.08); }

/* ---------- 5. Thẻ dẫn về Trang Quốc gia trong bài viết ---------- */
.sce-pillar-card{ position:relative; isolation:isolate; overflow:hidden; border:1px solid transparent!important;
  background:linear-gradient(var(--sce-white),var(--sce-white)) padding-box,
             linear-gradient(140deg,color-mix(in srgb,var(--sce-red) 50%,var(--sce-line)),var(--sce-line) 45%) border-box!important;
  transition:transform .35s var(--sce-card-ease), box-shadow .35s ease; }
.sce-pillar-card:hover{ transform:translateY(-4px); box-shadow:var(--sce-card-shadow-hover)!important; }
.sce-pillar-card::after{ content:attr(data-code); position:absolute; right:-8px; bottom:-30px; z-index:-1; font:800 150px/1 var(--sce-font-display); letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb,var(--sce-red) 10%,transparent); pointer-events:none; transition:transform .6s var(--sce-card-ease); }
.sce-pillar-card:hover::after{ transform:translate(-8px,-8px); }
.sce-pillar-card__code{ display:inline-grid; place-items:center; width:44px; height:44px; margin:0 0 12px; border-radius:12px; color:#fff; font:800 14px/1 var(--sce-font-body); letter-spacing:.04em;
  background:linear-gradient(135deg,var(--sce-red),var(--sce-red-dark)); box-shadow:0 0 0 4px var(--sce-red-softer),0 6px 14px -6px color-mix(in srgb,var(--sce-red) 70%,transparent); }
.sce-pillar-card__main{ display:flex; flex-direction:column; align-items:flex-start; }
.sce-pillar-card__facts{ background:color-mix(in srgb,var(--sce-bg) 85%,transparent)!important; backdrop-filter:blur(4px); }
.sce-pillar-inline{ border-radius:14px!important; transition:transform .3s var(--sce-card-ease), box-shadow .3s ease; }
.sce-pillar-inline:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -12px rgba(16,24,40,.25); }

@media (prefers-reduced-motion:reduce){
  .sce-pc,.sce-pc *,.blog-grid .hentry *,.sce-blog-featured,.sce-blog-featured *,.related-post-item,.related-post-item *,.sce-pillar-card,.sce-pillar-card::after,.sce-pillar-inline{ transition:none!important; }
}