/*!
 * * PureCSS Theme - Phuong Mai Law
 * * A clean and modern theme for Grav CMS using Pure CSS
 * */
:root {
  --primary-color: #d14f1c;
  --secondary-color: #107c10;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --border-color: #ddd;
  --spacing-unit: 1rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-image: url("https://i.gyazo.com/6692921bcfe697df45523d46044c518e.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

body.template-default,
body.template-article,
body.template-article-list,
body.template-lienhe,
body.template-dangxaydung {
  background-image: none;
  background-color: var(--light-gray);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin: var(--spacing-unit) 0 0.5rem 0;
  font-weight: 600;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

.page-content h2, .page-content h3, .page-content h4 {
  color: var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  padding-top: 0.4rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin: 0.5rem 0 1rem 0;
}

.container {
  max-width: 1265px;
  margin: 0 auto;
  padding: 0 var(--spacing-unit);
  width: 100%;
}
.container--xl {
  max-width: 1265px;
}

header {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 0.4rem 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-cell {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  transition: font-size 0.3s ease;
  white-space: nowrap;
}
.logo img {
  height: 125px;
  margin-right: 0;
  transition: height 0.3s ease;
}

.logo--mobile {
  display: none;
}

nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
nav a {
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease;
}
nav a:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.main-nav {
  display: none;
  align-items: center;
  width: 100%;
}

.menu {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}

.header-right .menu-item:last-child > .menu-link {
  padding-right: 0;
}

.menu-item {
  position: relative;
  margin: 0;
  padding: 0;
}

.menu-link {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: padding 0.3s ease, color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  /* Mục cha không có link thật (Download, Giới thiệu...) render bằng <span>,
     mặc định trình duyệt hiện con trỏ chọn chữ (I-beam) thay vì bàn tay — vẫn
     bấm/hover được để mở submenu nên nên có cursor pointer như link thật. */
  cursor: pointer;
}
.menu-link:hover {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  background-color: rgba(3, 69, 119, 0.05);
}

.has-submenu {
  position: relative;
}
.has-submenu > .menu-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.has-submenu:hover .submenu, .has-submenu.active .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.has-submenu:hover > .menu-link::after, .has-submenu.active > .menu-link::after {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
  border-top: 3px solid var(--primary-color);
}
.submenu .menu-item {
  margin: 0;
  padding: 0;
}
.submenu .menu-link {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  border-bottom: none;
}
.submenu .menu-link:hover {
  background-color: var(--light-gray);
  border-bottom: none;
}

.main-nav__logo {
  display: none;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.main-nav__logo img {
  height: 48px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  width: 30px;
  height: 24px;
  justify-content: center;
  z-index: 1001;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.hero-slider {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  aspect-ratio: 1672/635.175;
  overflow: hidden;
  background: #000;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.slide-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-color);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.slider-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-color);
}

.slider-btn-prev {
  left: 20px;
}

.slider-btn-next {
  right: 20px;
}

.slider-paging {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.paging-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.paging-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}
.paging-dot.active {
  background: rgb(255, 255, 255);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(3, 69, 119, 0.3);
}

main {
  min-height: calc(100vh - 200px);
  padding: 2rem 0;
}

.doingu {
  padding: 4rem 0;
  background: rgba(255, 255, 255, 0.93);
}
.doingu__header {
  text-align: center;
  margin-bottom: 3rem;
}
.doingu__heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.doingu__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.doingu__divider::before, .doingu__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 80px;
  background: var(--border-color);
}
.doingu__divider span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  margin: 0 4px;
}
.doingu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.doingu__card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.doingu__avatar-wrap {
  flex-shrink: 0;
}
.doingu__avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
  display: block;
  background: var(--light-gray);
}
.doingu__info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.doingu__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.doingu__name a {
  color: var(--primary-color);
  text-decoration: none;
}
.doingu__name a:hover {
  text-decoration: underline;
}
.doingu__subtitle {
  font-size: 0.8rem;
  color: #888;
  margin: 0.1rem 0 0;
  line-height: 1.3;
}
.doingu__summary {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}
.doingu__link {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  text-decoration: none;
  padding: 0.4rem 1.1rem;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.doingu__link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  text-decoration: none;
}
.doingu__footer {
  text-align: center;
  margin-top: 2.5rem;
}
.doingu__more {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
.doingu__more:hover {
  text-decoration: underline;
}

.kienthucphaply {
  padding: 4rem 0;
  background: var(--light-gray);
}
.kienthucphaply__header {
  text-align: center;
  margin-bottom: 3rem;
}
.kienthucphaply__heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.kienthucphaply__divider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kienthucphaply__divider::before, .kienthucphaply__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 80px;
  background: var(--border-color);
}
.kienthucphaply__divider span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  margin: 0 4px;
}
.kienthucphaply__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.kienthucphaply__card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}
.kienthucphaply__card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.kienthucphaply__thumb-link {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.kienthucphaply__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.kienthucphaply__thumb:hover {
  transform: scale(1.04);
}
.kienthucphaply__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.kienthucphaply__date {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
}
.kienthucphaply__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.kienthucphaply__title a {
  color: var(--primary-color);
  text-decoration: none;
}
.kienthucphaply__title a:hover {
  color: var(--primary-color);
}
.kienthucphaply__summary {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kienthucphaply__btn {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  text-decoration: none;
  border-radius: 4px;
  padding: 0.4rem 1.1rem;
  align-self: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kienthucphaply__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  text-decoration: none;
}
.kienthucphaply__footer {
  text-align: center;
  margin-top: 2.5rem;
}
.kienthucphaply__more {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  padding: 0.6rem 2rem;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}
.kienthucphaply__more:hover {
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
}

.logoluatdoan {
  padding: 3rem 0;
  text-align: center;
  background: #fff;
}
.logoluatdoan__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.logoluatdoan__img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  display: inline-block;
}

.tamnhinsumenh {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--primary-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tamnhinsumenh__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.tamnhinsumenh__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 80vh;
}
.tamnhinsumenh__content {
  width: 50%;
  padding: 4rem 0;
}
.tamnhinsumenh__heading {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: normal;
  margin: 0 0 1rem;
}
.tamnhinsumenh__divider {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}
.tamnhinsumenh__divider::before, .tamnhinsumenh__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 60px;
  background: rgba(255, 255, 255, 0.5);
}
.tamnhinsumenh__divider span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 0 4px;
}
.tamnhinsumenh__block {
  margin-bottom: 2rem;
}
.tamnhinsumenh__block:last-child {
  margin-bottom: 0;
}
.tamnhinsumenh__subheading {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tamnhinsumenh__text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.93);
  line-height: 1.75;
  margin: 0;
}
.tamnhinsumenh__body {
  position: relative;
}
.tamnhinsumenh__body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 1.75rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tamnhinsumenh__body h3:first-child {
  margin-top: 0;
}
.tamnhinsumenh__body p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.93);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}
.tamnhinsumenh__body p:last-child {
  margin-bottom: 0;
}

.dichvucotloi {
  background: rgba(255, 255, 255, 0.93);
  padding: 4rem 0;
}
.dichvucotloi__header {
  text-align: center;
  padding: 0 0 0;
}
.dichvucotloi__heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.dichvucotloi__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.dichvucotloi__divider::before, .dichvucotloi__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 80px;
  background: var(--border-color);
}
.dichvucotloi__divider span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  margin: 0 4px;
}
.dichvucotloi__panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.dichvucotloi__panel {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  align-items: start;
  padding: 2rem;
  gap: 1.5rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dichvucotloi__panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.dichvucotloi__panel:nth-child(1) {
  transition-delay: 0s;
}
.dichvucotloi__panel:nth-child(2) {
  transition-delay: 0.12s;
}
.dichvucotloi__panel:nth-child(3) {
  transition-delay: 0.24s;
}
.dichvucotloi__panel .dichvucotloi__title {
  color: var(--primary-color);
}
.dichvucotloi__panel .dichvucotloi__desc {
  color: var(--text-color);
}
.dichvucotloi__title {
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}
.dichvucotloi__desc {
  font-size: 1rem;
  text-align: justify;
  line-height: 1.7;
  margin: 0;
  opacity: 0.9;
}
.dichvucotloi__btn {
  display: inline-block;
  align-self: start;
  justify-self: center;
  padding: 0.75rem 2.75rem 0.75rem 2.25rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--primary-color) url("https://eznotary.ca/sites/all/themes/bootstrapsub/images/viewmorebullet.svg") no-repeat right 1.1rem center/8px 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dichvucotloi__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .dichvucotloi__panel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.quytrinh {
  background-color: var(--light-gray);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 0;
}
.quytrinh__header {
  text-align: center;
  padding: 0 0 0;
}
.quytrinh__heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--primary-color);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.quytrinh__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}
.quytrinh__divider::before, .quytrinh__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 80px;
  background: var(--border-color);
}
.quytrinh__divider span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-color);
  margin: 0 4px;
}
.quytrinh__steps {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}
.quytrinh__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.quytrinh__step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.quytrinh__step:nth-child(1) {
  transition-delay: 0s;
}
.quytrinh__step:nth-child(2) {
  transition-delay: 0.12s;
}
.quytrinh__step:nth-child(3) {
  transition-delay: 0.24s;
}
.quytrinh__step:nth-child(4) {
  transition-delay: 0.36s;
}
.quytrinh__step:nth-child(5) {
  transition-delay: 0.48s;
}
@media (prefers-reduced-motion: reduce) {
  .quytrinh__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.quytrinh__circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: var(--primary-color);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.quytrinh__step:not(.active) .quytrinh__circle:hover {
  background: #58595b;
  border-color: #58595b;
}
.quytrinh__step.active .quytrinh__circle {
  background: #fff;
  color: var(--text-color);
  border-color: var(--text-color);
}
.quytrinh__stem {
  width: 1px;
  height: 2.5rem;
  background: var(--text-color);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.quytrinh__step.active .quytrinh__stem {
  opacity: 1;
}
.quytrinh__baseline {
  height: 1px;
  background: var(--text-color);
  opacity: 0.6;
  margin: 0 0 3rem;
}
.quytrinh__panel {
  display: none;
  text-align: center;
  max-width: 864px;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.quytrinh__panel.active {
  display: block;
  height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.quytrinh__panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 1rem;
}
.quytrinh__panel-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-color);
  opacity: 0.9;
  margin: 0;
}

.page-content {
  max-width: 792px;
  margin: 3rem auto 0;
}
.page-content p {
  text-align: justify;
}
.page-content img.center {
  display: block;
  margin: 0 auto;
}
.page-content img.portrait-float {
  display: block;
  width: 100%;
  margin: 0 auto 1.5rem;
}
@media (min-width: 1024px) {
  .page-content img.portrait-float {
    float: right;
    width: 33%;
    margin: 0 0 1rem 2rem;
  }
}
.page-content p:has(> img.credential-grid) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  margin: 2rem 0;
}
@media (max-width: 480px) {
  .page-content p:has(> img.credential-grid) {
    grid-template-columns: 1fr;
  }
}
.page-content img.credential-grid {
  width: 100%;
  height: auto;
}
.page-content p.cta-wrap {
  text-align: center;
  margin: 2rem 0;
}
.page-content a.cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0 28px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.page-content a.cta-button:hover {
  background-color: var(--secondary-color);
  color: #fff;
  text-decoration: none;
}

body.template-article {
  background-image: url("https://i.gyazo.com/d6c1b4f87ad0883052b3816b7d7faac9.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: fixed;
}

.page-hero {
  position: relative;
  background-image: url("https://i.gyazo.com/36409e2985ca18830bcb5ecc263914b1.png");
  background-size: cover;
  background-position: center;
  padding: 2.5rem 0;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--primary-color) 82%, transparent);
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero--light {
  background-image: none;
  background-color: #fff;
}
.page-hero--light::before {
  display: none;
}
.page-hero--light .page-hero__title {
  color: var(--primary-color);
}
.page-hero--light .page-hero__subtitle {
  color: #888;
}
.page-hero:not(.page-hero--simple) .page-hero__text {
  align-items: center;
  text-align: center;
}
.page-hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.page-hero__avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.page-hero__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.page-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.page-hero__subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-style: italic;
}
.page-hero__meta {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.25rem 0 0;
}
.page-hero__meta a {
  color: #fff;
  text-decoration: underline;
}

.luatsu__bio {
  font-size: 1.1rem;
  font-style: italic;
  color: #555;
  border-left: 3px solid var(--secondary-color);
  padding-left: 1rem;
  margin-bottom: 2rem;
}
.luatsu__facts {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.luatsu__block {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.luatsu__block-title {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin: 0 0 0.75rem;
}
.luatsu__list {
  margin: 0;
  padding-left: 1.25rem;
}
.luatsu__list li {
  margin-bottom: 0.35rem;
}

.article-list-page {
  background: #fff;
  padding: 3rem 0;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.article-card {
  position: relative;
  display: flex;
}
.article-card__link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.article-card__link:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.article-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.article-card__thumb--placeholder {
  background: var(--light-gray);
}
.article-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.article-card__date {
  font-size: 0.8rem;
  color: #999;
  margin: 0;
}
.article-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.4;
}
.article-card__excerpt {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__more {
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  padding: 0.4rem 1.1rem;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card__more:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
}

@media (max-width: 767px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .article-grid {
    grid-template-columns: 1fr;
  }
}
ul.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
ul.pagination li {
  display: flex;
}
ul.pagination li a, ul.pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
ul.pagination li a {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transition: background 0.2s ease, color 0.2s ease;
}
ul.pagination li a:hover {
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
}
ul.pagination li span {
  color: #bbb;
  border: 1px solid #e0e0e0;
}
ul.pagination li span.active {
  color: #fff;
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.related-posts {
  padding: 3rem 0 2rem;
}
.related-posts__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 1.5rem;
}
.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.related-posts__item {
  position: relative;
  display: flex;
}
.related-posts__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.related-posts__card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  text-decoration: none;
}
.related-posts__thumb {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
}
.related-posts__thumb--placeholder {
  background: var(--light-gray);
}
.related-posts__body {
  padding: 0.75rem 1rem;
}
.related-posts__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
.related-posts__subtitle {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  font-style: italic;
}
.related-posts__meta {
  font-size: 0.8rem;
  color: #888;
  margin: 0;
}

.coming-soon-page {
  background: #fff;
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coming-soon {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 520px;
  margin: 0 auto;
}
.coming-soon__icon {
  color: var(--primary-color);
  opacity: 0.6;
  margin-bottom: 1.5rem;
}
.coming-soon__icon svg {
  display: inline-block;
}
.coming-soon__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 1rem;
}
.coming-soon__desc {
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
  margin: 0 0 2rem;
}
.coming-soon__btn {
  display: inline-block;
  padding: 0.7rem 2.5rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.coming-soon__btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  text-decoration: none;
  color: #fff;
}

.maintenance-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.maintenance-box {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 520px;
  margin: 0 auto;
}
.maintenance-box__icon {
  color: var(--primary-color);
  opacity: 0.6;
  margin-bottom: 1.5rem;
}
.maintenance-box__icon svg {
  display: inline-block;
}
.maintenance-box__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 1rem;
}
.maintenance-box__desc {
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
}

.lienhe-page {
  background: #fff;
  padding: 4rem 0;
}

.lienhe-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: start;
}

.lienhe__heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 0.75rem;
}

.lienhe__desc {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 2rem;
}

.lienhe-booking {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-color);
}
.lienhe-booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.lienhe-booking__col {
  display: flex;
  flex-direction: column;
}
.lienhe-booking__col .lienhe__desc {
  flex: 1;
}
.lienhe-booking__col .lienhe__desc strong {
  color: var(--primary-color);
  font-weight: 700;
}
.lienhe-booking__btn {
  align-self: flex-start;
  padding: 0.7rem 1.75rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lienhe-booking__btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  color: #fff;
  text-decoration: none;
}

.lienhe-section {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-color);
}
.lienhe-section p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 1rem;
}
.lienhe-section p:last-child {
  margin-bottom: 0;
}
.lienhe-section strong {
  color: var(--primary-color);
  font-weight: 700;
}

.lienhe-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.lienhe-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.lienhe-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.lienhe-form__group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}
.lienhe-form__group label span {
  color: #e53e3e;
}
.lienhe-form__group input[type=text],
.lienhe-form__group input[type=email],
.lienhe-form__group select,
.lienhe-form__group textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
}
.lienhe-form__group input[type=text]:focus,
.lienhe-form__group input[type=email]:focus,
.lienhe-form__group select:focus,
.lienhe-form__group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(3, 69, 119, 0.1);
  background: #fff;
}
.lienhe-form__group textarea {
  resize: vertical;
  min-height: 130px;
}
.lienhe-form__btn {
  align-self: flex-start;
  padding: 0.7rem 2.5rem;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lienhe-form__btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(3, 69, 119, 0.35);
  background: var(--primary-color);
}
.lienhe-form__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}
.lienhe-form__success {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background: #e6f4ea;
  color: #1e7a34;
  font-size: 0.9rem;
  font-weight: 600;
}

.lienhe-info {
  background: var(--light-gray);
  border-radius: 6px;
  padding: 2rem;
}
.lienhe-info .lienhe__heading {
  margin-bottom: 1.5rem;
}

.lienhe-notice {
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.lienhe-notice p {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.lienhe-notice p:last-child {
  margin-bottom: 0;
}

.lienhe-office {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}
.lienhe-office:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.lienhe-office__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 0.5rem;
}
.lienhe-office__phone, .lienhe-office__address {
  font-size: 0.875rem;
  color: #555;
  margin: 0.3rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}
.lienhe-office__phone svg, .lienhe-office__address svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary-color);
}

.lienhe-map {
  width: 100%;
  height: 260px;
  margin-top: 0.75rem;
  border-radius: 6px;
  z-index: 0;
  text-align: left;
}

footer {
  background-color: var(--primary-color);
  background-image: url("../images/bgfooter.jpg");
  background-repeat: repeat;
  border-top: none;
  padding: 2.5rem 0;
  margin-top: 0;
  color: #fff;
}
footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer p {
  margin: 0.2rem 0;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col--logo {
  align-items: center;
  justify-content: flex-start;
}

.footer-col--logo img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-office p {
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-office p strong {
  color: #fff;
}

.footer-disclaimer p {
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1rem;
}
.footer-disclaimer p strong {
  color: #fff;
}
.footer-disclaimer p:first-child {
  font-size: 0.875rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.footer-bottom {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}
.footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.footer-bottom__row p {
  margin: 0;
}

.btn, button, input[type=submit], input[type=button] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.3s ease;
  text-decoration: none;
}

.btn:hover, button:hover, input[type=submit]:hover, input[type=button]:hover {
  background: var(--secondary-color);
}

/* Quy ước dùng chung cho MỌI nút bấm trên site (cả hệ màu sáng ở đây lẫn
   hệ "tactical" .cscd-btn/.cscd-icon-btn bên dưới): nút disabled luôn phải
   có pointer-events:none, không chỉ opacity. Lý do — nếu chỉ hạ opacity,
   một nút con cụ thể hơn (vd .lienhe-form__btn, .cscd-gallery__arrow) khai
   riêng background cho :disabled vẫn có thể bị chính quy tắc "button:hover"
   chung này (độ đặc thù cao hơn nền mặc định của class con vì có thêm
   :hover) đè lên khi rê chuột qua, làm nút disabled đổi sang màu hover
   (xanh lá --secondary-color) dù không còn tương tác được — pointer-events
   chặn hẳn sự kiện chuột nên :hover không bao giờ khớp trên nút disabled,
   bất kể độ đặc thù CSS. */
.btn:disabled, button:disabled, input[type=submit]:disabled, input[type=button]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-secondary {
  background: var(--secondary-color);
}
.btn-secondary:hover {
  background: #0d5e0f;
}

form {
  margin: 1rem 0;
}
form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color);
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=number],
form input[type=date],
form textarea,
form select {
  width: 100%;
  max-width: 500px;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(3, 69, 119, 0.1);
}
form textarea {
  resize: vertical;
  min-height: 150px;
}

ul, ol {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

code {
  background: var(--light-gray);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

pre {
  background: var(--light-gray);
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1rem 0;
}
pre code {
  background: none;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background: var(--light-gray);
  font-weight: 600;
}

.card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.card h2, .card h3 {
  margin-top: 0;
}

.alert {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  border-left: 4px solid;
}

.alert-info {
  background: #e7f3ff;
  border-color: var(--primary-color);
  color: #003366;
}

.alert-success {
  background: #e6f7ed;
  border-color: var(--secondary-color);
  color: #133300;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffc107;
  color: #664d00;
}

.alert-danger {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

@media (min-width: 1440px) {
  .container {
    max-width: 1265px;
  }
  .slider-btn {
    width: 60px;
    height: 60px;
    font-size: 1.75rem;
  }
  .slider-btn-prev {
    left: 32px;
  }
  .slider-btn-next {
    right: 32px;
  }
  .paging-dot {
    width: 14px;
    height: 14px;
  }
}
@media (max-width: 1439px) {
  .container {
    max-width: 1265px;
  }
  .slider-btn {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
  }
}
@media (max-width: 1023px) {
  .container {
    max-width: 100%;
  }
  .slider-btn {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
  .slider-btn-prev {
    left: 14px;
  }
  .slider-btn-next {
    right: 14px;
  }
  .kienthucphaply__grid,
  .related-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tamnhinsumenh__content {
    width: 70%;
  }
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-col--logo {
    grid-column: 1/-1;
    align-items: flex-start;
  }
  .quytrinh__panel.active {
    height: auto;
    overflow-y: visible;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  .menu-toggle {
    display: flex;
  }
  .header-content {
    justify-content: space-between;
    align-items: center;
  }
  .logo-cell {
    flex: 1;
    width: auto !important;
  }
  .main-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100% !important;
    max-width: 300px;
    height: 100vh;
    padding-top: 60px;
    background: white;
    flex-direction: column;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 999;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }
  .main-nav.active {
    left: 0;
  }
  .menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .menu-item {
    width: 100%;
  }
  .menu-link {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 1rem;
  }
  .menu-link:hover {
    background-color: var(--light-gray);
    border-bottom-color: var(--border-color);
  }
  .has-submenu > .menu-link::after {
    float: right;
    margin-left: auto;
    margin-right: 0;
  }
  .has-submenu.active .submenu {
    opacity: 1;
    max-height: 1000px;
    visibility: visible;
  }
  .has-submenu.active > .menu-link::after {
    transform: rotate(180deg);
  }
  .submenu {
    position: static;
    background: var(--light-gray);
    box-shadow: none;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    margin: 0;
    padding: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    visibility: hidden;
    transform: none;
  }
  .submenu .menu-link {
    padding: 0.75rem 1.25rem;
    padding-left: 2rem;
    font-size: 0.9rem;
    border-bottom: 1px solid #e0e0e0;
  }
  .submenu .menu-link:hover {
    background-color: #efefef;
  }
  .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .slider-btn-prev {
    left: 10px;
  }
  .slider-btn-next {
    right: 10px;
  }
  .paging-dot {
    width: 10px;
    height: 10px;
  }
  nav {
    gap: 1rem;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .dichvucotloi__panels {
    grid-template-columns: 1fr;
  }
  .dichvucotloi__panel {
    display: flex;
    flex-direction: column;
    grid-row: span 1;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
  }
  .dichvucotloi__panel:last-child {
    border-bottom: none;
  }
  .quytrinh__circle {
    width: 80px;
    height: 80px;
    font-size: 1.3rem;
  }
  .quytrinh__steps {
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .page-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .page-hero__inner {
    flex-direction: column;
    text-align: center;
  }
  .page-hero__avatar {
    width: 90px;
    height: 90px;
  }
  .article-list {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lienhe-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .lienhe-page {
    padding: 3rem 2rem;
  }
  .lienhe-form__grid,
  .lienhe-booking__grid {
    grid-template-columns: 1fr;
  }
  .doingu {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .doingu__grid {
    grid-template-columns: 1fr;
  }
  .kienthucphaply__grid,
  .related-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-posts {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .tamnhinsumenh__content {
    width: 100%;
    padding: 3rem 2rem;
    text-align: center;
  }
  .tamnhinsumenh__divider {
    justify-content: center;
  }
  .tamnhinsumenh__subheading,
  .tamnhinsumenh__text {
    text-align: center;
  }
  footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-col--logo img {
    width: 40%;
  }
  form input[type=text],
  form input[type=email],
  form input[type=password],
  form input[type=number],
  form input[type=date],
  form textarea,
  form select {
    max-width: 100%;
  }
}
@media (max-width: 479px) {
  html {
    font-size: 14px;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3 {
    font-size: 1rem;
  }
  .container {
    padding: 0 0.5rem;
  }
  .header-content {
    padding: 0.5rem 0;
  }
  .logo {
    font-size: 1rem;
  }
  .logo img {
    height: 40px;
    margin-right: 0;
  }
  .main-nav {
    max-width: 100%;
    width: 100%;
  }
  .menu-link {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  .submenu .menu-link {
    padding: 0.5rem 1rem;
    padding-left: 1.75rem;
  }
  .slider-btn {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  .slider-btn-prev {
    left: 5px;
  }
  .slider-btn-next {
    right: 5px;
  }
  .paging-dot {
    width: 8px;
    height: 8px;
  }
  .kienthucphaply__grid,
  .related-posts__grid,
  .article-list {
    grid-template-columns: 1fr;
  }
  .dichvucotloi__panel {
    padding: 1.25rem 0.75rem;
  }
  .quytrinh__circle {
    width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  .quytrinh__steps {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .tamnhinsumenh__inner {
    min-height: auto;
  }
  .tamnhinsumenh__content {
    padding: 2rem 0;
  }
  .doingu__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .doingu__avatar {
    width: 40vw;
    height: 40vw;
    max-width: 200px;
    max-height: 200px;
  }
  .doingu__info {
    align-items: center;
  }
  .doingu__link {
    align-self: center;
  }
  .footer-content {
    gap: 1.5rem;
  }
  .footer-col--logo {
    align-items: center;
  }
  .footer-col--logo img {
    width: 40%;
  }
  .kienthucphaply__thumb-link {
    aspect-ratio: 2/1;
  }
}
.header-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #888;
  color: #fff;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.social-link svg {
  display: block;
}
.social-link:hover {
  opacity: 0.85;
}
.social-link--facebook, .social-link--linkedin, .social-link--google, .social-link--x {
  background-color: var(--primary-color);
}

.lang-switcher-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.lang-switcher__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  color: var(--primary-color) !important;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switcher__link:hover {
  background-color: var(--primary-color);
  color: #fff !important;
}

.lang-switcher__flag-img {
  display: inline-block;
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.lang-switcher__link--flag-only {
  padding: 0;
  border: none;
  border-radius: 3px;
  line-height: 0;
  transition: box-shadow 0.2s ease;
}
.lang-switcher__link--flag-only:hover {
  background-color: transparent !important;
  box-shadow: 0 0 0 2px var(--primary-color);
}

.lang-switcher__flag-img--fill {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.header-layout {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.5rem 0;
}

.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.header-info {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.5rem 0;
}
.header-info a {
  color: var(--primary-color);
  text-decoration: none;
}
.header-info a:hover {
  text-decoration: underline;
}

.header-info__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
}

.header-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.main-nav__info {
  display: none;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.82rem;
  color: var(--text-color);
}
.main-nav__info a {
  color: var(--primary-color);
  text-decoration: none;
}
.main-nav__info .header-info__row {
  justify-content: flex-start;
  margin-bottom: 0.4rem;
}

.main-nav__footer {
  display: none;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  gap: 1rem;
  align-items: center;
}

@media (max-width: 767px) {
  .header-layout {
    flex-direction: row;
    align-items: center;
  }
  .header-logo {
    display: flex;
    align-items: center;
  }
  .logo--desktop {
    display: none;
  }
  .logo--mobile {
    display: block;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    margin-left: auto;
    order: 1;
  }
  .header-right {
    display: none;
  }
  .lang-switcher-row {
    display: none;
  }
  .main-nav__info {
    display: block;
  }
  .main-nav__logo {
    display: block;
  }
  .main-nav__footer {
    display: flex;
  }
}


/* =====================================================================
   CSCD: Vietnam Mobile Police — giao diện "tactical shooter"
   ---------------------------------------------------------------------
   Ngôn ngữ thị giác: bảng điều khiển HUD của một đơn vị tác chiến —
   nền gần như đen, chữ condensed in hoa, đường kẻ mảnh, góc vát chéo,
   khung ngắm ở 4 góc, lớp scanline mờ và một màu nhấn hổ phách duy nhất.

   Toàn bộ chữ đều đến từ nội dung trang (EN /en, VI /vi) nên khối CSS này
   dùng chung cho cả hai ngôn ngữ; font Oswald + Barlow đều có bộ dấu
   tiếng Việt. Chỉ áp cho .template-home để các trang tutorial (template
   default, nền sáng) giữ nguyên như cũ.
   ===================================================================== */

body.template-home, body.template-blog, body.template-blog-item, body.template-member, body.template-members, body.template-wiki {
  --t-bg: #0a0d12;
  --t-bg-2: #0d1219;
  --t-panel: rgba(24, 30, 39, 0.72);
  --t-line: rgba(210, 224, 236, 0.1);
  --t-line-strong: rgba(210, 224, 236, 0.22);
  --t-amber: #6cb2f0;
  --t-amber-dim: color-mix(in srgb, var(--t-amber) 16%, transparent);
  --t-red: #e63946;
  --t-steel: #7d93ac;
  --t-text: #d7dde6;
  --t-muted: #8f9dad;
  --t-heading: #eef1f5;
  --t-notch: 14px;

  background: var(--t-bg);
  background-image: none;
  color: var(--t-text);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.template-home h1, body.template-blog h1, body.template-blog-item h1, body.template-member h1, body.template-members h1, body.template-wiki h1,
body.template-home h2, body.template-blog h2, body.template-blog-item h2, body.template-member h2, body.template-members h2, body.template-wiki h2,
body.template-home h3, body.template-blog h3, body.template-blog-item h3, body.template-member h3, body.template-members h3, body.template-wiki h3,
body.template-home h4, body.template-blog h4, body.template-blog-item h4, body.template-member h4, body.template-members h4, body.template-wiki h4 {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  letter-spacing: 0.02em;
}

/* Neo cuộn: bù chiều cao thanh điều hướng dính ở trên */
body.template-home [id], body.template-blog [id], body.template-blog-item [id], body.template-member [id], body.template-members [id], body.template-wiki [id] {
  scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  body.template-home, body.template-blog, body.template-blog-item, body.template-member, body.template-members, body.template-wiki,
  body.template-home *, body.template-blog *, body.template-blog-item *, body.template-member *, body.template-members *, body.template-wiki * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto;
  }
}

/* Trang lỗi (404/403/500) đứng riêng, không nằm trong danh sách template
   dùng chung ở trên, nên tự khai báo lại đúng bộ biến màu tối để tái dùng
   các class .cscd-* (button, heading, brackets...) mà không phải sửa danh
   sách selector dùng chung (đang lặp lại ở rất nhiều nơi trong file này). */
body.template-error {
  --t-bg: #0a0d12;
  --t-bg-2: #0d1219;
  --t-panel: rgba(24, 30, 39, 0.72);
  --t-line: rgba(210, 224, 236, 0.1);
  --t-line-strong: rgba(210, 224, 236, 0.22);
  --t-amber: #6cb2f0;
  --t-amber-dim: color-mix(in srgb, var(--t-amber) 16%, transparent);
  --t-text: #d7dde6;
  --t-muted: #8f9dad;
  --t-heading: #eef1f5;
  --t-notch: 14px;

  background: var(--t-bg);
  color: var(--t-text);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}
body.template-error h1, body.template-error h2 {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  letter-spacing: 0.02em;
}

.cscd-error {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 260px);
  text-align: center;
}
.cscd-error__content {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
.cscd-error__code {
  margin: 0;
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--t-heading);
  text-shadow: 0 0 40px color-mix(in srgb, var(--t-amber) 18%, transparent);
}
.cscd-error__text {
  max-width: 480px;
  margin: 0 auto;
}
.cscd-error__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ---------------------------------------------------------------------
   Vỏ section + các lớp phủ khí quyển
   --------------------------------------------------------------------- */
.cscd-section {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  background: var(--t-bg);
  overflow: hidden;
}
.cscd-section .container {
  position: relative;
  z-index: 2;
}

/* Ảnh nền lấy từ biến --cscd-bg do Twig gán theo từng module */
.cscd-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cscd-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Nền đứng yên khi cuộn (không cuộn theo section), để tạo cảm giác lớp sâu khi cuộn qua. */
.cscd-hero .cscd-bg,
.cscd-cta .cscd-bg,
.cscd-about .cscd-bg,
.cscd-feature-cards .cscd-bg,
.cscd-game-features .cscd-bg,
.cscd-faq .cscd-bg,
.cscd-home-blog .cscd-bg,
.article-hero .cscd-bg,
.article-layout-wrap .cscd-bg {
  background-attachment: fixed;
}
.cscd-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 82%, transparent) 0%, color-mix(in srgb, var(--t-bg) 68%, transparent) 45%, color-mix(in srgb, var(--t-bg) 94%, transparent) 100%);
}
.cscd-bg--dim::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 92%, transparent) 0%, color-mix(in srgb, var(--t-bg) 84%, transparent) 50%, color-mix(in srgb, var(--t-bg) 96%, transparent) 100%);
}
.cscd-bg--deep {
  filter: saturate(0.4);
}
.cscd-bg--deep::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 95%, transparent) 0%, color-mix(in srgb, var(--t-bg) 90%, transparent) 50%, color-mix(in srgb, var(--t-bg) 98%, transparent) 100%);
}

/* Scanline: gợi cảm giác nhìn qua màn hình khí tài, giữ rất mờ để không nhiễu chữ */
.cscd-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}

/* Lưới toạ độ mảnh cho các khối không có ảnh nền */
.cscd-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
}

.cscd-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, rgba(0, 0, 0, 0.72) 100%);
}

/* Khung ngắm 4 góc quanh khối nội dung */
.cscd-brackets {
  position: absolute;
  inset: -1.75rem -0.5rem;
  pointer-events: none;
}
.cscd-brackets i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--t-amber);
  opacity: 0.55;
}
.cscd-brackets i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cscd-brackets i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cscd-brackets i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cscd-brackets i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------------------------------------------------------------------
   Kiểu chữ dùng chung
   --------------------------------------------------------------------- */
/* Chỉ còn dùng ở hero — các khối khác đã bỏ subtitle theo yêu cầu */
.cscd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t-amber);
}
.cscd-eyebrow__dot {
  width: 7px;
  height: 7px;
  background: var(--t-amber);
  transform: rotate(45deg);
  flex: none;
  animation: cscd-pulse 2.4s ease-in-out infinite;
}
@keyframes cscd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.cscd-heading {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--t-heading);
}
.cscd-heading--left {
  text-align: left;
}
.cscd-heading--accent {
  color: var(--t-amber);
}

.cscd-rule {
  width: 84px;
  height: 2px;
  margin: 1.25rem 0 1.75rem;
  background: linear-gradient(90deg, var(--t-amber), transparent);
}
.cscd-about__lore-link {
  margin-top: -0.75rem;
  font-size: 0.82rem;
}
.cscd-rule--center {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--t-amber), transparent);
}

.cscd-text-muted {
  color: var(--t-muted);
}

.cscd-section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------
   Nút bấm: khối vát góc, không bo tròn
   --------------------------------------------------------------------- */
.cscd-btn {
  --notch: var(--t-notch);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.cscd-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}
/* pointer-events:none (không chỉ opacity) — xem giải thích chi tiết ở quy
   tắc "button:disabled" chung đầu file: nếu không, nút disabled vẫn phản
   ứng hover (nhích lên, đổi glow) dù không còn bấm được. */
.cscd-btn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.cscd-btn--primary {
  background: var(--t-amber);
  color: #10130f;
}
.cscd-btn--primary:hover {
  background: #ffc44d;
  color: #10130f;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--t-amber) 30%, transparent);
}

/* Nút phụ: viền mảnh ôm đúng cả hai cạnh vát. box-shadow/border thật đều bị
   clip-path cắt mất ở góc chéo, nên viền được dựng bằng hai lớp: nền nút là
   màu viền, còn ::after thu vào 1px phủ màu nền lên giữa — phần thừa ra rìa
   chính là đường viền, và nó chạy trọn theo hình vát. */
.cscd-btn--ghost {
  background: var(--t-line-strong);
  color: var(--t-text);
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.cscd-btn--ghost::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: rgba(16, 20, 25, 0.88);
  clip-path: inherit;
  transition: background-color 0.18s ease;
}
.cscd-btn--ghost > span {
  position: relative;
  z-index: 1;
}
.cscd-btn--ghost:hover {
  background: var(--t-amber);
  color: #fff;
}
.cscd-btn--ghost:hover::after {
  background: rgba(28, 24, 12, 0.9);
}

/* ---------------------------------------------------------------------
   Nút icon vuông dùng chung toàn site (mũi tên prev/next, nút đóng...) —
   cùng ngôn ngữ thị giác với .cscd-btn ở trên và .cscd-linklist__link (danh
   sách link dạng panel trong bài viết): nền panel tối, viền mảnh, góc vát chéo, hover tối
   nền + viền hổ phách + nhích lên. Đây là TEMPLATE DÙNG CHUNG — bất cứ
   nút icon vuông mới nào trên site (điều hướng slide, carousel, đóng
   modal...) nên gắn thẳng class ".cscd-icon-btn" thay vì viết lại CSS
   riêng. Chỉ cần khai thêm class layout-specific (kích thước khác, vị
   trí...) nếu có, không lặp lại phần nền/viền/hover/disabled ở đây.

   Nếu dùng lại pattern này bằng CSS thủ công (không gắn class), BẮT BUỘC
   giữ đúng phần ":disabled { ...; pointer-events: none; }" — disabled chỉ
   chặn click, KHÔNG chặn :hover; quy tắc ":hover:not(:disabled)" bên dưới
   chủ động loại trừ disabled nên không khớp, để lộ "button:hover" nền
   --secondary-color (xanh lá) của hệ nút sáng ở đầu file (độ đặc thù CSS
   cao hơn nền mặc định của class này) đè lên. pointer-events:none chặn
   hẳn sự kiện chuột nên :hover không bao giờ khớp trên nút disabled, bất
   kể độ đặc thù CSS — xem thêm ghi chú tương tự ở quy tắc "button:disabled"
   chung đầu file. */
.cscd-icon-btn {
  --notch: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  color: var(--t-steel);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.cscd-icon-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  color: var(--t-amber);
  background: rgba(24, 29, 35, 0.95);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 50%, transparent);
}
.cscd-icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Khối like/dislike cuối bài viết (plugin visitor-gadget: tip_page_likes() /
   templates/partials/page-likes.html.twig trong plugin đó) — nút mượn
   nguyên nền/viền/hover của .cscd-icon-btn ở trên, chỉ nới bề ngang để chứa
   icon + số đếm, và thêm trạng thái "đã chọn" (viền/màu hổ phách). */
.page-likes {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--t-line);
  text-align: center;
}

.page-likes__prompt {
  margin: 0 0 1rem;
  color: var(--t-muted);
  font-size: 0.95rem;
}

.page-likes__note {
  margin: -0.5rem 0 1rem;
  color: var(--t-muted);
  opacity: 0.7;
  font-size: 0.8rem;
}

.page-likes__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.page-likes__btn {
  width: auto;
  height: auto;
  padding: 0.6rem 1.1rem;
  gap: 0.5rem;
  font-size: 1rem;
}

.page-likes__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.page-likes__count {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
}

.page-likes__btn.is-active {
  color: var(--t-amber);
  background: var(--t-amber-dim);
  box-shadow: inset 0 0 0 1px var(--t-amber);
}

/* Liên kết dạng "xem tiếp" với mũi tên trượt */
.cscd-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-amber);
  text-decoration: none;
}
.cscd-link-arrow::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.2s ease;
}
.cscd-link-arrow:hover {
  color: #ffc44d;
  text-decoration: none;
}
.cscd-link-arrow:hover::after {
  width: 30px;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.cscd-hero {
  min-height: min(100vh, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6.5rem 0;
}
.cscd-hero__content {
  position: relative;
  max-width: 1265px;
  text-align: left;
}
.cscd-hero__eyebrow {
  justify-content: flex-start;
  font-size: 1.25rem;
}
/* Cỡ chữ bám theo vw để tên game luôn nằm gọn 1 dòng thay vì bị bẻ xuống dòng 2 —
   khoảng vw được canh để vừa với .cscd-hero__content (max-width 1265px, căn trái) ở mọi
   bề rộng màn hình đã kiểm tra (390–1920px). */
.cscd-hero__heading {
  margin: 0;
  font-size: clamp(2.4rem, 9.5vw, 5.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t-heading);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.7);
}
.cscd-hero__content .cscd-rule {
  margin: 1.5rem 0 1.75rem;
  width: 120px;
  background: linear-gradient(90deg, transparent, var(--t-amber), transparent);
}
.cscd-hero__text {
  max-width: 660px;
  margin: 0 auto 2.5rem;
  font-size: 1.06rem;
  line-height: 1.7;
}
.cscd-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  max-width: 1265px;
  margin-top: 2.25rem;
  text-align: left;
}
.cscd-hero__intro .cscd-hero__text {
  max-width: none;
  margin: 0;
}
.cscd-hero__member-name {
  margin: 0 0 0.35rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
}
.cscd-hero__member-role {
  margin: 0 0 0.75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--t-amber);
}
.cscd-hero__member-bio {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--t-muted);
}
.cscd-hero__member-fb {
  padding: 0.65rem 1.6rem;
  font-size: 0.85rem;
}
@media (max-width: 860px) {
  .cscd-hero__grid {
    grid-template-columns: 1fr;
  }
}

.cscd-hero__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--t-line);
}
.cscd-stat {
  text-align: center;
}
.cscd-stat__value {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--t-amber);
}
.cscd-stat__label {
  display: block;
  margin-top: 0.2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-muted);
}

/* Gợi ý cuộn xuống */
.cscd-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 2;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, var(--t-amber));
  transform: translateX(-50%);
  animation: cscd-scroll-cue 2.2s ease-in-out infinite;
}
@keyframes cscd-scroll-cue {
  0%, 100% { opacity: 0.2; transform: translateX(-50%) scaleY(0.6); }
  50% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* Khung ngắm bám theo con trỏ — chỉ bật bằng JS khi thiết bị có chuột thật
   (hover: hover + pointer: fine) và không bật khi prefers-reduced-motion.
   JS gán left/top/width/height trực tiếp, CSS transition lo phần "trễ nhịp"
   để có cảm giác đang bám mục tiêu thay vì đứng yên. */
.cscd-hero--cursor-active {
  cursor: none;
}
.cscd-hero--cursor-active .cscd-hero__buttons a,
.cscd-hero--cursor-active a {
  cursor: none;
}
.cscd-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: left 0.1s ease-out, top 0.1s ease-out, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}
.cscd-cursor.is-visible {
  opacity: 1;
}
.cscd-cursor.is-locked {
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}
.cscd-cursor i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--t-amber);
  opacity: 0.85;
  transition: border-color 0.2s ease;
}
.cscd-cursor i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cscd-cursor i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.cscd-cursor i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.cscd-cursor i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.cscd-cursor__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--t-amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cscd-cursor.is-locked i {
  border-color: var(--t-red);
}
.cscd-cursor.is-locked .cscd-cursor__dot {
  background: var(--t-red);
  animation: cscd-cursor-pulse 0.9s ease-in-out infinite;
}
@keyframes cscd-cursor-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.6); }
}
@media (hover: none), (pointer: coarse) {
  .cscd-cursor { display: none; }
}

/* ---------------------------------------------------------------------
   Thẻ tính năng — "hồ sơ tác chiến"
   --------------------------------------------------------------------- */
.cscd-feature-cards {
  border-top: 1px solid var(--t-line);
}
.cscd-feature-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

.cscd-feature-card {
  --notch: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.cscd-feature-card:hover {
  transform: translateY(-6px);
  background: rgba(24, 29, 35, 0.9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 50%, transparent), 0 18px 40px rgba(0, 0, 0, 0.5);
}

.cscd-feature-card__index {
  position: absolute;
  top: 0.7rem;
  left: 0.9rem;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--t-amber);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Ảnh thẻ là banner ngang (~615x115). Để nguyên tỉ lệ gốc thay vì ép vào một
   khung cố định rồi object-fit:cover — cách cũ cắt mất hai đầu và phóng to ảnh. */
.cscd-feature-card__image {
  position: relative;
  overflow: hidden;
  background: #0a0d10;
}
.cscd-feature-card__image img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.65) contrast(1.08) brightness(0.82);
  transition: filter 0.35s ease, transform 0.5s ease;
}
.cscd-feature-card:hover .cscd-feature-card__image img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.05);
}
/* Vệt sáng chéo chạy qua ảnh khi rê chuột */
.cscd-feature-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--t-amber) 22%, transparent) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.cscd-feature-card:hover .cscd-feature-card__shine {
  transform: translateX(120%);
}

.cscd-feature-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.35rem 1.6rem;
}
.cscd-feature-card__title {
  margin: 0 0 0.7rem;
  font-size: 1.14rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t-heading);
}
.cscd-feature-card__desc {
  flex: 1;
  margin: 0 0 1.2rem;
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------
   About — tóm tắt nhiệm vụ, 2 cột
   --------------------------------------------------------------------- */
.cscd-about {
  border-top: 1px solid var(--t-line);
}
.cscd-about__layout {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cscd-about__aside {
  position: sticky;
  top: 110px;
}
/* Tiêu đề "CSCD là game gì" giờ xuống 2 dòng (từ "CSCD" tách riêng ở
   modular/about.html.twig) — line-height mặc định 1.1 của .cscd-heading quá
   sát cho 2 dòng, tăng lên riêng ở đây thay vì sửa chung (chỗ khác dùng
   .cscd-heading vẫn 1 dòng, không cần giãn thêm). */
.cscd-about__aside .cscd-heading {
  line-height: 1.35;
}
.cscd-about__lede {
  margin: 0 0 2rem;
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--t-text);
  padding-left: 1.25rem;
  border-left: 2px solid var(--t-amber);
}

.cscd-panel {
  position: relative;
  padding: 1.6rem 1.6rem 1.6rem 1.7rem;
  margin-bottom: 1.1rem;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.cscd-panel:hover {
  background: rgba(24, 29, 35, 0.85);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 40%, transparent);
}
.cscd-panel__tag {
  display: block;
  margin-bottom: 0.55rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--t-amber);
}
.cscd-panel__title {
  margin: 0 0 0.65rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--t-heading);
}
.cscd-panel p {
  margin: 0;
  line-height: 1.75;
}

/* ---------------------------------------------------------------------
   Game features — tab dọc: đề mục bên trái, nội dung bên phải
   --------------------------------------------------------------------- */
.cscd-game-features {
  background: var(--t-bg-2);
  border-top: 1px solid var(--t-line);
}

.cscd-tabs {
  display: block;
}

/* Dải đề mục nằm ngang phía trên khối nội dung */
.cscd-tabs__nav {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.cscd-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1;
  min-width: 0;
  padding: 1.05rem 1.1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--t-muted);
  background: rgba(18, 22, 27, 0.55);
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.cscd-tab:hover {
  color: var(--t-text);
  background: rgba(26, 31, 38, 0.85);
}
/* Vạch chỉ báo ở cạnh dưới, nối tab đang mở xuống khối nội dung bên dưới */
.cscd-tab::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--t-amber);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.cscd-tab.is-active {
  color: #fff;
  background: rgba(30, 35, 42, 0.95);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 50%, transparent);
}
.cscd-tab.is-active::before {
  transform: scaleX(1);
}
.cscd-tab:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 2px;
}

.cscd-tab__num {
  flex: none;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--t-amber) 60%, transparent);
  transition: color 0.2s ease;
}
.cscd-tab.is-active .cscd-tab__num {
  color: var(--t-amber);
  -webkit-text-stroke: 0;
}
.cscd-tab__label {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Cột nội dung */
.cscd-tabs__panels {
  position: relative;
  min-width: 0;
}
.cscd-tabpanel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
/* Chỉ ẩn panel khi JS đã gắn xong (.is-enhanced) — xem initGameFeatureTabs() */
.cscd-tabs.is-enhanced .cscd-tabpanel {
  display: none;
}
.cscd-tabs.is-enhanced .cscd-tabpanel.is-active {
  display: block;
  animation: cscd-panel-in 0.32s ease both;
}
.cscd-tabs:not(.is-enhanced) .cscd-tabpanel + .cscd-tabpanel {
  margin-top: 1rem;
}
/* Tab nằm trên nên nội dung trượt xuống từ phía tab, không trượt ngang nữa */
@keyframes cscd-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.cscd-tabpanel__head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--t-line);
}
.cscd-tabpanel__num {
  flex: none;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--t-amber) 55%, transparent);
  user-select: none;
}
.cscd-tabpanel__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--t-heading);
}
.cscd-tabpanel__desc {
  margin: 0 0 1.4rem;
  max-width: 68ch;
  line-height: 1.8;
}
/* Nội dung có thể gồm nhiều đoạn văn (xem ghi chú |raw ở template) */
.cscd-tabpanel__desc p + p {
  margin-top: 1em;
}
.cscd-tabpanel__desc p:last-child {
  margin-bottom: 0;
}
.cscd-tabpanel > *:last-child {
  margin-bottom: 0;
}

/* Xếp hàng ngang thành các panel vát góc (giống .cscd-panel ở khối About), thay vì
   danh sách dọc — auto-fit tự co giãn số cột theo bề rộng thực tế thay vì cắt cứng
   ở một breakpoint, nên 3 mục vẫn đều nhau ở desktop và tự dồn xuống 1-2 cột khi hẹp. */
.cscd-game-feature__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}
.cscd-game-feature__bullets li {
  padding: 1.4rem 1.5rem;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.cscd-game-feature__bullets li:hover {
  background: rgba(24, 29, 35, 0.9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 40%, transparent);
}
.cscd-game-feature__bullet-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-heading);
}
/* Dấu hình thoi thay cho chấm tròn mặc định, đặt trước tiêu đề thay vì đầu dòng văn bản */
.cscd-game-feature__bullet-title::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--t-amber);
  transform: rotate(45deg);
}
.cscd-game-feature__bullet-text {
  display: block;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* Vạch góc dưới-trái, nhại khung ngắm của khí tài */
.cscd-shot__corner {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-left: 2px solid var(--t-amber);
  border-bottom: 2px solid var(--t-amber);
  opacity: 0.75;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Panel: chữ bên trái, slideshow ảnh bên phải
   --------------------------------------------------------------------- */
.cscd-tabpanel__body--split {
  display: grid;
  /* Chữ 1/3, slideshow 2/3 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Chữ thường ngắn hơn slideshow nhiều; căn giữa để không bỏ lại một mảng
     trống lớn dưới cột chữ */
  align-items: center;
}
.cscd-tabpanel__text {
  min-width: 0;
}
.cscd-tabpanel__text > *:last-child {
  margin-bottom: 0;
}

.cscd-gallery {
  min-width: 0;
}

/* Ảnh lớn — ảnh gallery gốc là 16:9 (1600x900). Khung theo đúng tỉ lệ đó và dùng
   object-fit:contain thay vì cover, để hiển thị trọn ảnh thay vì crop trên dưới;
   nền tối phía sau (#0a0d10) lấp khoảng trống nếu có ảnh khác tỉ lệ được thêm sau này. */
.cscd-gallery__stage {
  position: relative;
  margin: 0 0 0.7rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0d10;
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.cscd-gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: saturate(0.9) contrast(1.05);
  transition: opacity 0.25s ease;
}
/* Mờ đi trong lúc chờ ảnh mới tải, rồi hiện lại — xem initGalleries() */
.cscd-gallery__stage img.is-swapping {
  opacity: 0.35;
}

/* Dải thumbnail + hai mũi tên */
.cscd-gallery__strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cscd-gallery__thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* Thanh cuộn ẩn đi, việc cuộn đã có hai mũi tên đảm nhiệm */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cscd-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.cscd-gallery__thumb {
  position: relative;
  /* Cố định 3 thumbnail mỗi khung: luôn có ảnh bị khuất khi thư viện từ 4 ảnh
     trở lên, nên hai mũi tên luôn có việc để làm */
  flex: 0 0 calc((100% - 1rem) / 3);
  /* Giữ nguyên bề ngang, giảm chiều cao còn một nửa so với khung 4/3 */
  aspect-ratio: 8 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  background: #0a0d10;
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: box-shadow 0.2s ease;
}
.cscd-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.5) brightness(0.72);
  transition: filter 0.25s ease, transform 0.35s ease;
}
.cscd-gallery__thumb:hover img {
  filter: grayscale(0) brightness(0.95);
  transform: scale(1.06);
}
.cscd-gallery__thumb.is-active {
  box-shadow: inset 0 0 0 2px var(--t-amber);
}
.cscd-gallery__thumb.is-active img {
  filter: grayscale(0) brightness(1);
}
.cscd-gallery__thumb:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 2px;
}

.cscd-gallery__arrow {
  flex: none;
  display: none;
  place-items: center;
  width: 30px;
  height: 46px;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--t-text);
  background: rgba(24, 29, 35, 0.9);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
/* Chỉ hiện mũi tên khi thật sự có ảnh bị khuất (JS gắn .has-overflow) */
.cscd-gallery.has-overflow .cscd-gallery__arrow {
  display: grid;
}
.cscd-gallery__arrow svg {
  width: 16px;
  height: 16px;
}
.cscd-gallery__arrow:hover:not(:disabled) {
  color: #10130f;
  background: var(--t-amber);
}
.cscd-gallery__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.cscd-gallery__arrow:focus-visible {
  outline: 2px solid var(--t-amber);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   FAQ — đóng/mở kiểu bảng điều khiển
   --------------------------------------------------------------------- */
.cscd-faq {
  border-top: 1px solid var(--t-line);
}
.cscd-faq__list {
  max-width: 880px;
  margin: 0 auto;
}
.cscd-faq__item {
  position: relative;
  margin-bottom: 0.7rem;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.cscd-faq__item[open] {
  background: rgba(24, 29, 35, 0.9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 45%, transparent);
}
.cscd-faq__question {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text);
}
.cscd-faq__question::-webkit-details-marker {
  display: none;
}
.cscd-faq__item[open] .cscd-faq__question {
  color: #fff;
}
/* Dấu +/− tự vẽ: thanh ngang cố định + thanh dọc xoay biến mất khi mở */
.cscd-faq__marker {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.cscd-faq__marker::before,
.cscd-faq__marker::after {
  content: '';
  position: absolute;
  background: var(--t-amber);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.cscd-faq__marker::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.cscd-faq__marker::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.cscd-faq__item[open] .cscd-faq__marker::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.cscd-faq__answer {
  padding: 0 1.4rem 1.4rem 3.25rem;
  line-height: 1.8;
}
.cscd-faq__answer ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 0;
}
.cscd-faq__answer p {
  margin: 0 0 0.6rem;
}

/* ---------------------------------------------------------------------
   CTA kết trang
   --------------------------------------------------------------------- */
.cscd-cta {
  border-top: 1px solid var(--t-line);
}
.cscd-cta__content {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cscd-cta__text {
  margin: 1.5rem 0 2.25rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #cdd5db;
}
.cscd-cta__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cscd-cta__social {
  text-align: center;
}
.cscd-cta__social-label {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--t-heading);
}

/* ---------------------------------------------------------------------
   Kênh cộng đồng (giờ vẽ trong .cscd-cta__social, xem modular/cta.html.twig)
   --------------------------------------------------------------------- */
.cscd-social__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 940px;
  margin: 2.5rem auto 0;
}
.cscd-channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  flex: 1 1 260px;
  max-width: 300px;
  text-align: left;
  text-decoration: none;
  color: var(--t-text);
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.cscd-channel:hover {
  transform: translateY(-4px);
  color: #fff;
  text-decoration: none;
  background: rgba(24, 29, 35, 0.95);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 55%, transparent);
}
.cscd-channel__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--t-amber);
}
.cscd-channel__icon svg {
  width: 22px;
  height: 22px;
}
.cscd-channel__name {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.cscd-channel__arrow {
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--t-steel);
  border-right: 2px solid var(--t-steel);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cscd-channel:hover .cscd-channel__arrow {
  border-color: var(--t-amber);
  transform: rotate(45deg) translate(3px, -3px);
}

/* ---------------------------------------------------------------------
   Thanh điều hướng — dính trên đầu, nền kính mờ
   --------------------------------------------------------------------- */
body.template-home header, body.template-blog header, body.template-blog-item header, body.template-member header, body.template-members header, body.template-wiki header, body.template-error header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--t-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-line);
  box-shadow: none;
  padding: 0.5rem 0;
}
body.template-home .header-layout, body.template-blog .header-layout, body.template-blog-item .header-layout, body.template-member .header-layout, body.template-members .header-layout, body.template-wiki .header-layout, body.template-error .header-layout {
  align-items: center;
}
/* Bố cục gốc xếp menu và nút đổi ngôn ngữ thành hai hàng (di sản của header
   có dải giờ làm việc/hotline). Trang game không có dải đó, nên gom tất cả
   về một hàng để nút cờ không bị "mồ côi" bên dưới. */
body.template-home .header-right, body.template-blog .header-right, body.template-blog-item .header-right, body.template-member .header-right, body.template-members .header-right, body.template-wiki .header-right, body.template-error .header-right {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
}
body.template-home .lang-switcher-row, body.template-blog .lang-switcher-row, body.template-blog-item .lang-switcher-row, body.template-member .lang-switcher-row, body.template-members .lang-switcher-row, body.template-wiki .lang-switcher-row, body.template-error .lang-switcher-row {
  padding: 0;
  margin: 0;
}
body.template-home .logo img, body.template-blog .logo img, body.template-blog-item .logo img, body.template-member .logo img, body.template-members .logo img, body.template-wiki .logo img, body.template-error .logo img {
  max-height: 52px;
  width: auto;
}
body.template-home .header-bottom, body.template-blog .header-bottom, body.template-blog-item .header-bottom, body.template-member .header-bottom, body.template-members .header-bottom, body.template-wiki .header-bottom, body.template-error .header-bottom {
  border: 0;
}
body.template-home .menu, body.template-blog .menu, body.template-blog-item .menu, body.template-member .menu, body.template-members .menu, body.template-wiki .menu, body.template-error .menu {
  gap: 0.35rem;
}
body.template-home .menu-link, body.template-blog .menu-link, body.template-blog-item .menu-link, body.template-member .menu-link, body.template-members .menu-link, body.template-wiki .menu-link, body.template-error .menu-link {
  position: relative;
  padding: 0.55rem 0.85rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--t-muted);
  background: none;
  /* Đè border-bottom mặc định của theme gốc (site.css dòng ~184-197) — nếu không
     đè thì hover sẽ ra 2 gạch chân cùng lúc: viền màu cam/đỏ cũ của theme PureCSS
     CỘNG với gạch hổ phách ::after riêng của bản tactical bên dưới. */
  border-bottom-color: transparent;
  transition: color 0.2s ease;
}
/* Gạch chân duy nhất, chạy từ trái sang khi rê chuột */
body.template-home .menu-link::after, body.template-blog .menu-link::after, body.template-blog-item .menu-link::after, body.template-member .menu-link::after, body.template-members .menu-link::after, body.template-wiki .menu-link::after, body.template-error .menu-link::after {
  content: '';
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  background: var(--t-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
body.template-home .menu-link:hover, body.template-blog .menu-link:hover, body.template-blog-item .menu-link:hover, body.template-member .menu-link:hover, body.template-members .menu-link:hover, body.template-wiki .menu-link:hover, body.template-error .menu-link:hover {
  color: #fff;
  text-decoration: none;
  border-bottom-color: transparent;
  background: none;
}
body.template-home .menu-link:hover::after, body.template-blog .menu-link:hover::after, body.template-blog-item .menu-link:hover::after, body.template-member .menu-link:hover::after, body.template-members .menu-link:hover::after, body.template-wiki .menu-link:hover::after, body.template-error .menu-link:hover::after {
  transform: scaleX(1);
}
body.template-home .submenu, body.template-blog .submenu, body.template-blog-item .submenu, body.template-member .submenu, body.template-members .submenu, body.template-wiki .submenu, body.template-error .submenu {
  background: rgba(11, 14, 18, 0.97);
  border: 1px solid var(--t-line);
  backdrop-filter: blur(10px);
}

/* Mục menu "nổi bật" (vd Ủng hộ Dev) — chỉ đổi màu chữ sang hổ phách, không
   thêm nền/khung, để vẫn đồng bộ hình thức với các link khác trong thanh nav. */
body.template-home .menu-link--cta, body.template-blog .menu-link--cta, body.template-blog-item .menu-link--cta, body.template-member .menu-link--cta, body.template-members .menu-link--cta, body.template-wiki .menu-link--cta, body.template-error .menu-link--cta {
  color: var(--t-amber);
}
body.template-home .menu-link--cta:hover, body.template-blog .menu-link--cta:hover, body.template-blog-item .menu-link--cta:hover, body.template-member .menu-link--cta:hover, body.template-members .menu-link--cta:hover, body.template-wiki .menu-link--cta:hover, body.template-error .menu-link--cta:hover {
  color: #ffc44d;
}
/* .has-submenu > .menu-link::after ở site.css dòng ~203 (theme gốc) vẽ mũi tên tam
   giác bằng border-trick và xoay 180° khi hover — dùng chung ::after với gạch chân
   hổ phách ở trên nên hai hiệu ứng chồng lên nhau. Set content:none sẽ xoá luôn pseudo
   element (mất cả gạch chân), nên phải reset từng thuộc tính triangle về 0 thay vì
   xoá hẳn, để gạch chân hổ phách vẫn còn nguyên trên mục "Overview". */
body.template-home .has-submenu > .menu-link::after, body.template-blog .has-submenu > .menu-link::after, body.template-blog-item .has-submenu > .menu-link::after, body.template-member .has-submenu > .menu-link::after, body.template-members .has-submenu > .menu-link::after, body.template-wiki .has-submenu > .menu-link::after, body.template-error .has-submenu > .menu-link::after {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin-left: 0;
}
body.template-home .has-submenu:hover > .menu-link::after, body.template-blog .has-submenu:hover > .menu-link::after, body.template-blog-item .has-submenu:hover > .menu-link::after, body.template-member .has-submenu:hover > .menu-link::after, body.template-members .has-submenu:hover > .menu-link::after, body.template-wiki .has-submenu:hover > .menu-link::after, body.template-error .has-submenu:hover > .menu-link::after,
body.template-home .has-submenu.active > .menu-link::after, body.template-blog .has-submenu.active > .menu-link::after, body.template-blog-item .has-submenu.active > .menu-link::after, body.template-member .has-submenu.active > .menu-link::after, body.template-members .has-submenu.active > .menu-link::after, body.template-wiki .has-submenu.active > .menu-link::after, body.template-error .has-submenu.active > .menu-link::after {
  transform: scaleX(1);
}

body.template-home .lang-switcher__link, body.template-blog .lang-switcher__link, body.template-blog-item .lang-switcher__link, body.template-member .lang-switcher__link, body.template-members .lang-switcher__link, body.template-wiki .lang-switcher__link, body.template-error .lang-switcher__link {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--t-text);
  border-color: var(--t-line-strong);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.05);
}
body.template-home .lang-switcher__link:hover, body.template-blog .lang-switcher__link:hover, body.template-blog-item .lang-switcher__link:hover, body.template-member .lang-switcher__link:hover, body.template-members .lang-switcher__link:hover, body.template-wiki .lang-switcher__link:hover, body.template-error .lang-switcher__link:hover {
  color: #10130f;
  background: var(--t-amber);
  border-color: var(--t-amber);
}
body.template-home .header-social .social-link, body.template-blog .header-social .social-link, body.template-blog-item .header-social .social-link, body.template-member .header-social .social-link, body.template-members .header-social .social-link, body.template-wiki .header-social .social-link, body.template-error .header-social .social-link {
  color: var(--t-muted);
  background: none;
}
body.template-home .header-social .social-link:hover, body.template-blog .header-social .social-link:hover, body.template-blog-item .header-social .social-link:hover, body.template-member .header-social .social-link:hover, body.template-members .header-social .social-link:hover, body.template-wiki .header-social .social-link:hover, body.template-error .header-social .social-link:hover {
  color: var(--t-amber);
}
body.template-home .menu-toggle span, body.template-blog .menu-toggle span, body.template-blog-item .menu-toggle span, body.template-member .menu-toggle span, body.template-members .menu-toggle span, body.template-wiki .menu-toggle span, body.template-error .menu-toggle span {
  background: var(--t-text);
}
body.template-home .main-nav, body.template-blog .main-nav, body.template-blog-item .main-nav, body.template-member .main-nav, body.template-members .main-nav, body.template-wiki .main-nav, body.template-error .main-nav {
  background: rgba(9, 11, 14, 0.98);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--t-line);
}
body.template-home .main-nav .menu-link, body.template-blog .main-nav .menu-link, body.template-blog-item .main-nav .menu-link, body.template-member .main-nav .menu-link, body.template-members .main-nav .menu-link, body.template-wiki .main-nav .menu-link, body.template-error .main-nav .menu-link {
  color: var(--t-text);
}

/* ---------------------------------------------------------------------
   Chân trang
   --------------------------------------------------------------------- */
body.template-home footer, body.template-blog footer, body.template-blog-item footer, body.template-member footer, body.template-members footer, body.template-wiki footer, body.template-error footer {
  position: relative;
  background: #05070a;
  background-image: none;
  color: var(--t-muted);
  border-top: 1px solid var(--t-line);
  /* footer-content đã bỏ, giờ footer chỉ còn mỗi dòng footer-bottom — đệm trên
     dưới bằng nhau để dòng chữ nằm giữa, thay vì lệch theo tỉ lệ cũ dành cho
     khối nội dung 3 cột phía trên nó (không còn tồn tại). */
  padding: 2rem 0;
}
body.template-home footer::before, body.template-blog footer::before, body.template-blog-item footer::before, body.template-member footer::before, body.template-members footer::before, body.template-wiki footer::before, body.template-error footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 160px;
  height: 2px;
  background: var(--t-amber);
}
body.template-home footer a, body.template-blog footer a, body.template-blog-item footer a, body.template-member footer a, body.template-members footer a, body.template-wiki footer a, body.template-error footer a {
  color: var(--t-steel);
}
body.template-home footer a:hover, body.template-blog footer a:hover, body.template-blog-item footer a:hover, body.template-member footer a:hover, body.template-members footer a:hover, body.template-wiki footer a:hover, body.template-error footer a:hover {
  color: var(--t-amber);
  text-decoration: none;
}
body.template-home footer h1, body.template-blog footer h1, body.template-blog-item footer h1, body.template-member footer h1, body.template-members footer h1, body.template-wiki footer h1, body.template-error footer h1,
body.template-home footer h2, body.template-blog footer h2, body.template-blog-item footer h2, body.template-member footer h2, body.template-members footer h2, body.template-wiki footer h2, body.template-error footer h2,
body.template-home footer h3, body.template-blog footer h3, body.template-blog-item footer h3, body.template-member footer h3, body.template-members footer h3, body.template-wiki footer h3, body.template-error footer h3,
body.template-home footer h4, body.template-blog footer h4, body.template-blog-item footer h4, body.template-member footer h4, body.template-members footer h4, body.template-wiki footer h4, body.template-error footer h4,
body.template-home footer strong, body.template-blog footer strong, body.template-blog-item footer strong, body.template-member footer strong, body.template-members footer strong, body.template-wiki footer strong, body.template-error footer strong {
  color: var(--t-text);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.template-home .footer-bottom, body.template-blog .footer-bottom, body.template-blog-item .footer-bottom, body.template-member .footer-bottom, body.template-members .footer-bottom, body.template-wiki .footer-bottom, body.template-error .footer-bottom {
  color: var(--t-muted);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.1em;
}
body.template-home .footer-col--logo img, body.template-blog .footer-col--logo img, body.template-blog-item .footer-col--logo img, body.template-member .footer-col--logo img, body.template-members .footer-col--logo img, body.template-wiki .footer-col--logo img, body.template-error .footer-col--logo img {
  max-height: 64px;
  width: auto;
}

/* ---------------------------------------------------------------------
   Thích ứng màn hình nhỏ
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cscd-about__layout {
    grid-template-columns: 1fr;
  }
  .cscd-about__aside {
    position: static;
  }
  .cscd-heading--left {
    text-align: left;
  }
}

@media (max-width: 768px) {
  /* Hẹp thì 4 tab không đủ chỗ nằm cạnh nhau -> cho cuộn ngang, giữ nguyên nhãn
     (chỉ còn số hiệu thì không biết tab nào là gì). */
  .cscd-tabs__nav {
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
  }
  .cscd-tab {
    flex: none;
    padding: 0.75rem 0.95rem;
    font-size: 0.92rem;
  }
  .cscd-tab__label {
    white-space: nowrap;
  }
  /* Hẹp thì chữ và slideshow xếp chồng thay vì hai cột */
  .cscd-tabpanel__body--split {
    grid-template-columns: 1fr;
  }
  .cscd-hero {
    min-height: auto;
    padding: 6rem 0 5rem;
  }
  .cscd-brackets {
    display: none;
  }
  body.template-home [id], body.template-blog [id], body.template-blog-item [id], body.template-member [id], body.template-members [id], body.template-wiki [id] {
    scroll-margin-top: 70px;
  }
}

@media (max-width: 560px) {
  .cscd-feature-cards__grid {
    grid-template-columns: 1fr;
  }
  .cscd-channel {
    flex-basis: 100%;
    max-width: none;
  }
  .cscd-btn {
    width: 100%;
  }
  .cscd-hero__stats {
    gap: 1.5rem;
  }
}

/* =====================================================================
   Layout bài viết dài — dùng chung cho blog (blog.html.twig, blog-item.html.twig):
   hero, khung đọc + mục lục 2 cột, kiểu chữ Markdown tự do.
   ---------------------------------------------------------------------
   Dùng lại đúng bộ biến --t-* và ngôn ngữ thị giác HUD của trang chủ (đã mở scope
   sang body.template-blog, body.template-blog-item, body.template-member,
   body.template-members, body.template-wiki ở khối biến phía trên), nhưng
   bố cục đơn giản hơn nhiều vì đây là nội dung đọc dài chứ không phải các khối
   marketing dàn dựng sẵn: một cột văn bản rộng vừa đủ để đọc thoải mái, không có
   ảnh nền/hiệu ứng cuộn.
   ===================================================================== */

.article-hero {
  position: relative;
  padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--t-line);
  overflow: hidden;
}
/* Overlay mặc định của .cscd-bg--deep quá tối, gần như che hết ảnh nền — giảm
   bớt riêng cho hero, khối nội dung bài viết, và slideshow (dùng chung đúng
   nền intro-bg.jpeg này — xem body.template-slideshow) để ảnh nền còn thấy rõ. */
.article-hero .cscd-bg--deep::after,
.article-layout-wrap .cscd-bg--deep::after,
body.template-slideshow .cscd-bg--deep::after,
body.template-slideshow-deck .cscd-bg--deep::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 90%, transparent) 0%, color-mix(in srgb, var(--t-bg) 80%, transparent) 50%, color-mix(in srgb, var(--t-bg) 94%, transparent) 100%);
}
.article-hero .container {
  position: relative;
  z-index: 1;
  /* Luôn rộng bằng khung site chuẩn ở MỌI trang bài viết (danh sách lẫn chi
     tiết), hero không co hẹp 860px riêng, để tiêu đề luôn bám sát mép trái
     của độ rộng site như các section khác trên trang chủ. */
  max-width: 1265px;
}
/* Bài blog không có TOC (initArticleToc trong site.js không gắn .has-toc vì
   thiếu đề mục): co hẹp riêng khối title hero về cùng khổ đọc 860px với khối
   content bên dưới, để 2 khối thấy thẳng hàng. Chỉ co hẹp title, KHÔNG co hẹp
   cả .container — eyebrow/breadcrumb vẫn giữ nguyên mép trái của container
   đầy đủ 1265px như mọi trang khác, tránh bị đẩy vào giữa trang trông như
   "căn giữa" khi container hẹp lại được margin:auto căn giữa. :has() để hero
   "biết" trạng thái has-toc của .article-reading nằm ở section khác bên dưới
   nó trong cùng trang. */
body.template-blog-item:not(:has(.article-reading.has-toc)) .article-hero__title {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.article-hero__title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--t-heading);
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t-muted);
}
.article-breadcrumb a {
  color: var(--t-steel);
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-breadcrumb a:hover {
  color: var(--t-amber);
  text-decoration: none;
}
.article-breadcrumb__sep {
  opacity: 0.5;
}
.article-breadcrumb__current {
  color: var(--t-text);
}

.article-layout-wrap {
  /* Không đặt overflow:hidden ở đây — nó biến div này thành "scroll container",
     khiến position:sticky của .article-toc bên trong bị tính theo khung của div
     này thay vì viewport, gây lỗi TOC không dính đúng vị trí khi cuộn (thấy rõ
     hơn ở một số trình duyệt/độ phân giải). .cscd-bg bên trong đã absolute
     inset:0 vừa khít khung cha nên không cần cắt tràn. */
  position: relative;
}
.article-layout {
  position: relative;
  z-index: 2;
  /* Khung ngoài luôn rộng bằng độ rộng site chuẩn (như trang danh sách blog) —
     phần đọc hẹp hơn (khi bài không có TOC) được co lại ở .article-reading
     bên trong (không margin:auto nên tự bám mép trái của khung này), thay vì
     co hẹp + căn giữa cả khung ngoài như trước (khiến bài luôn nằm giữa
     trang thay vì thẳng hàng với hero của các trang bài viết khác). */
  max-width: 1265px;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* Mục lục (TOC) bên trái nội dung bài viết — JS dựng danh sách, CSS chỉ lo bố
   cục 2 cột + trạng thái sticky. Mặc định 1 cột (mobile / khi JS chưa chạy
   hoặc bài quá ngắn không cần mục lục), chuyển 2 cột khi có class .has-toc
   do initArticleToc() gắn sau khi xác nhận bài có đủ đề mục. */
.article-reading {
  display: block;
  /* Mặc định (không TOC) giữ đúng khổ đọc 860px như trước — không margin:auto
     nên khối này tự bám mép trái của .article-layout (giờ đã rộng) thay vì nằm
     giữa trang. Rộng hết khung khi có TOC (.has-toc, quy tắc bên dưới) hoặc
     ở trang danh sách blog (.article-layout--wide, quy tắc bên dưới). */
  max-width: 860px;
}
/* Bài blog không có TOC: căn giữa content luôn, khớp với khối title hero
   cũng được căn giữa cùng khổ 860px ở trên (xem .article-hero .container).
   Cũng cần cùng padding ngang với .article-hero .container (nó có class
   .container nên tự có padding: 0 var(--spacing-unit) — .article-reading thì
   không), nếu không chữ trong bài sẽ rộng hơn tiêu đề dù 2 khung ngoài đã
   cùng 860px và cùng căn giữa. */
body.template-blog-item .article-reading:not(.has-toc), body.template-member .article-reading:not(.has-toc), body.template-members .article-reading:not(.has-toc), body.template-wiki .article-reading:not(.has-toc) {
  margin: 0 auto;
  padding: 0 var(--spacing-unit);
}
.article-reading.has-toc,
.article-layout--wide .article-reading {
  max-width: none;
}
.article-toc {
  display: none;
}
@media (min-width: 980px) {
  .article-reading.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
  }
  /* Đảo vị trí: nội dung bài viết bên trái, mục lục bên phải (mặc định thứ tự
     DOM là toc rồi tới article — order lật lại thứ tự hiển thị mà không cần
     đổi HTML, vẫn giữ toc đọc trước trong DOM cho screen reader/SEO). */
  .article-reading.has-toc .article-content {
    order: 1;
  }
  .article-reading.has-toc .article-toc {
    order: 2;
    display: block;
    position: sticky;
    top: 100px;
  }
  .article-reading.has-toc .article-toc__inner {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    /* Đệm phải để chữ không dính sát vào thanh cuộn (thanh cuộn nằm ở mép
       phải của chính phần tử scroll, tức .article-toc__inner). */
    padding-right: 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--t-line-strong) transparent;
  }
  .article-reading.has-toc .article-toc__inner::-webkit-scrollbar {
    width: 6px;
  }
  .article-reading.has-toc .article-toc__inner::-webkit-scrollbar-thumb {
    background: var(--t-line-strong);
    border-radius: 3px;
  }
  .article-reading.has-toc .article-toc__inner::-webkit-scrollbar-track {
    background: transparent;
  }
}
.article-toc__title {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-amber);
}
.article-toc__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--t-line);
}
.article-toc__nav li a {
  display: block;
  padding: 0.45rem 0 0.45rem 1.1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--t-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.article-toc__nav li a:hover {
  color: var(--t-text);
}
.article-toc__nav li a.is-active {
  color: var(--t-amber);
  border-left-color: var(--t-amber);
}
.article-toc__nav li li a {
  padding-left: 1.9rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   Nội dung bài viết — kiểu chữ mặc định cho Markdown tự do (không phải khối
   marketing đã dàn sẵn), nên cần phủ đủ các thẻ HTML phổ biến: heading, list,
   liên kết, trích dẫn, code, ảnh, bảng.
   --------------------------------------------------------------------- */
.article-content {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--t-text);
}
/* Khung video nhúng (YouTube) giữ tỉ lệ 16:9, dùng cho page.header.youtube_id
   trong blog-item.html.twig — không nhúng iframe thô qua Markdown vì Grav core
   chủ động escape các tag iframe/script/... trong nội dung .md (chống XSS). */
.article-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0 0 1.75rem;
  background: #0a0d10;
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.article-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-content > *:first-child {
  margin-top: 0;
}
.article-content > *:last-child {
  margin-bottom: 0;
}
.article-content p {
  margin: 0 0 1.25rem;
  color: var(--t-text);
}
.article-content h2,
.article-content h3,
.article-content h4 {
  margin: 2.25rem 0 1rem;
  text-transform: uppercase;
  color: var(--t-heading);
}
.article-content h2 {
  padding-bottom: 0.6rem;
  font-size: 1.5rem;
  color: var(--t-amber);
  border-bottom: 1px solid var(--t-amber);
}
.article-content h3 {
  font-size: 1.2rem;
}
.article-content h4 {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}
.article-content a {
  color: var(--t-amber);
  text-decoration-color: color-mix(in srgb, var(--t-amber) 40%, transparent);
}
.article-content a:hover {
  color: #ffc44d;
}
/* .article-content a ở trên thắng .cscd-btn--primary/--ghost nhờ độ đặc thù cao hơn
   (có thêm element selector "a"), khiến chữ trong nút trùng màu amber với nền
   nút --primary — cần ghi đè lại màu chữ đúng của từng biến thể nút khi đặt
   trong nội dung bài viết. */
.article-content a.cscd-btn--primary,
.article-content a.cscd-btn--primary:hover {
  color: #10130f;
}
.article-content a.cscd-btn--ghost {
  color: var(--t-text);
}
.article-content a.cscd-btn--ghost:hover {
  color: #fff;
}
/* Cùng lý do như trên: .cscd-linklist__link đôi khi được nhúng thẳng vào giữa
   nội dung bài viết (vd. blog), nên cần thắng lại màu amber của
   ".article-content a". */
.article-content a.cscd-linklist__link {
  color: var(--t-text);
}
.article-content a.cscd-linklist__link:hover {
  color: #fff;
}
.article-content em,
.article-content i {
  color: var(--t-amber);
}
.article-content ul,
.article-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
}
.article-content ul {
  list-style: none;
  padding-left: 0;
}
.article-content ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}
.article-content ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--t-amber);
  transform: rotate(45deg);
}
.article-content ol > li {
  margin-bottom: 0.6rem;
  padding-left: 0.3rem;
}
.article-content li > ul,
.article-content li > ol {
  margin-top: 0.6rem;
}
.article-content blockquote {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.25rem;
  border-left: 2px solid var(--t-amber);
  background: var(--t-panel);
  color: var(--t-muted);
}
.article-content blockquote > *:last-child {
  margin-bottom: 0;
}
.article-content code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.article-content pre {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  background: var(--t-bg-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.article-content pre code {
  padding: 0;
  background: none;
}
.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem auto 1.25rem;
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.article-content table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.article-content th,
.article-content td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--t-line);
}
.article-content th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-amber);
  background: var(--t-panel);
  border-bottom: 1px solid var(--t-line-strong);
}
.article-content hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--t-line);
}

/* ---------------------------------------------------------------------
   Trang chi tiết thành viên (member.html.twig) — dùng chung hero/nền với
   .article-hero/.article-layout-wrap/.article-layout của blog-item, chỉ
   thêm bố cục 2 cột 25/75 riêng cho phần thân: .member-sidebar (bio + link
   mạng xã hội + vài thông tin hồ sơ) và .member-content (các khối modular
   content-block). Mobile (<900px) rơi về 1 cột, sidebar lên trên.
   --------------------------------------------------------------------- */
.member-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--spacing-unit);
}
@media (min-width: 900px) {
  .member-layout {
    grid-template-columns: minmax(0, 25%) minmax(0, 75%);
    max-width: none;
    padding: 0;
    align-items: start;
  }
}
.member-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
}
.member-sidebar__avatar {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  max-width: 160px;
  margin: 0 auto;
}
.member-sidebar__bio {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--t-text);
}
.member-sidebar__social {
  display: flex;
  gap: 0.6rem;
}
.member-sidebar__fact {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--t-line);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--t-muted);
}
.member-sidebar__fact strong {
  color: var(--t-text);
}
.member-sidebar__list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}
.member-content {
  min-width: 0;
}
.content-block {
  margin-bottom: 2rem;
}
.content-block:last-child {
  margin-bottom: 0;
}
/* .content-block__title cố tình không có CSS riêng — là <h2> nằm trong
   .member-content.article-content nên tự thừa hưởng đúng style heading của
   bài blog (.article-content h2: chữ hoa, màu amber, gạch chân) mà không
   cần định nghĩa lại, để section trên trang thành viên giống hệt section
   trong bài blog/tin tức. */

/* ---------------------------------------------------------------------
   Thẻ liên kết dạng panel vát góc, dùng khi cần nhúng 1 danh sách link nổi
   bật ngay trong nội dung bài viết (vd. link sang trang khác) — cùng ngôn
   ngữ thị giác với .cscd-channel/.cscd-tab ở trang chủ.
   --------------------------------------------------------------------- */
.cscd-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.cscd-linklist__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--t-text);
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.cscd-linklist__link:hover {
  transform: translateX(4px);
  color: #fff;
  text-decoration: none;
  background: rgba(24, 29, 35, 0.95);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 50%, transparent);
}
.cscd-linklist__title-group {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 180px;
}
.cscd-linklist__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cscd-linklist__arrow {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-top: 2px solid var(--t-steel);
  border-right: 2px solid var(--t-steel);
  transform: rotate(45deg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.cscd-linklist__link:hover .cscd-linklist__arrow {
  border-color: var(--t-amber);
  transform: rotate(45deg) translate(3px, -3px);
}

@media (max-width: 640px) {
  .cscd-linklist__link {
    flex-wrap: wrap;
  }
  .cscd-linklist__title-group {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------
   Khối kêu gọi ủng hộ (Donate) nhúng thẳng trong nội dung bài viết — QR
   chuyển khoản + hướng dẫn, dùng lại panel vát góc như .cscd-linklist và
   .cscd-btn cho các nút hành động, không định nghĩa lại từ đầu.
   --------------------------------------------------------------------- */
.donate-panel__lead {
  font-size: 1.05rem;
}

.donate-panel__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.donate-panel__qr {
  width: 220px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--t-line);
}

.donate-panel__guide-title {
  margin: 0 0 0.75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-heading);
}

.donate-panel__guide ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--t-text);
}

.donate-panel__guide li + li {
  margin-top: 0.6rem;
}

.donate-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.donate-panel__note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--t-line);
  font-size: 0.9rem;
  color: var(--t-muted);
}

.donate-panel__note p {
  margin: 0 0 0.5rem;
  font-style: italic;
}

.donate-panel__note ul {
  margin: 0;
  padding-left: 1.2rem;
}

@media (max-width: 640px) {
  .donate-panel__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .donate-panel__guide {
    text-align: left;
  }
  .donate-panel__guide ul {
    padding-left: 0;
  }
  .donate-panel__actions {
    flex-direction: column;
  }
  .donate-panel__actions .cscd-btn {
    width: 100%;
  }
}

/* =======================================================================
   BLOG — trang danh sách (blog.html.twig) + trang chi tiết (blog-item.html.twig)
   Dùng lại đúng khung bài viết ở trên (hero, article-layout, article-content)
   nên không cần định nghĩa lại phần đó; ở đây chỉ có lưới thẻ bài viết và
   khối liên quan.
   ===================================================================== */

.blog-post__date {
  margin: 0.6rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--t-muted);
}

.article-hero__slide-btn {
  margin-top: 1.4rem;
  padding: 0.7rem 1.8rem;
  font-size: 0.88rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.article-content + .blog-grid {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--t-line);
}


.blog-card {
  --notch: 18px;
  position: relative;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  background: rgba(24, 29, 35, 0.9);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-amber) 50%, transparent), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog-card__link:hover {
  color: inherit;
  text-decoration: none;
}
.blog-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #0a0d10;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card__image img {
  transform: scale(1.05);
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.35rem 1.5rem;
}
.blog-card__date {
  margin-bottom: 0.5rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-amber);
}
.blog-card__title {
  margin: 0 0 0.7rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t-heading);
}
.blog-card__excerpt {
  flex: 1;
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--t-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.blog-card__more {
  margin-top: auto;
}

/* Nút "Slide tóm tắt" — chỉ hiện trên card ở trang /news, xem blog-card.html.twig.
   Nằm ngoài .blog-card__link (không lồng <a> trong <a>) và định vị tuyệt đối ở góc
   dưới-phải của thẻ, đối xứng với "Đọc thêm" ở góc dưới-trái. */
.blog-card__slide-link {
  position: absolute;
  right: 1.1rem;
  bottom: 1.35rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-amber);
  background: rgba(10, 13, 16, 0.55);
  border: 1px solid var(--t-line);
  border-radius: 3px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.blog-card__slide-link:hover {
  color: #ffc44d;
  border-color: color-mix(in srgb, var(--t-amber) 60%, transparent);
  background: rgba(10, 13, 16, 0.8);
  text-decoration: none;
}

.blog-related {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--t-line);
}
.blog-related__title {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-amber);
}

.cscd-home-blog {
  background: var(--t-bg-2);
  border-top: 1px solid var(--t-line);
}

.cscd-home-blog__more {
  display: flex;
  justify-content: center;
  margin-top: 2.75rem;
}

@media (max-width: 980px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Slideshow toàn màn hình — 2 template dùng chung 1 bộ biến/reset ở đây:
   "slideshow" (dạng text thuần, chia slide bằng H2) và "slideshow-deck"
   (dạng đồ hoạ nhiều layout, mỗi slide là 1 trang con modular/slide-*, xem
   slideshow-deck.html.twig). Đứng riêng, không dùng chung bộ biến màu với
   .template-blog (khai lại local để không phải sửa danh sách
   selector dùng chung ở trên), vì header/footer bị ẩn hẳn nên không cần các
   quy tắc theme cho chúng. Toàn bộ CSS .slide/.slideshow-* bên dưới KHÔNG
   scope theo body.template-* (dùng chung nguyên trạng cho cả 2 dạng) — chỉ
   khối biến số + reset body này là scope riêng vì phụ thuộc class trên body.
   ========================================================================= */
body.template-slideshow,
body.template-slideshow-deck {
  --t-bg: #07090b;
  --t-panel: rgba(18, 22, 27, 0.82);
  --t-line: rgba(255, 255, 255, 0.12);
  --t-amber: #ffb020;
  --t-steel: #78929f;
  --t-text: #d5dade;
  --t-muted: #8c98a1;
  --t-heading: #e6e9eb;

  margin: 0;
  height: 100vh;
  overflow: hidden;
  /* .cscd-bg/.cscd-grid-overlay bên trong block content dùng position:absolute
     — cần body làm containing block để nằm khít toàn màn hình. */
  position: relative;
  background: var(--t-bg);
  color: var(--t-text);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.template-slideshow header,
body.template-slideshow footer,
body.template-slideshow-deck header,
body.template-slideshow-deck footer {
  display: none;
}
body.template-slideshow h1,
body.template-slideshow h2,
body.template-slideshow h3,
body.template-slideshow-deck h1,
body.template-slideshow-deck h2,
body.template-slideshow-deck h3 {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  letter-spacing: 0.02em;
  color: var(--t-heading);
}

.slideshow-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--t-amber);
  z-index: 20;
  transition: width 0.3s ease;
}

.slideshow-exit {
  position: fixed;
  top: clamp(0.9rem, 2.5vw, 1.5rem);
  right: clamp(0.9rem, 2.5vw, 1.5rem);
  z-index: 20;
  color: var(--t-muted);
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid var(--t-line);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--t-panel);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.slideshow-exit:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  text-decoration: underline;
}

/* Logo + tên trang, góc trên trái, dưới thanh progress. max-width chừa chỗ
   cho nút "Về báo cáo" cố định ở góc trên phải (.slideshow-exit) — tên
   trang dài sẽ bị cắt bằng "…" thay vì đè lên nút đó. */
.slideshow-brand {
  position: fixed;
  top: clamp(0.9rem, 2.5vw, 1.5rem);
  left: clamp(0.9rem, 2.5vw, 1.5rem);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(58vw, 480px);
}
.slideshow-brand__logo {
  flex: none;
  display: block;
  line-height: 0;
}
.slideshow-brand__logo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
}
.slideshow-brand__title {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--t-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slideshow-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 9vw, 9rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow-y: auto;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.slide > * {
  max-width: 900px;
  width: 100%;
}
/* Layout đồ hoạ (slide-cover có header.image, slide-image) đặt .cscd-bg hoặc
   .slide__image-frame làm phần tử full-bleed bên trong .slide — không được
   để quy tắc max-width:900px ở trên bó hẹp chúng lại. */
.slide > .cscd-bg,
.slide > .cscd-grid-overlay {
  max-width: none;
  width: auto;
}
.slide h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--t-amber);
  display: inline-block;
}
.slide p {
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.slide ul,
.slide ol {
  margin: 0 0 1rem 1.2rem;
}
.slide li {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  margin-bottom: 0.65rem;
}
.slide strong {
  color: var(--t-amber);
  font-weight: 600;
}
.slide em {
  color: var(--t-muted);
  font-style: normal;
}
.slide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.slide table th,
.slide table td {
  border: 1px solid var(--t-line);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.slide table th {
  color: var(--t-amber);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.03);
}

.slide--intro {
  align-items: center;
  text-align: center;
}
.slide--intro > * {
  margin-left: auto;
  margin-right: auto;
}
.slide--intro h2 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  border-bottom: none;
  padding-bottom: 0;
}

/* =========================================================================
   Slideshow-deck — layout đồ hoạ nhiều kiểu (xem templates/modular/slide-*)
   dùng chung .slide/.slide--intro ở trên, chỉ thêm class riêng cho từng kiểu
   bố cục. .slide__body là khối bọc nội dung chữ dùng ở mọi layout (kể cả khi
   không có ảnh nền) — position:relative để luôn nổi trên .cscd-bg nếu có.
   ========================================================================= */
.slide__body {
  position: relative;
  z-index: 1;
}

/* slide-cover có header.image: ảnh nền phủ full-bleed toàn slide (dùng lại
   .cscd-bg--deep — cùng công thức làm tối/khử màu như nền trang) */
.slide--has-bg .slide__subtitle {
  color: var(--t-muted);
}

/* slide-split: ảnh 1 bên, chữ 1 bên. slide--split-left đảo chiều. */
.slide--split {
  flex-direction: row;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.slide--split > * {
  max-width: none;
  width: auto;
}
.slide--split-left {
  flex-direction: row-reverse;
}
.slide__split-media {
  flex: 1 1 42%;
  min-width: 0;
}
.slide__split-media img {
  width: 100%;
  display: block;
  border: 1px solid var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.slide__split-text {
  flex: 1 1 58%;
  min-width: 0;
}

/* slide-image: 1 ảnh lớn làm trọng tâm + chú thích ngắn bên dưới, căn giữa */
.slide--image {
  align-items: center;
  text-align: center;
}
.slide--image > * {
  max-width: 1100px;
}
.slide__image-frame {
  width: 100%;
  margin-bottom: 1.5rem;
}
.slide__image-frame img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--t-line);
  background: rgba(0, 0, 0, 0.25);
}

/* slide-quote: 1 câu cỡ chữ lớn căn giữa, dùng cho mẹo/cảnh báo/câu tổng kết */
.slide__quote-text {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.35;
  color: var(--t-heading);
}
.slide__quote-text strong {
  color: var(--t-amber);
}
.slide__quote-attribution {
  margin-top: 1.25rem;
  color: var(--t-muted);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .slide--split,
  .slide--split-left {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .slide--split > * {
    max-width: 100%;
    width: 100%;
  }
}

.slideshow-nav {
  position: fixed;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
/* Nút prev/next dùng thẳng template .cscd-icon-btn (định nghĩa cùng
   .cscd-btn ở trên) — không lặp lại CSS ở đây. */
.slideshow-nav__counter {
  min-width: 4.5rem;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  color: var(--t-muted);
  font-size: 0.9rem;
}

.slideshow-credit {
  position: fixed;
  bottom: clamp(0.5rem, 1.8vw, 0.85rem);
  right: clamp(0.6rem, 2vw, 1rem);
  z-index: 20;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--t-muted);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.slideshow-credit:hover {
  opacity: 1;
  color: var(--primary-color);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .slide {
    align-items: center;
    text-align: center;
    padding: 5.5rem 1.5rem 6.5rem;
  }
  .slide > * {
    margin-left: auto;
    margin-right: auto;
  }
  .slideshow-brand__logo img {
    width: 30px;
    height: 30px;
  }
  /* Màn hình hẹp không đủ chỗ cho cả logo + tên trang + nút "Về báo cáo" —
     giữ lại logo, ẩn tên trang (nội dung slide đã đủ nói lên chủ đề). */
  .slideshow-brand__title {
    display: none;
  }
}

/* =====================================================================
   Wiki — trang bài viết phân cấp (user/themes/eztheme/templates/wiki.html.twig)
   ---------------------------------------------------------------------
   Dùng lại đúng bộ biến --t-* và ngôn ngữ thị giác HUD của trang chủ (đã mở
   scope sang body.template-wiki ở khối biến "CSCD: Vietnam Mobile Police —
   giao diện tactical shooter" phía trên), nhưng bố cục đơn giản hơn nhiều vì
   đây là nội dung đọc dài chứ không phải các khối marketing dàn dựng sẵn: một
   cột văn bản rộng vừa đủ để đọc thoải mái, không có ảnh nền/hiệu ứng cuộn.
   Bộ class wiki-* này độc lập với bộ article-* dùng cho blog/blog-item —
   không dùng chung để tránh một thay đổi ở khu vực này ảnh hưởng ngược lại
   blog (xem CLAUDE.md/lịch sử: article-* vốn là wiki-* đổi tên khi wiki bị
   gỡ, giờ khôi phục wiki thì dựng lại bộ riêng thay vì tái dùng article-*).
   ===================================================================== */

.wiki-hero {
  position: relative;
  padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--t-line);
  overflow: hidden;
}
/* Overlay mặc định của .cscd-bg--deep quá tối, gần như che hết ảnh nền — giảm
   bớt riêng cho hero và khối nội dung wiki để ảnh nền còn thấy rõ. */
.wiki-hero .cscd-bg--deep::after,
.wiki-layout-wrap .cscd-bg--deep::after {
  background: linear-gradient(180deg, rgba(7, 9, 11, 0.90) 0%, rgba(7, 9, 11, 0.80) 50%, rgba(7, 9, 11, 0.94) 100%);
}
.wiki-hero .container {
  position: relative;
  z-index: 1;
  /* Luôn rộng bằng khung site chuẩn ở MỌI trang wiki — hero không co hẹp
     860px riêng cho bài viết, để tiêu đề luôn bám sát mép trái của độ rộng
     site như các section khác trên trang chủ. */
  max-width: 1265px;
}
.wiki-hero__title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--t-heading);
}

.wiki-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t-muted);
}
.wiki-breadcrumb a {
  color: var(--t-steel);
  text-decoration: none;
  transition: color 0.2s ease;
}
.wiki-breadcrumb a:hover {
  color: var(--t-amber);
  text-decoration: none;
}
.wiki-breadcrumb__sep {
  opacity: 0.5;
}
.wiki-breadcrumb__current {
  color: var(--t-text);
}

/* Lưới an toàn cho mobile: đảm bảo breadcrumb (blog-item, member dùng chung
   .article-breadcrumb; wiki dùng .wiki-breadcrumb) luôn bám mép trái, không
   phụ thuộc vào cách .container/.article-hero__title co hẹp hay không co hẹp
   ở màn hình hẹp. */
@media (max-width: 640px) {
  .article-breadcrumb,
  .wiki-breadcrumb {
    justify-content: flex-start;
    text-align: left;
  }
}

.wiki-layout-wrap {
  /* Không đặt overflow:hidden ở đây — nó biến div này thành "scroll container",
     khiến position:sticky của .wiki-toc bên trong bị tính theo khung của div
     này thay vì viewport, gây lỗi TOC không dính đúng vị trí khi cuộn (thấy rõ
     hơn ở một số trình duyệt/độ phân giải). .cscd-bg bên trong đã absolute
     inset:0 vừa khít khung cha nên không cần cắt tràn. */
  position: relative;
}
.wiki-layout {
  position: relative;
  z-index: 2;
  /* Khung ngoài luôn rộng bằng độ rộng site chuẩn (giống trang wiki gốc) — phần
     đọc hẹp hơn (khi bài không có TOC) được co lại ở .wiki-body/.wiki-index
     bên trong (không margin:auto nên tự bám mép trái của khung này), thay vì
     co hẹp + căn giữa cả khung ngoài như trước (khiến bài luôn nằm giữa
     trang thay vì thẳng hàng với hero của các trang wiki khác). */
  max-width: 1265px;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* Mục lục (TOC) bên trái nội dung bài viết — JS dựng danh sách, CSS chỉ lo bố
   cục 2 cột + trạng thái sticky. Mặc định 1 cột (mobile / khi JS chưa chạy
   hoặc bài quá ngắn không cần mục lục), chuyển 2 cột khi có class .has-toc
   do initWikiToc() gắn sau khi xác nhận bài có đủ đề mục. */
.wiki-body {
  display: block;
  /* Mặc định (không TOC) giữ đúng khổ đọc 860px — không margin:auto nên khối
     này tự bám mép trái của .wiki-layout (giờ đã rộng) thay vì nằm giữa
     trang. Rộng hết khung khi có TOC (.has-toc, quy tắc bên dưới) hoặc ở
     trang gốc wiki (.wiki-layout--wide, quy tắc bên dưới). */
  max-width: 860px;
}
.wiki-index {
  max-width: 860px;
}
.wiki-body.has-toc,
.wiki-layout--wide .wiki-body,
.wiki-layout--wide .wiki-index {
  max-width: none;
}
.wiki-toc {
  display: none;
}
@media (min-width: 980px) {
  .wiki-body.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
  }
  /* Đảo vị trí: nội dung bài viết bên trái, mục lục bên phải (mặc định thứ tự
     DOM là toc rồi tới article — order lật lại thứ tự hiển thị mà không cần
     đổi HTML, vẫn giữ toc đọc trước trong DOM cho screen reader/SEO). */
  .wiki-body.has-toc .wiki-article {
    order: 1;
  }
  .wiki-body.has-toc .wiki-toc {
    order: 2;
    display: block;
    position: sticky;
    top: 100px;
  }
  .wiki-body.has-toc .wiki-toc__inner {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    /* Đệm phải để chữ không dính sát vào thanh cuộn (thanh cuộn nằm ở mép
       phải của chính phần tử scroll, tức .wiki-toc__inner). */
    padding-right: 0.9rem;
    scrollbar-width: thin;
    scrollbar-color: var(--t-line-strong) transparent;
  }
  .wiki-body.has-toc .wiki-toc__inner::-webkit-scrollbar {
    width: 6px;
  }
  .wiki-body.has-toc .wiki-toc__inner::-webkit-scrollbar-thumb {
    background: var(--t-line-strong);
    border-radius: 3px;
  }
  .wiki-body.has-toc .wiki-toc__inner::-webkit-scrollbar-track {
    background: transparent;
  }
}
.wiki-toc__title {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-amber);
}
.wiki-toc__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--t-line);
}
.wiki-toc__nav li a {
  display: block;
  padding: 0.45rem 0 0.45rem 1.1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--t-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.wiki-toc__nav li a:hover {
  color: var(--t-text);
}
.wiki-toc__nav li a.is-active {
  color: var(--t-amber);
  border-left-color: var(--t-amber);
}
.wiki-toc__nav li li a {
  padding-left: 1.9rem;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
   Nội dung bài viết — kiểu chữ mặc định cho Markdown tự do (không phải khối
   marketing đã dàn sẵn), nên cần phủ đủ các thẻ HTML phổ biến: heading, list,
   liên kết, trích dẫn, code, ảnh, bảng.
   --------------------------------------------------------------------- */
.wiki-article {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--t-text);
}
.wiki-article > *:first-child {
  margin-top: 0;
}
.wiki-article > *:last-child {
  margin-bottom: 0;
}
.wiki-article p {
  margin: 0 0 1.25rem;
  color: var(--t-text);
}
.wiki-article h2,
.wiki-article h3,
.wiki-article h4 {
  margin: 2.25rem 0 1rem;
  text-transform: uppercase;
  color: var(--t-heading);
}
.wiki-article h2 {
  padding-bottom: 0.6rem;
  font-size: 1.5rem;
  color: var(--t-amber);
  border-bottom: 1px solid var(--t-amber);
}
.wiki-article h3 {
  font-size: 1.2rem;
}
.wiki-article h4 {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}
.wiki-article a {
  color: var(--t-amber);
  text-decoration-color: rgba(255, 176, 32, 0.4);
}
.wiki-article a:hover {
  color: #ffc44d;
}
/* .wiki-article a ở trên thắng .cscd-btn--primary/--ghost nhờ độ đặc thù cao hơn
   (có thêm element selector "a"), khiến chữ trong nút trùng màu amber với nền
   nút --primary — cần ghi đè lại màu chữ đúng của từng biến thể nút khi đặt
   trong nội dung bài viết. */
.wiki-article a.cscd-btn--primary,
.wiki-article a.cscd-btn--primary:hover {
  color: #10130f;
}
.wiki-article a.cscd-btn--ghost {
  color: var(--t-text);
}
.wiki-article a.cscd-btn--ghost:hover {
  color: #fff;
}
/* Cùng lý do như trên: .wiki-index__link đôi khi được nhúng vào giữa nội dung
   bài viết chứ không chỉ nằm ở khối "Trong mục này" ngoài .wiki-article, nên
   cần thắng lại màu amber của ".wiki-article a". */
.wiki-article a.wiki-index__link {
  color: var(--t-text);
}
.wiki-article a.wiki-index__link:hover {
  color: #fff;
}
.wiki-article em,
.wiki-article i {
  color: var(--t-amber);
}
.wiki-article ul,
.wiki-article ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
}
.wiki-article ul {
  list-style: none;
  padding-left: 0;
}
.wiki-article ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
}
.wiki-article ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--t-amber);
  transform: rotate(45deg);
}
.wiki-article ol > li {
  margin-bottom: 0.6rem;
  padding-left: 0.3rem;
}
.wiki-article li > ul,
.wiki-article li > ol {
  margin-top: 0.6rem;
}
.wiki-article blockquote {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.25rem;
  border-left: 2px solid var(--t-amber);
  background: var(--t-panel);
  color: var(--t-muted);
}
.wiki-article blockquote > *:last-child {
  margin-bottom: 0;
}
.wiki-article code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.wiki-article pre {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  background: var(--t-bg-2);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.wiki-article pre code {
  padding: 0;
  background: none;
}
.wiki-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem auto 1.25rem;
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.wiki-article table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.wiki-article th,
.wiki-article td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--t-line);
}
.wiki-article th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-amber);
  background: var(--t-panel);
  border-bottom: 1px solid var(--t-line-strong);
}
.wiki-article hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--t-line);
}

/* ---------------------------------------------------------------------
   Mục lục các trang con — panel vát góc, cùng ngôn ngữ thị giác với
   .cscd-channel/.cscd-tab ở trang chủ
   --------------------------------------------------------------------- */
.wiki-index {
  margin-top: clamp(3rem, 6vw, 4rem);
}
.wiki-article + .wiki-index {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--t-line);
}
.wiki-index__title {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-amber);
}
.wiki-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.wiki-index__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--t-text);
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.wiki-index__link:hover {
  transform: translateX(4px);
  color: #fff;
  text-decoration: none;
  background: rgba(24, 29, 35, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.5);
}
.wiki-index__title-group {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 180px;
}
.wiki-index__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wiki-index__date {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--t-steel);
}
.wiki-index__arrow {
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-top: 2px solid var(--t-steel);
  border-right: 2px solid var(--t-steel);
  transform: rotate(45deg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.wiki-index__link:hover .wiki-index__arrow {
  border-color: var(--t-amber);
  transform: rotate(45deg) translate(3px, -3px);
}

@media (max-width: 640px) {
  .wiki-index__link {
    flex-wrap: wrap;
  }
  .wiki-index__title-group {
    min-width: 0;
  }
}

/* Trang gốc wiki: nhiều chủ đề trên 1 hàng thay vì danh sách xếp dọc */
.wiki-index__list--grid {
  grid-template-columns: repeat(2, 1fr);
}
.wiki-index__list--grid-4 {
  grid-template-columns: repeat(3, 1fr);
}
.wiki-index__list--grid .wiki-index__link {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  height: 100%;
}
.wiki-index__list--grid .wiki-index__title-group {
  min-width: 0;
}
.wiki-index__list--grid .wiki-index__arrow {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  margin-left: 0;
}
@media (max-width: 900px) {
  .wiki-index__list--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .wiki-index__list--grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Điều hướng Bài trước/Bài sau (plugin prev-next-nav) — 2 panel vát góc
   cùng ngôn ngữ thị giác với .wiki-index__link ở trên. Nằm ngay trong
   .wiki-article (đầu và cuối nội dung) nên tự động bám đúng cột nội dung
   chính, kể cả khi bài có TOC (layout 2 cột) hay không.
   --------------------------------------------------------------------- */
.wiki-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
/* Bản đầu bài: ngăn cách với nội dung PHÍA DƯỚI nó bằng border-bottom,
   không có margin-top (đứng ngay sau nút edit, đầu cột nội dung). */
.wiki-prevnext--top {
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--t-line);
}
/* Bản cuối bài: ngăn cách với nội dung PHÍA TRÊN nó bằng border-top. */
.wiki-prevnext--bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--t-line);
}
.wiki-prevnext__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--t-text);
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1px var(--t-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.wiki-prevnext__link:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(24, 29, 35, 0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, 0.5);
}
.wiki-prevnext__link--prev:hover {
  transform: translateX(-4px);
}
.wiki-prevnext__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}
.wiki-prevnext__link--next:hover {
  transform: translateX(4px);
}
.wiki-prevnext__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.wiki-prevnext__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-amber);
}
/* Selector lồng thêm ".wiki-prevnext" để thắng độ ưu tiên của ".wiki-article a"
   (nav này nằm trong .wiki-article — xem wiki.html.twig) — nếu không, link
   màu amber của quy tắc đó sẽ đè lên, khiến title trông giống link thường. */
.wiki-prevnext .wiki-prevnext__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--t-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiki-prevnext__arrow {
  flex: none;
  font-size: 1.2rem;
  color: var(--t-steel);
  transition: color 0.18s ease;
}
.wiki-prevnext__link:hover .wiki-prevnext__arrow {
  color: var(--t-amber);
}
@media (max-width: 640px) {
  .wiki-prevnext {
    grid-template-columns: 1fr;
  }
  .wiki-prevnext__link--next {
    grid-column: 1;
  }
}