/*!
 * * 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;
    font-size: 1.08rem;
  }
  .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 .container {
  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: 400;
  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 h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-weight: 400;
}
/* Heading không in đậm — kể cả khi tác giả bọc chữ bằng **...** trong Markdown. */
.article-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
  font-weight: inherit;
}
.article-content h2,
.article-content h3,
.article-content h4 {
  margin: 2.25rem 0 1rem;
  line-height: 1.35;
  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.3rem;
  line-height: 1.55;
}
.article-content ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Căn giữa chấm với dòng đầu: nửa line-height (0.775em) trừ nửa chấm (3px). */
  top: calc(0.775em - 3px);
  width: 6px;
  height: 6px;
  background: var(--t-amber);
  transform: rotate(45deg);
}
.article-content ol > li {
  margin-bottom: 0.3rem;
  padding-left: 0.3rem;
  line-height: 1.55;
}
.article-content li > ul,
.article-content li > ol {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
/* Markdown "loose list" bọc nội dung li trong <p> — bỏ margin đoạn văn để các
   mục không bị giãn cách như đoạn riêng lẻ. */
.article-content li > p {
  margin: 0 0 0.3rem;
}
.article-content li > p:last-child {
  margin-bottom: 0;
}
.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.4rem 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);
}
/* Mobile: bài có TOC (.has-toc) không rơi vào rule padding của bài không-TOC
   ở trên (nó chỉ cần max-width:none để nhường chỗ cho lưới 2 cột từ 980px trở
   lên) nên trước 980px chỉ còn padding 1rem/0.5rem của .container — hẹp hơn
   hẳn bài không-TOC. Bù thêm đúng bằng phần chênh đó cho khớp, đồng thời tăng
   cỡ chữ đọc trên di động cho dễ đọc hơn. */
@media (max-width: 979px) {
  .article-reading.has-toc {
    padding: 0 var(--spacing-unit);
  }
}
@media (max-width: 767px) {
  .article-content {
    font-size: 1.12rem;
  }
}

/* ---------------------------------------------------------------------
   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: 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: 400;
  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 h1,
.wiki-article h2,
.wiki-article h3,
.wiki-article h4,
.wiki-article h5,
.wiki-article h6 {
  font-weight: 400;
}
/* Heading không in đậm — kể cả khi tác giả bọc chữ bằng **...** trong Markdown. */
.wiki-article :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
  font-weight: inherit;
}
.wiki-article h2,
.wiki-article h3,
.wiki-article h4 {
  margin: 2.25rem 0 1rem;
  line-height: 1.35;
  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.3rem;
  line-height: 1.55;
}
.wiki-article ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Căn giữa chấm với dòng đầu: nửa line-height (0.775em) trừ nửa chấm (3px). */
  top: calc(0.775em - 3px);
  width: 6px;
  height: 6px;
  background: var(--t-amber);
  transform: rotate(45deg);
}
.wiki-article ol > li {
  margin-bottom: 0.3rem;
  padding-left: 0.3rem;
  line-height: 1.55;
}
.wiki-article li > ul,
.wiki-article li > ol {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
/* Markdown "loose list" bọc nội dung li trong <p> — bỏ margin đoạn văn để các
   mục không bị giãn cách như đoạn riêng lẻ. */
.wiki-article li > p {
  margin: 0 0 0.3rem;
}
.wiki-article li > p:last-child {
  margin-bottom: 0;
}
.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.4rem 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);
}
/* Mobile: .wiki-body không có class .container nên chỉ đang thừa hưởng
   padding 1rem/0.5rem của .wiki-layout — khá sát mép trên điện thoại. Bù
   thêm padding riêng và tăng cỡ chữ đọc cho dễ đọc hơn, giống cách xử lý cho
   .article-reading/.article-content ở bài blog. */
@media (max-width: 979px) {
  .wiki-body {
    padding: 0 var(--spacing-unit);
  }
}
@media (max-width: 767px) {
  .wiki-article {
    font-size: 1.12rem;
  }
}

/* ---------------------------------------------------------------------
   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;
  }
}

/* =====================================================================
   EXCEL / KẾ TOÁN — giao diện sáng "bảng tính" cho trang chủ + header/footer toàn site
   ---------------------------------------------------------------------
   Khối này nằm CUỐI file và đè lên bộ giao diện tactical tối ở trên, nên mọi
   quy tắc ở đây dựa vào việc đứng sau + độ đặc thù tương đương hoặc cao hơn.
   Ý tưởng thị giác: giấy sổ sách trắng ngà, đường kẻ ô mảnh như bảng tính,
   một màu nhấn duy nhất là xanh lá Excel (#107c41), số liệu dùng font mono.

   - Trang chủ (body.template-home): đổi cả bộ biến --t-* sang sáng. Các class
     .cscd-* dùng chung biến này nên tự đổi theo; chỉ những chỗ cứng màu/clip-path
     mới phải đè riêng bên dưới. Các trang tối khác (blog, wiki, member...) KHÔNG
     đổi nội dung — chỉ header + footer là đổi chung toàn site.
   - Biến tên "--t-amber" giữ nguyên tên cũ (đang dùng ở rất nhiều nơi), nhưng ở
     đây giá trị là xanh Excel — đừng hiểu theo nghĩa đen của tên biến.
   - Mọi nút :disabled vẫn phải có pointer-events:none (xem CLAUDE.md).
   ===================================================================== */

:root {
  --xl-green: #107c41;
  --xl-green-dark: #0b5f31;
  --xl-green-deep: #0f3d26;
  --xl-green-soft: #e8f3ec;
  --xl-green-bright: #21a366;
  --xl-paper: #f6f8f6;
  --xl-line: #dce3dd;
  --xl-line-strong: #bfcac2;
  --xl-ink: #1b2a22;
  --xl-text: #2b3530;
  --xl-muted: #5b6a61;
  --xl-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --xl-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ---------------------------------------------------------------------
   Trang chủ: bộ biến + nền
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) {
  --t-bg: var(--xl-paper);
  --t-bg-2: #ffffff;
  --t-panel: #ffffff;
  --t-line: var(--xl-line);
  --t-line-strong: var(--xl-line-strong);
  --t-amber: var(--xl-green);
  --t-amber-dim: var(--xl-green-soft);
  --t-red: #c0392b;
  --t-steel: #5f6f66;
  --t-text: var(--xl-text);
  --t-muted: var(--xl-muted);
  --t-heading: var(--xl-ink);
  --t-notch: 0px;

  background: var(--xl-paper);
  font-family: var(--xl-font);
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) h1,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) h2,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) h3,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) h4 {
  font-family: var(--xl-font);
  letter-spacing: 0;
}

/* Bỏ toàn bộ lớp phủ "khí quyển" của bản tactical: ảnh nền game, scanline,
   vignette, khung ngắm, con trỏ ngắm bám chuột. */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-bg,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-scanlines,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-vignette,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-brackets,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cursor {
  display: none !important;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero--cursor-active,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero--cursor-active a {
  cursor: auto;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero--cursor-active a {
  cursor: pointer;
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--xl-paper);
}

/* Lưới ô bảng tính: tỉ lệ ô ~ 64x24 như Excel mặc định */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-grid-overlay {
  background-image:
    linear-gradient(rgba(16, 124, 65, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 124, 65, 0.07) 1px, transparent 1px);
  background-size: 64px 24px;
}

/* ---------------------------------------------------------------------
   Kiểu chữ
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-eyebrow {
  font-family: var(--xl-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-eyebrow__dot {
  transform: none;
  border-radius: 1px;
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-heading {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  color: var(--xl-ink);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-heading--accent {
  color: var(--xl-green);
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-rule,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-rule--center,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__content .cscd-rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-rule--center {
  margin-left: auto;
  margin-right: auto;
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-link-arrow {
  font-family: var(--xl-font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-link-arrow:hover {
  color: var(--xl-green-dark);
}

/* ---------------------------------------------------------------------
   Nút bấm: chữ nhật bo nhẹ, phẳng như nút của Office
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn {
  padding: 0.8rem 1.75rem;
  font-family: var(--xl-font);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  clip-path: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn:hover {
  transform: translateY(-1px);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn:disabled {
  pointer-events: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn--primary {
  background: var(--xl-green);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 61, 38, 0.2);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn--primary:hover {
  background: var(--xl-green-dark);
  color: #fff;
  box-shadow: 0 8px 20px rgba(16, 124, 65, 0.25);
}
/* Nút phụ: viền thật thay cho kiểu "2 lớp" của bản vát góc */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn--ghost {
  background: #fff;
  color: var(--xl-green);
  box-shadow: inset 0 0 0 1.5px var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn--ghost::after {
  display: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-btn--ghost:hover {
  background: var(--xl-green-soft);
  color: var(--xl-green-dark);
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-icon-btn {
  border-radius: 6px;
  clip-path: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--xl-line-strong);
  color: var(--xl-muted);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-icon-btn:hover:not(:disabled) {
  background: var(--xl-green-soft);
  color: var(--xl-green);
  box-shadow: inset 0 0 0 1px var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-icon-btn:disabled {
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero {
  min-height: min(78vh, 640px);
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, rgba(246, 248, 246, 0.96) 30%, rgba(246, 248, 246, 0) 100%),
    linear-gradient(rgba(16, 124, 65, 0.09) 1px, transparent 1px) 0 0 / 64px 24px,
    linear-gradient(90deg, rgba(16, 124, 65, 0.09) 1px, transparent 1px) 0 0 / 64px 24px,
    var(--xl-paper);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__eyebrow {
  font-size: 0.9rem;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__heading {
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: normal;
  text-shadow: none;
  color: var(--xl-ink);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__text {
  font-size: 1.08rem;
  line-height: 1.75;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__member-name {
  font-family: var(--xl-font);
  color: var(--xl-ink);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__member-role {
  font-family: var(--xl-font);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-hero__stats {
  border-top: 1px solid var(--xl-line-strong);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-stat__value {
  font-family: var(--xl-mono);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-stat__label {
  font-family: var(--xl-font);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
   Thẻ (feature, blog, panel, kênh): trắng, viền mảnh, bo nhẹ
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-panel,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel {
  clip-path: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-line), 0 1px 3px rgba(16, 40, 28, 0.06);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card:hover,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card:hover,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-panel:hover,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel:hover {
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-green), 0 14px 30px rgba(16, 124, 65, 0.13);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card:hover,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card:hover {
  transform: translateY(-4px);
}

:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card__image,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card__image {
  background: var(--xl-green-soft);
  border-radius: 8px 8px 0 0;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card__image img {
  filter: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card:hover .cscd-feature-card__image img {
  filter: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card__shine {
  display: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card__index {
  font-family: var(--xl-mono);
  color: var(--xl-green);
  text-shadow: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-card__title,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card__title,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-panel__title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card__date,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-panel__tag {
  font-family: var(--xl-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card__slide-link {
  font-family: var(--xl-font);
  letter-spacing: 0;
  text-transform: none;
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--xl-line-strong);
  border-radius: 4px;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .blog-card__slide-link:hover {
  background: var(--xl-green-soft);
  color: var(--xl-green-dark);
}

/* Khối chia băng: Blog/Tin tức nền trắng, xen kẽ với nền giấy */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-home-blog {
  background: #fff;
  border-top: 1px solid var(--xl-line);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-feature-cards {
  border-top: 1px solid var(--xl-line);
}

/* ---------------------------------------------------------------------
   CTA cuối trang: băng xanh Excel đậm, chữ trắng
   --------------------------------------------------------------------- */
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta {
  background: var(--xl-green-deep);
  border-top: 0;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-heading,
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta__social-label {
  color: #fff;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta__social-label {
  text-transform: none;
  font-weight: 600;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta__text {
  color: rgba(255, 255, 255, 0.82);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-rule {
  background: var(--xl-green-bright);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-btn--primary {
  background: #fff;
  color: var(--xl-green-deep);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-btn--primary:hover {
  background: var(--xl-green-soft);
  color: var(--xl-green-deep);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-cta .cscd-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel {
  color: var(--xl-text);
  box-shadow: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel:hover {
  color: var(--xl-ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel__icon {
  color: var(--xl-green);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel__name {
  font-family: var(--xl-font);
  font-size: 0.97rem;
  letter-spacing: 0;
  text-transform: none;
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel__arrow {
  border-color: var(--xl-muted);
}
:is(body.template-home, body.template-tools, body.template-tool, body.template-guides, body.template-guide) .cscd-channel:hover .cscd-channel__arrow {
  border-color: var(--xl-green);
}

/* =====================================================================
   Header + footer dùng chung toàn site (trừ 2 template slideshow đã ẩn chúng)
   @DARK = nhóm template tối đã có sẵn bộ header/footer tactical (cần đè màu)
   @LIGHT = các template sáng còn lại (header trắng + footer cam của theme gốc)
   ===================================================================== */
body:not(.template-slideshow):not(.template-slideshow-deck) header {
  background: #fff;
  background-image: none;
  border-top: 3px solid var(--xl-green);
  border-bottom: 1px solid var(--xl-line);
  box-shadow: 0 1px 6px rgba(16, 40, 28, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--xl-font);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .menu-link {
  font-family: var(--xl-font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--xl-text);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .menu-link:hover {
  color: var(--xl-green);
  background: none;
}
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .menu-link:hover {
  border-bottom-color: var(--xl-green);
  background-color: var(--xl-green-soft);
}
:is(body.template-home, body.template-blog, body.template-blog-item, body.template-member, body.template-members, body.template-wiki, body.template-error) .menu-link::after {
  background: var(--xl-green);
}
:is(body.template-home, body.template-blog, body.template-blog-item, body.template-member, body.template-members, body.template-wiki, body.template-error) .menu-link:hover {
  color: var(--xl-green);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .menu-link--cta {
  color: var(--xl-green);
  font-weight: 700;
}
body:not(.template-slideshow):not(.template-slideshow-deck) .menu-link--cta:hover {
  color: var(--xl-green-dark);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .submenu {
  background: #fff;
  border: 1px solid var(--xl-line);
  border-top: 3px solid var(--xl-green);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 28px rgba(16, 40, 28, 0.12);
  backdrop-filter: none;
}
/* Submenu nhiều mục dài (vd. "Giới thiệu" -> các section trang chủ): mỗi mục một dòng */
@media (min-width: 769px) {
  body:not(.template-slideshow):not(.template-slideshow-deck) .header-bottom .submenu { min-width: 240px; }
  body:not(.template-slideshow):not(.template-slideshow-deck) .header-bottom .submenu .menu-link { white-space: nowrap; }
}
body:not(.template-slideshow):not(.template-slideshow-deck) .submenu .menu-link:hover {
  background-color: var(--xl-green-soft);
}

body:not(.template-slideshow):not(.template-slideshow-deck) .lang-switcher__link {
  font-family: var(--xl-font);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--xl-green) !important; /* đè !important của .lang-switcher__link gốc */
  background: #fff;
  border-color: var(--xl-line-strong);
  border-radius: 4px;
}
body:not(.template-slideshow):not(.template-slideshow-deck) .lang-switcher__link:hover {
  color: #fff !important;
  background: var(--xl-green);
  border-color: var(--xl-green);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .header-social .social-link {
  color: var(--xl-muted);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .header-social .social-link:hover {
  color: var(--xl-green);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .menu-toggle span {
  background: var(--xl-text);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .main-nav {
  background: #fff;
  backdrop-filter: none;
  border-right: 1px solid var(--xl-line);
}
body:not(.template-slideshow):not(.template-slideshow-deck) .main-nav .menu-link {
  color: var(--xl-text);
}

/* Các template sáng (tools, tool, default...) vẫn mang bố cục header 2 hàng + logo 125px
   của theme gốc — gom về đúng bố cục 1 hàng, logo nhỏ, dính trên đầu như nhóm @DARK. */
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) header { position: sticky; top: 0; z-index: 100; padding: 0.5rem 0; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .header-layout { align-items: center; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .header-right { flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.25rem; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .lang-switcher-row { padding: 0; margin: 0; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .logo img { max-height: 52px; width: auto; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .header-bottom { border: 0; }
body:not(.template-home):not(.template-blog):not(.template-blog-item):not(.template-member):not(.template-members):not(.template-wiki):not(.template-error):not(.template-slideshow):not(.template-slideshow-deck) .menu { gap: 0.35rem; }

/* Footer: băng xanh Excel đậm, chạy xuyên mọi trang */
body:not(.template-slideshow):not(.template-slideshow-deck) footer {
  position: relative;
  background: var(--xl-green-deep);
  background-image: none;
  color: rgba(255, 255, 255, 0.75);
  border-top: 0;
  font-family: var(--xl-font);
}
body:not(.template-slideshow):not(.template-slideshow-deck) footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 3px;
  background: var(--xl-green-bright);
}
body:not(.template-slideshow):not(.template-slideshow-deck) footer a {
  color: #cfe8d8;
}
body:not(.template-slideshow):not(.template-slideshow-deck) footer a:hover {
  color: #fff;
  text-decoration: underline;
}
body:not(.template-slideshow):not(.template-slideshow-deck) footer h1,
body:not(.template-slideshow):not(.template-slideshow-deck) footer h2,
body:not(.template-slideshow):not(.template-slideshow-deck) footer h3,
body:not(.template-slideshow):not(.template-slideshow-deck) footer h4,
body:not(.template-slideshow):not(.template-slideshow-deck) footer strong {
  font-family: var(--xl-font);
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
body:not(.template-slideshow):not(.template-slideshow-deck) .footer-bottom {
  font-family: var(--xl-font);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.75);
}
/* Chân trang: © TĐH Excel năm bên trái, link Điều khoản dịch vụ bên phải (màn hẹp xếp giữa) */
body:not(.template-slideshow):not(.template-slideshow-deck) .footer-bottom__row { justify-content: space-between; }
.footer-bottom__link { color: inherit; text-decoration: none; }
.footer-bottom__link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 600px) { body:not(.template-slideshow):not(.template-slideshow-deck) .footer-bottom__row { justify-content: center; } }

/* Logo hiện tại (legionteam-wordmark.png) là chữ TRẮNG trên nền trong suốt, làm
   cho nền tối — lên header trắng sẽ biến mất. Tô tạm sang xanh Excel bằng
   filter (brightness(0) ép về đen, các filter sau nhuộm sang xanh lá).
   Khi có logo mới dành cho nền sáng thì xóa quy tắc này. */
body:not(.template-slideshow):not(.template-slideshow-deck) header .logo img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1050%) hue-rotate(114deg) brightness(92%);
}

/* =====================================================================
   Section kế toán (modular/xl-*, trang tools/tool) — dùng biến --xl-* ở :root
   Class đều có tiền tố "xl-" nên không đụng tới bộ .cscd-* của các trang tối.
   ===================================================================== */
.xl-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

.xl-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.75rem) 0;
  background: var(--xl-paper);
  color: var(--xl-text);
  font-family: var(--xl-font);
}
.xl-section--white { background: #fff; border-top: 1px solid var(--xl-line); border-bottom: 1px solid var(--xl-line); }
/* Nền lưới ô Excel giống hero, bật theo từng section bằng header grid_bg: true.
   Giữa section mờ dần về màu nền để chữ dễ đọc, lưới lộ ra ở hai bên. */
.xl-section--grid {
  --xl-grid-fade: rgba(246, 248, 246, 0.97);
  --xl-grid-base: var(--xl-paper);
  background:
    radial-gradient(ellipse 62% 75% at 50% 50%, var(--xl-grid-fade) 40%, rgba(246, 248, 246, 0) 100%),
    linear-gradient(rgba(16, 124, 65, 0.08) 1px, transparent 1px) 0 0 / 64px 24px,
    linear-gradient(90deg, rgba(16, 124, 65, 0.08) 1px, transparent 1px) 0 0 / 64px 24px,
    var(--xl-grid-base);
}
.xl-section--white.xl-section--grid { --xl-grid-fade: rgba(255, 255, 255, 0.97); --xl-grid-base: #fff; }
.xl-section [id], .xl-section[id] { scroll-margin-top: 90px; }

.xl-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.xl-title {
  position: relative;
  margin: 0;
  padding-bottom: 1rem;
  font-family: var(--xl-font);
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--xl-ink);
}
.xl-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--xl-green);
  transform: translateX(-50%);
}
.xl-title--left { text-align: left; }
.xl-title--left::after { left: 0; transform: none; }
.xl-head .xl-title { text-wrap: balance; }
.xl-head .xl-sub { text-wrap: balance; }
.xl-sub { margin: 1.1rem auto 0; font-size: 1.07rem; line-height: 1.75; color: var(--xl-muted); }
.xl-sub--wide { max-width: 820px; }
.xl-sub--left { margin-left: 0; max-width: 720px; }
.xl-sub strong, .xl-body strong { color: var(--xl-ink); }
.xl-body { font-size: 1.04rem; line-height: 1.75; margin: 1.25rem 0 1rem; }
.xl-center { display: flex; justify-content: center; margin-top: 2.5rem; }

.xl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-family: var(--xl-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--xl-green);
}
.xl-eyebrow__cell {
  padding: 0.1rem 0.45rem;
  border: 1.5px solid var(--xl-green);
  border-radius: 2px;
  background: #fff;
  font-size: 0.75rem;
}

/* ---- Nút ---- */
.xl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 6px;
  font-family: var(--xl-font);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.xl-btn:hover { text-decoration: none; transform: translateY(-1px); }
.xl-btn--primary { background: var(--xl-green); color: #fff; box-shadow: 0 1px 2px rgba(16, 61, 38, 0.2); }
.xl-btn--primary:hover { background: var(--xl-green-dark); color: #fff; box-shadow: 0 8px 20px rgba(16, 124, 65, 0.25); }
.xl-btn--ghost, .xl-btn--outline { background: #fff; color: var(--xl-green); box-shadow: inset 0 0 0 1.5px var(--xl-green); }
.xl-btn--ghost:hover, .xl-btn--outline:hover { background: var(--xl-green-soft); color: var(--xl-green-dark); }
.xl-btn--light { background: #fff; color: var(--xl-green-deep); }
.xl-btn--light:hover { background: var(--xl-green-soft); color: var(--xl-green-deep); }
.xl-btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65); }
.xl-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.xl-btn--sm { padding: 0.5rem 0.9rem; font-size: 0.86rem; }
.xl-btn--block { width: 100%; }
/* Disabled: pointer-events:none để :hover (kể cả "button:hover" xanh lá của hệ nút cũ) không bao giờ khớp — xem CLAUDE.md */
.xl-btn:disabled, .xl-btn[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.5px var(--xl-line-strong);
  color: var(--xl-muted);
  background: #fff;
}
.xl-btn--primary:disabled { background: var(--xl-line-strong); color: #fff; box-shadow: none; }
.xl-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.xl-btn-row--center { justify-content: center; }
.xl-link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--xl-green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.xl-link-btn:hover { background: none; color: var(--xl-green-dark); }

.xl-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  background: var(--xl-green-soft);
  color: var(--xl-green-dark);
  font-family: var(--xl-mono);
  font-size: 0.74rem;
  font-weight: 600;
}
.xl-badge {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--xl-green);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.xl-badge--soon { background: #fff4d6; color: #8a5a00; }

/* ---- Danh sách ✓ / ✗ ---- */
.xl-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.7rem; }
.xl-list li { display: flex; gap: 0.65rem; align-items: flex-start; line-height: 1.6; }
.xl-list li .xl-icon { margin-top: 0.2rem; }
.xl-list--check .xl-icon { color: var(--xl-green); }
.xl-list--cross .xl-icon { color: #c0392b; }

.xl-card {
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-line), 0 1px 3px rgba(16, 40, 28, 0.06);
}
.xl-card p { margin: 0.4rem 0 0; line-height: 1.65; }
.xl-card__title { margin: 0 0 0.4rem; font-size: 1.12rem; font-weight: 700; color: var(--xl-ink); font-family: var(--xl-font); }
.xl-card--accent { box-shadow: 0 0 0 1.5px var(--xl-green), 0 14px 30px rgba(16, 124, 65, 0.1); }
.xl-card__closing { margin-top: 1rem !important; padding-top: 1rem; border-top: 1px dashed var(--xl-line-strong); font-weight: 600; color: var(--xl-ink); }

.xl-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.xl-split--even { grid-template-columns: 1fr 1fr; align-items: stretch; }

.xl-quote {
  text-wrap: balance;
  max-width: 760px;
  margin: 3rem auto 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--xl-green-dark);
}

/* ---- 1. Hero ---- */
.xl-hero {
  overflow-x: clip;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 70% 80% at 25% 40%, rgba(246, 248, 246, 0.97) 35%, rgba(246, 248, 246, 0) 100%),
    linear-gradient(rgba(16, 124, 65, 0.08) 1px, transparent 1px) 0 0 / 64px 24px,
    linear-gradient(90deg, rgba(16, 124, 65, 0.08) 1px, transparent 1px) 0 0 / 64px 24px,
    var(--xl-paper);
}
.xl-hero__grid { width: 100%; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.xl-hero__title {
  margin: 0;
  font-family: var(--xl-font);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--xl-ink);
}
.xl-hero__lead { margin: 1.25rem 0 0; font-size: 1.22rem; line-height: 1.6; color: var(--xl-ink); }
.xl-hero__lead strong { color: var(--xl-green); }
.xl-hero__text { margin: 0.9rem 0 0; font-size: 1.04rem; line-height: 1.75; color: var(--xl-muted); max-width: 560px; }
.xl-hero__badges { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0.6rem 2.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; font-size: 0.9rem; font-weight: 600; color: var(--xl-text); }
.xl-hero__badges li { display: flex; align-items: flex-start; gap: 0.35rem; line-height: 1.4; }
.xl-hero__badges .xl-icon { margin-top: 0.1rem; }
/* Cột chữ hero được phép co lại (mặc định min-width:auto của grid item làm nội dung dài đẩy vỡ layout) */
.xl-hero__copy { min-width: 0; }
.xl-hero__badges .xl-icon { color: var(--xl-green); }

/* Cửa sổ Excel minh họa */
.xl-window {
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-line-strong), 0 30px 60px -20px rgba(16, 61, 38, 0.35);
  font-family: 'Segoe UI', var(--xl-font);
  font-size: 0.78rem;
  /* --xl-win-scale: phóng to tổng thể khung Excel (cả lúc nghỉ lẫn lúc zoom), gốc phóng ở mép phải */
  --xl-win-scale: 1.07;
  --xl-win-rest: perspective(1400px) rotateY(-10deg) scale(var(--xl-win-scale));
  transform: var(--xl-win-rest);
  transform-origin: 100% 50%;
  /* Lật + bay từ phải vào vị trí khi tải trang */
  /* fill-mode backwards (không phải both): giữ transform của animation sau khi chạy xong sẽ
     chặn mọi transform đặt sau đó, kể cả hiệu ứng zoom .is-zoomed bên dưới */
  animation: xl-win-flyin 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
  position: relative;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
/* Bấm "Tổng hợp pay roll": khung Excel phóng to nhẹ, giữ nguyên độ nghiêng (initXlHeroDemo thêm/gỡ class) */
.xl-window.is-zoomed {
  transform: var(--xl-win-rest) scale(var(--xl-win-zoom, 1.05));
  box-shadow: 0 0 0 1px var(--xl-line-strong), 0 40px 80px -24px rgba(16, 61, 38, 0.45);
}
@keyframes xl-win-flyin {
  from { opacity: 0; transform: perspective(1400px) translateX(260px) rotateY(-70deg) scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: var(--xl-win-rest); }
}

/* Cụm nhấn trong tiêu đề hero: chữ xanh + gạch chân nét cọ vẽ tay, tự "quét" từ trái sang khi tải trang */
.xl-mark {
  position: relative;
  z-index: 0;
  color: var(--xl-green);
  white-space: nowrap;
}
.xl-mark::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -3%;
  right: -3%;
  bottom: -0.12em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 35 5, 70 15, 105 9 S 165 5, 197 10' fill='none' stroke='%2321a366' stroke-width='7' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M8 15 C 50 10, 95 17, 140 12 S 180 11, 194 13' fill='none' stroke='%2321a366' stroke-width='3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  animation: xl-mark-draw 0.7s ease-out both;
}
.xl-mark + .xl-mark::after, .xl-hero__title .xl-mark:last-of-type::after { animation-delay: 0.55s; }
.xl-hero__title .xl-mark:first-of-type::after { animation-delay: 0.3s; }
/* Cụm phụ trong tiêu đề (vd "đi đôi với") nhỏ lại, cụm chính (vd "Cá nhân hóa") to hơn */
.xl-hero__title .xl-title-small { font-size: 0.62em; font-weight: 700; color: var(--xl-muted); white-space: nowrap; }
.xl-hero__title .xl-title-big { font-size: 1.18em; }
@keyframes xl-mark-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .xl-window, .xl-mark::after { animation: none; }
}
.xl-window__titlebar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; background: var(--xl-green); color: #fff; }
.xl-window__logo { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: #fff; color: var(--xl-green); font-weight: 800; font-size: 0.75rem; }
.xl-window__name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-window__dots { display: flex; gap: 0.35rem; }
.xl-window__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.xl-window__tabs { display: flex; gap: 0.15rem; padding: 0.35rem 0.6rem 0; border-bottom: 1px solid #d4d4d4; background: #f3f3f3; color: #444; overflow: hidden; }
.xl-window__tabs span { padding: 0.35rem 0.7rem; border-radius: 4px 4px 0 0; white-space: nowrap; }
.xl-window__tabs .is-active { background: #fff; color: var(--xl-green); font-weight: 700; box-shadow: 0 -2px 0 var(--xl-green) inset; }
.xl-window__sheet { overflow: hidden; }
.xl-window__sheet table { margin: 0; width: 100%; border-collapse: collapse; font-family: var(--xl-mono); font-size: 0.72rem; }
.xl-window__sheet th, .xl-window__sheet td { padding: 0.32rem 0.4rem; border: 1px solid #e3e3e3; white-space: nowrap; text-align: left; }
.xl-window__sheet thead th, .xl-window__sheet tbody th { background: #f3f3f3; color: #666; font-weight: 500; text-align: center; }
.xl-window__sheet tbody th { width: 28px; }
.xl-window__sheet .is-head td { background: var(--xl-green-soft); color: var(--xl-green-dark); font-weight: 600; font-family: var(--xl-font); }
/* Tiêu đề cột cho phép xuống 2 dòng để bảng 8 cột (Import pay roll) vừa khung mà không cắt cột cuối */
.xl-window__sheet .is-head td { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.xl-window__sheet td.is-right { text-align: right; }
.xl-window__sheet td { font-family: var(--xl-font); }
.xl-window__sheet td.is-mono { font-family: var(--xl-mono); }
/* Dải tab sheet dưới bảng tính (Tháng 1...12) — tràn thì cắt như Excel thật */
.xl-window__sheets { display: flex; align-items: stretch; gap: 0; overflow: hidden; border-top: 1px solid #d4d4d4; background: #f3f3f3; font-size: 0.74rem; color: #555; white-space: nowrap; }
.xl-window__sheet-nav { flex: none; padding: 0.4rem 0.6rem; color: #999; font-size: 0.6rem; letter-spacing: 0.2em; }
.xl-window__sheet-tab { flex: none; padding: 0.4rem 0.75rem; border-right: 1px solid #dcdcdc; }
.xl-window__sheet-tab.is-active { background: #fff; color: var(--xl-green); font-weight: 700; box-shadow: inset 0 -2px 0 var(--xl-green); }
.xl-window__status { display: flex; align-items: center; gap: 0.8rem; padding: 0.45rem 0.7rem; background: var(--xl-green-deep); color: #e3f3e9; }
.xl-window__ok { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; white-space: nowrap; }
.xl-window__bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.xl-window__bar i { display: block; width: 0; height: 100%; background: var(--xl-green-bright); }
.xl-window__timer { font-family: var(--xl-mono); font-weight: 600; color: #fff; white-space: nowrap; }
.xl-window__timer[hidden] { display: none; }
.xl-window__replay {
  flex: none;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.xl-window__replay:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.xl-window__replay[hidden] { display: none; }

/* Demo tương tác: hai sheet (Tháng 1 / Import pay roll) chồng cùng một ô grid, chỉ sheet
   .is-current hiện -> khung giữ chiều cao của sheet cao hơn, đổi sheet không bị nhảy. */
.xl-window__body { position: relative; display: grid; }
.xl-window__body > .xl-window__sheet { grid-area: 1 / 1; visibility: hidden; }
.xl-window__body > .xl-window__sheet.is-current { visibility: visible; }
[data-xl-sheet="import"] .xl-window__row { opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; }
[data-xl-sheet="import"] .xl-window__row.is-shown { opacity: 1; transform: none; }
/* Dòng vừa đổ vào nháy vàng nhẹ rồi tắt dần (JS thêm .is-flash rồi gỡ ra) */
[data-xl-sheet="import"] .xl-window__row td { transition: background-color 0.8s ease; }
[data-xl-sheet="import"] .xl-window__row.is-flash td { background-color: #fff4bf; transition: none; }
.xl-window__sheet-tab--new:not([hidden]) { animation: xl-tab-in 0.35s ease; }
@keyframes xl-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.xl-window__sheet-tab.is-scan { background: var(--xl-green-soft); color: var(--xl-green-dark); }

/* Nút like xanh ở góc dưới phải vùng bảng tính, hiện khi demo chạy xong: bật lên rồi rung rinh nhẹ */
.xl-like {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--xl-green);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(16, 124, 65, 0.18), 0 10px 22px rgba(16, 61, 38, 0.35);
  pointer-events: none;
  animation: xl-like-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both, xl-like-wiggle 1.6s ease-in-out 0.5s infinite;
}
.xl-like[hidden] { display: none; }
.xl-like svg { transform-origin: 30% 80%; }
@keyframes xl-like-pop { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes xl-like-wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(-12deg); }
  20% { transform: rotate(9deg); }
  30% { transform: rotate(-6deg); }
  40% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .xl-like { animation: none; }
}

/* Hộp thoại tool (kiểu UserForm Windows) phủ lên toàn bộ vùng bảng tính */
.xl-dialog {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  /* Lệch sang phải một chút thay vì nằm chính giữa; không phủ màu/làm mờ bảng phía sau */
  place-items: center end;
  padding: 1rem 8% 1rem 1rem;
  transition: opacity 0.25s ease;
}
.xl-dialog[hidden] { display: none; }
.xl-dialog.is-closing { opacity: 0; }
.xl-dialog__box {
  width: min(340px, 100%);
  overflow: hidden;
  border: 1px solid #9aa39d;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 40, 28, 0.28);
  font-family: 'Segoe UI', var(--xl-font);
  animation: xl-dialog-in 0.3s ease;
}
@keyframes xl-dialog-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
.xl-dialog__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #e3e3e3; background: #f5f5f5; }
.xl-dialog__title { flex: 1; font-size: 0.82rem; font-weight: 600; color: #222; }
.xl-dialog__x { color: #888; font-size: 0.75rem; }
.xl-dialog__body { padding: 1rem 1.1rem 1.15rem; }
/* Tab trong cửa sổ tool (kiểu MultiPage của UserForm): tab đang chọn nền trắng, nối liền phần thân */
.xl-dialog__tabs { display: flex; gap: 2px; padding: 0.5rem 0.75rem 0; border-bottom: 1px solid #d4d4d4; background: #f5f5f5; }
.xl-dialog__tab { padding: 0.35rem 0.7rem; border: 1px solid transparent; border-bottom: 0; border-radius: 5px 5px 0 0; font-size: 0.76rem; color: #666; white-space: nowrap; }
.xl-dialog__tab.is-active { position: relative; top: 1px; border-color: #d4d4d4; background: #fff; color: var(--xl-green); font-weight: 700; box-shadow: inset 0 2px 0 var(--xl-green); }
.xl-dialog__body p { margin: 0 0 0.9rem; font-size: 0.85rem; line-height: 1.5; color: var(--xl-muted); }
.xl-dialog__body .xl-btn { font-size: 0.92rem; }
.xl-dialog__wrap { position: relative; width: min(340px, 100%); }
.xl-dialog__box { width: 100%; }
/* Nút chạy tool: vòng sáng lan ra để hút mắt */
.xl-dialog__run { animation: xl-run-pulse 1.8s ease-out infinite; }
@keyframes xl-run-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 124, 65, 0.45); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(16, 124, 65, 0); }
}
/* Chữ "Click!" viết tay + mũi tên cong, đặt bên trái hộp thoại, chỉ xuống nút */
.xl-dialog__hint {
  position: absolute;
  right: calc(100% - 24px);
  bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 130px;
  color: #e8590c;
  pointer-events: none;
  /* Viền trắng mờ quanh chữ + mũi tên để vẫn đọc rõ khi đè lên số liệu bảng */
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
  animation: xl-hint-nudge 1.1s ease-in-out infinite;
}
.xl-dialog__hint b {
  margin-left: 2px;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-8deg);
}
.xl-dialog__hint svg { width: 100%; height: auto; margin-top: -4px; }
.xl-dialog__arrow--down { display: none; }
/* Nhích ngang về phía nút, như đang chọc vào nút */
@keyframes xl-hint-nudge {
  0%, 100% { transform: translateX(-7px); }
  50% { transform: translateX(0); }
}
@media (max-width: 720px) {
  /* Hẹp: không còn chỗ bên trái -> đặt chữ phía trên hộp thoại, mũi tên chỉ xuống */
  .xl-dialog__hint { right: auto; left: 0; bottom: calc(100% - 6px); width: 96px; animation-name: xl-hint-nudge-down; }
  .xl-dialog__arrow--side { display: none; }
  .xl-dialog__arrow--down { display: block; }
  .xl-dialog__hint b { font-size: 1.6rem; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  /* Cửa sổ Excel hẹp lại -> đẩy hộp thoại sát phải hơn + thu nhỏ chữ "Click!" để không bị mép cửa sổ cắt mất */
  .xl-dialog { padding-right: 3%; }
  .xl-dialog__hint { width: 112px; bottom: 27px; }
  .xl-dialog__hint b { font-size: 1.7rem; }
}
@keyframes xl-hint-nudge-down {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5px, 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .xl-dialog__run, .xl-dialog__hint { animation: none; }
}

/* ---- 2. Nghe có quen không: bảng tính ---- */
/* Checklist "Nghe có quen không": việc cần làm | thời gian ước tính (Làm tay / Có tool) */
.xl-check { --xl-check-time: 190px; max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 12px 30px -12px rgba(16, 61, 38, 0.18); }
.xl-check__head, .xl-check__item { display: grid; grid-template-columns: minmax(0, 1fr) var(--xl-check-time) var(--xl-check-time); align-items: center; }
.xl-check__head { background: var(--xl-green); color: #fff; font-weight: 700; }
.xl-check__head-task { padding: 1rem 1.25rem; align-self: center; text-align: center; font-size: 1.05rem; }
.xl-check__head-time { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.xl-check__head-time b { grid-column: 1 / -1; padding: 0.6rem 1rem 0.35rem; text-align: center; font-size: 1.05rem; }
.xl-check__head-time span { padding: 0.35rem 1rem 0.6rem; text-align: center; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.xl-check__head-time span + span { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.xl-check__list { margin: 0; padding: 0; list-style: none; }
.xl-check__item { margin: 0; border-top: 1px solid #e8ece9; transition: background-color 0.2s ease; }
.xl-check__item:first-child { border-top: 0; }
.xl-check__item:has(.xl-check__input:checked) { background: #fbfdfb; }
.xl-check__task { display: flex; align-items: flex-start; gap: 0.85rem; margin: 0; padding: 1rem 1.25rem; cursor: pointer; color: var(--xl-ink); font-weight: 500; line-height: 1.5; }
.xl-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.xl-check__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--xl-line-strong); border-radius: 5px; background: #fff; color: #fff; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.xl-check__box .xl-icon { width: 14px; height: 14px; opacity: 0; transform: scale(0.4); transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.xl-check__task:hover .xl-check__box { border-color: var(--xl-green); }
.xl-check__input:focus-visible + .xl-check__box { outline: 2px solid var(--xl-green); outline-offset: 2px; }
.xl-check__input:checked + .xl-check__box { border-color: var(--xl-green); background: var(--xl-green); }
.xl-check__input:checked + .xl-check__box .xl-icon { opacity: 1; transform: none; }
.xl-check__time { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; align-self: stretch; padding: 0.75rem 1rem; border-left: 1px solid #e8ece9; font-family: var(--xl-mono); font-size: 0.88rem; text-align: left; }
.xl-check__time .xl-icon { flex: none; }
.xl-check__time--manual { color: #a33a2b; background: #fdf3f1; }
.xl-check__time--tool { color: var(--xl-green-dark); background: var(--xl-green-soft); font-weight: 600; }
.xl-pain__outro { max-width: 760px; margin: 2rem auto 0; text-align: center; font-size: 1.15rem; line-height: 1.6; }
.xl-pain__outro strong { color: var(--xl-green); }
/* Bong bóng "Bạn có đang băn khoăn?" gộp vào đầu khối pain: câu hỏi (cỡ như intro) -> bong bóng -> intro */
.xl-pain__ask { font-weight: 600; color: var(--xl-ink); }
.xl-pain__worries { max-width: 1040px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.xl-pain__intro .xl-sub { margin-top: 0; }
/* Điện thoại: bong bóng chia 2 trang (JS initXlWorryMobile), chấm tròn nhỏ báo trang, vuốt ngang để chuyển */
.xl-pain__worry-dots { display: none; }
@media (max-width: 560px) {
  .xl-pain__worries.is-paged { margin-bottom: 0.9rem; touch-action: pan-y; }
  .xl-pain__worries.is-paged .xl-worry__list { align-content: start; }
  .xl-pain__worries.is-paged .xl-worry__item[hidden] { display: none; }
  .xl-pain__worries.is-paged + .xl-pain__worry-dots { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
  .xl-pain__worry-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--xl-line-strong); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
  .xl-pain__worry-dots button.is-active { background: var(--xl-green); transform: scale(1.3); }
}
/* Bảng thao tác chia trang: mũi tên hai bên bảng (không chấm tròn); các trang xếp chồng, chiều cao theo trang dài nhất */
.xl-pain__slider { display: grid; grid-template-columns: auto minmax(0, 1000px) auto; justify-content: center; align-items: center; gap: 1.25rem 1.5rem; }
.xl-pain__slider:not(.has-pages) { grid-template-columns: minmax(0, 1000px); }
.xl-pain__slider .xl-check { width: 100%; }
.xl-check__pages { display: grid; grid-template-columns: minmax(0, 1fr); }
.xl-check__pages > .xl-check__list { grid-area: 1 / 1; }
.xl-check__pages > .xl-check__list:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .xl-pain__slider { grid-template-columns: auto auto; grid-template-areas: "table table" "prev next"; }
  .xl-pain__slider .xl-check { grid-area: table; }
  .xl-pain__arrow--prev { grid-area: prev; justify-self: end; }
  .xl-pain__arrow--next { grid-area: next; justify-self: start; }
}
/* Bảng thao tác chỉ còn 1 cột thời gian (Thời gian thực hiện) */
.xl-pain .xl-check__head, .xl-pain .xl-check__item { grid-template-columns: minmax(0, 1fr) 220px; }
.xl-check__head-time--single { grid-column: auto; display: grid; place-items: center; align-self: stretch; padding: 1rem; white-space: nowrap; text-align: center; font-size: 1.05rem; }
@media (max-width: 720px) {
  .xl-pain .xl-check__item { grid-template-columns: minmax(0, 1fr); }
  .xl-pain .xl-check__time::before { content: none; }
  .xl-pain .xl-check__time { padding-left: calc(1rem + 18px + 0.85rem); }
}
/* Nút "Hãy chỉ cho tôi xem với": ô thời gian lật từ giá trị làm tay sang giá trị tool, nền đỏ nhạt -> xanh */
.xl-check__t { display: inline-flex; align-items: center; gap: 0.4rem; }
.xl-pain .xl-check__time--manual { display: grid; justify-content: start; align-items: center; }
.xl-check__t { grid-area: 1 / 1; }
.xl-check__t--tool { visibility: hidden; }
.xl-pain .xl-check__time--manual { transition: background-color 0.4s ease, color 0.4s ease; transition-delay: calc(var(--i, 0) * 0.15s); }
.xl-pain.is-tool .xl-check__time--manual { color: var(--xl-green-dark); background: var(--xl-green-soft); font-weight: 600; }
.xl-pain.is-tool .xl-check__t--manual { animation: xl-fade-away 0.15s ease forwards; animation-delay: calc(var(--i, 0) * 0.15s); }
@keyframes xl-fade-away { to { opacity: 0; visibility: hidden; } }
.xl-pain.is-tool .xl-check__t--tool { visibility: visible; animation: xl-pop-chip 0.5s cubic-bezier(0.34, 2, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.15s + 0.15s); }
/* Ô thời gian nổi lên lần lượt: phóng to, nhô ra khỏi bảng kèm bóng xanh rồi hạ về chỗ cũ */
.xl-pain.is-tool .xl-check__time--manual { position: relative; z-index: 1; transform-origin: 100% 50%; animation: xl-cell-rise 0.9s cubic-bezier(0.34, 1.4, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.15s); }
@keyframes xl-pop-chip { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes xl-cell-rise {
  0% { transform: none; box-shadow: none; }
  45% { transform: translateY(-4px) scale(1.1); box-shadow: 0 10px 24px -8px rgba(16, 124, 65, 0.55); z-index: 2; }
  100% { transform: none; box-shadow: none; }
}
.xl-pain__more-actions[hidden] { display: none; }
/* Nút "Hãy chỉ cho tôi xem với": to, nổi bật, nhịp sóng lan như nút "Tổng hợp pay roll tự động" ở hero */
.xl-pain__show-btn { padding: 1.2rem 2.8rem; font-size: 1.55rem; border-radius: 12px; animation: xl-run-pulse 1.8s ease-out infinite; }
@media (max-width: 600px) { .xl-pain__show-btn { padding: 1rem 1.8rem; font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .xl-pain__show-btn { animation: none; } }
@media (prefers-reduced-motion: reduce) { .xl-pain.is-tool .xl-check__t--tool, .xl-pain.is-tool .xl-check__time--manual { animation: none; } .xl-pain.is-tool .xl-check__t--manual { animation: none; visibility: hidden; } .xl-pain .xl-check__time--manual { transition: none; } }
/* Sau khi bấm nút: cụm cũ fade out, cụm kết luận + nút pop ra (fade + zoom) rồi rung nhẹ, lần lượt */
.xl-pain__more[data-xl-pain-show] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.xl-pain__more[data-xl-pain-show] > * { grid-area: 1 / 1; }
.xl-pain__before { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.xl-pain__before.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.xl-pain__before[hidden], .xl-pain__after[hidden] { display: none; }
.xl-pain__answer { max-width: 980px; margin: 0 auto; font-size: clamp(1.25rem, 2.6vw, 1.65rem); font-weight: 600; line-height: 1.5; color: var(--xl-muted); }
.xl-pain__answer strong { font-weight: 800; color: var(--xl-green); }
.xl-section[hidden] { display: none; }
/* Nút đi tiếp cuối khối Công thức / AI */
.xl-next { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.xl-next[hidden] { display: none; }
.xl-next__lead { margin: 0 0 1rem; font-size: 1.1rem; font-style: italic; font-weight: 600; color: var(--xl-muted); }
.xl-pain__but { margin: 1.75rem auto 0; font-size: 1.1rem; font-style: italic; font-weight: 600; color: var(--xl-muted); }
.xl-pain__ok { margin-top: 1.5rem; }
.xl-pain__ok + .xl-pain__but { margin-top: 1.5rem; }
.xl-pain__after.is-in .xl-pain__but { animation: xl-pop 0.65s cubic-bezier(0.34, 1.7, 0.5, 1) backwards; animation-delay: 0.25s; }
.xl-pain__after.is-in .xl-pain__answer, .xl-pain__after.is-in .xl-btn { animation: xl-pop 0.65s cubic-bezier(0.34, 1.7, 0.5, 1) backwards, xl-shake 0.5s ease-in-out 0.65s; }
.xl-pain__after.is-in .xl-pain__answer { animation-delay: 0.1s, 0.75s; }
.xl-pain__after.is-in .xl-btn { animation-delay: 0.3s, 0.95s; }
.xl-pain__after.is-in .xl-btn + .xl-btn { animation-delay: 0.42s, 1.07s; }
.xl-pain__after.is-in .xl-pain__ok .xl-btn { animation-delay: 0.18s, 0.83s; }
@keyframes xl-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-2deg); } 40% { transform: rotate(1.6deg); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(0.5deg); } }
@media (prefers-reduced-motion: reduce) { .xl-pain__before { transition: none; } .xl-pain__after.is-in .xl-pain__but, .xl-pain__after.is-in .xl-pain__answer, .xl-pain__after.is-in .xl-btn { animation: none; } }
.xl-pain__more { margin-top: 2rem; text-align: center; }
.xl-pain__more-btn { gap: 0.5rem; }
.xl-pain__more-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.25em; line-height: 1; display: inline-block; animation: xl-emoji-shake 2.4s ease-in-out infinite; }
@keyframes xl-emoji-shake { 0%, 70%, 100% { transform: none; } 74%, 82%, 90% { transform: rotate(-12deg) scale(1.1); } 78%, 86%, 94% { transform: rotate(12deg) scale(1.1); } }
.xl-pain__more-btn[hidden], .xl-pain__more-done[hidden] { display: none; }
.xl-pain__more-done { animation: xl-more-in 0.4s ease both; }
.xl-pain__more .xl-pain__outro { margin-top: 0; font-style: italic; color: var(--xl-muted); }
.xl-pain__more .xl-pain__note { max-width: 680px; margin: 0.6rem auto 0; line-height: 1.7; color: var(--xl-text); }
.xl-pain__more-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; }
/* Checklist dạng gọn (cỡ chữ + chiều cao dòng nhỏ) — áp dụng cả trước và sau khi mở rộng */
.xl-pain .xl-check__task { padding-top: 0.55rem; padding-bottom: 0.55rem; font-size: 0.9rem; line-height: 1.4; }
.xl-pain .xl-check__box { width: 18px; height: 18px; border-radius: 4px; }
.xl-pain .xl-check__box .xl-icon { width: 12px; height: 12px; }
.xl-pain .xl-check__time { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.8rem; }
.xl-check__item[hidden] { display: none; }
/* Dòng mở thêm hiện dần lần lượt (độ trễ --i đặt bằng JS) */
.xl-check__item--more.is-revealed { animation: xl-more-in 0.35s ease calc(var(--i, 0) * 45ms) both; }
@keyframes xl-more-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .xl-check__item--more.is-revealed, .xl-pain__more-done, .xl-pain__more-emoji { animation: none; }
}

/* ---- 3. Giỏi Excel mà vẫn mệt ---- */
.xl-callout { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--xl-green); border-radius: 0 6px 6px 0; background: var(--xl-green-soft); }
.xl-callout strong { display: block; margin-bottom: 0.3rem; color: var(--xl-ink); font-size: 1.05rem; }
.xl-callout p { margin: 0; line-height: 1.65; }
.xl-tired__subtitle { margin: 0 0 0.75rem; color: var(--xl-ink); font-size: 1.25rem; font-weight: 800; text-align: center; }
/* Dấu hiệu quá tải: khung Excel "đơ" bên trái (như hero nhưng đảo vế), chữ bên phải */
.xl-tired__frozen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin: clamp(3.5rem, 7vw, 5.25rem) 0 clamp(1.5rem, 4vw, 3rem); }
.xl-tired__frozen--text { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
.xl-tired__frozen > * { min-width: 0; }
.xl-tired__signs .xl-tired__subtitle { text-align: left; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.xl-tired__signs .xl-list { margin: 0; gap: 0.9rem; font-size: 1.02rem; }
.xl-tired__signs .xl-tired__note { margin-top: 1.25rem; text-align: left; }
/* Khung nghiêng ngược hero: mép trái là gốc, nghiêng sang phải */
.xl-window--frozen {
  --xl-win-scale: 1;
  --xl-win-rest: perspective(1400px) rotateY(10deg);
  transform-origin: 0 50%;
  animation: none;
  transition: none;
}
.xl-window--frozen .xl-window__sheet { filter: grayscale(0.35); }
/* Cuộn tới (initXlPop): khung "đơ" bay từ trái vào (đối xứng hero), hộp Not Responding bật lên sau, chữ phải fade in */
.xl-tired__frozen.is-pending > * { opacity: 0; }
.xl-tired__frozen.is-in .xl-window--frozen { animation: xl-win-flyin-left 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards; }
.xl-tired__frozen.is-in .xl-frozen__veil .xl-hang { animation: xl-pop 0.6s cubic-bezier(0.34, 1.7, 0.5, 1) 1s backwards; }
.xl-tired__frozen.is-in .xl-tired__signs { animation: xl-feat-fade 0.8s ease 0.25s backwards; }
@keyframes xl-win-flyin-left {
  from { opacity: 0; transform: perspective(1400px) translateX(-260px) rotateY(70deg) scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: var(--xl-win-rest); }
}
/* Bảng so sánh: tiêu đề + đoạn dẫn fade in, dòng tiêu đề bảng rồi từng dòng hiện lần lượt, ô "Dùng tool" bật theo sau */
.xl-tired__compare.is-pending > *, .xl-tired__compare.is-pending .xl-vs__row { opacity: 0; }
.xl-tired__compare.is-pending .xl-vs { opacity: 1; }
.xl-tired__compare.is-in > :not(.xl-vs) { animation: xl-feat-fade 0.7s ease backwards; }
.xl-tired__compare.is-in .xl-vs__row { animation: xl-feat-fade 0.55s ease backwards; animation-delay: calc(0.25s + var(--i, 0) * 0.12s); }
.xl-tired__compare.is-in .xl-vs__row .xl-vs__tool:not([role="columnheader"]) { animation: xl-pop-chip 0.5s cubic-bezier(0.34, 1.8, 0.5, 1) backwards; animation-delay: calc(0.5s + var(--i, 0) * 0.12s); }
.xl-tired__compare.is-in .xl-tired__closing { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .xl-tired__frozen.is-pending > *, .xl-tired__compare.is-pending > *, .xl-tired__compare.is-pending .xl-vs__row { opacity: 1; }
  .xl-tired__frozen.is-in *, .xl-tired__compare.is-in * { animation: none !important; }
}
.xl-frozen__veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.55); }
.xl-frozen__veil .xl-hang { width: min(340px, 100%); opacity: 1; filter: none; box-shadow: 0 0 0 1px #bdbdbd, 0 18px 40px rgba(0, 0, 0, 0.22); }
.xl-frozen__status { background: #5d6661; color: #eef1ef; }
.xl-frozen__status .xl-window__bar i { width: 37%; background: #c9cfcb; }
.xl-tired__note { margin: 0; text-align: center; line-height: 1.7; color: var(--xl-text); text-wrap: balance; }
/* Đầu section rộng hơn để tiêu đề nằm một dòng, đoạn mở đầu không bị hẹp */
.xl-tired .xl-head { max-width: 1000px; }
.xl-tired .xl-head .xl-sub { max-width: 860px; }
.xl-tired__compare { max-width: 1000px; }
.xl-tired__compare .xl-tired__subtitle { margin-bottom: 0.75rem; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.xl-tired__compare { margin: clamp(3rem, 6vw, 4.5rem) auto 0; }
.xl-tired__lead { max-width: 760px; margin: 0 auto 1.75rem; text-wrap: balance; text-align: center; line-height: 1.7; color: var(--xl-muted); }
.xl-tired__lead strong { color: var(--xl-green); }
.xl-tired__closing { margin: 1.75rem 0 0; text-align: center; font-size: 1.12rem; font-weight: 600; color: var(--xl-ink); }
/* Bảng so sánh Công thức / Tool */
.xl-vs { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 12px 30px -12px rgba(16, 61, 38, 0.18); }
.xl-vs__row { display: grid; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #e8ece9; }
.xl-vs__row:first-child { border-top: 0; }
.xl-vs__row > span { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.9rem 1.15rem; line-height: 1.5; font-size: 1rem; }
.xl-vs__row > span + span { border-left: 1px solid #e8ece9; }
.xl-vs__row .xl-icon { flex: none; width: 16px; height: 16px; margin-top: 0.2rem; }
.xl-vs__label { color: var(--xl-ink); font-weight: 700; }
.xl-vs__formula { color: #a33a2b; background: #fdf3f1; }
.xl-vs__tool { color: var(--xl-green-dark); background: var(--xl-green-soft); font-weight: 600; }
.xl-vs__row--head > span { justify-content: center; padding: 0.9rem 1.15rem; font-size: 1.05rem; background: var(--xl-green); color: #fff; font-weight: 700; }
.xl-vs__row--head > span + span { border-left-color: rgba(255, 255, 255, 0.25); }
.xl-hang { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #c8c8c8, 0 10px 24px rgba(0, 0, 0, 0.12); font-family: 'Segoe UI', var(--xl-font); filter: grayscale(0.2); opacity: 0.92; }
.xl-hang__bar { padding: 0.45rem 0.8rem; background: #e9e9e9; color: #555; font-size: 0.82rem; }
.xl-hang__body { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1rem 0.6rem; font-size: 0.9rem; color: #333; }
.xl-hang__spinner { width: 20px; height: 20px; border: 3px solid #ddd; border-top-color: #888; border-radius: 50%; animation: xl-spin 1s linear infinite; }
@keyframes xl-spin { to { transform: rotate(360deg); } }
.xl-hang__progress { height: 6px; margin: 0 1rem 1rem; border-radius: 3px; background: #eee; overflow: hidden; }
.xl-hang__progress i { display: block; width: 37%; height: 100%; background: #9a9a9a; }

/* ---- 4. Video ---- */
.xl-video__frame { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 24px 50px -20px rgba(16, 61, 38, 0.3); }
.xl-video__frame iframe { width: 100%; height: 100%; border: 0; }
.xl-video__split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.xl-video__half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; text-align: center; }
.xl-video__half--manual { background: repeating-linear-gradient(0deg, #f1f1f1 0 23px, #e4e4e4 23px 24px), #f1f1f1; color: #6b6b6b; }
.xl-video__half--tool { background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), repeating-linear-gradient(0deg, transparent 0 23px, rgba(16, 124, 65, 0.15) 23px 24px), #fff; color: var(--xl-green-dark); }
.xl-video__label { padding: 0.25rem 0.8rem; border-radius: 999px; background: currentColor; font-size: 0.85rem; font-weight: 700; }
.xl-video__half--manual .xl-video__label { background: #6b6b6b; color: #fff; }
.xl-video__half--tool .xl-video__label { background: var(--xl-green); color: #fff; }
.xl-video__clock { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--xl-mono); font-size: clamp(1.3rem, 3.4vw, 2.4rem); font-weight: 600; }
.xl-video__clock i { font-size: 0.6em; opacity: 0.6; }
.xl-video__half--manual .xl-video__clock b { color: #b03a2e; }
.xl-video__note { max-width: 280px; font-size: 0.92rem; line-height: 1.5; }
.xl-video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--xl-green); color: #fff; font-size: 1.9rem; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(16, 124, 65, 0.15), 0 10px 30px rgba(16, 61, 38, 0.35); }
.xl-video__play .xl-icon { margin-left: 4px; }
.xl-video__soon { position: absolute; left: 50%; bottom: 1rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(15, 61, 38, 0.85); color: #fff; font-size: 0.8rem; transform: translateX(-50%); white-space: nowrap; }
.xl-video__caption { margin: 1.75rem 0 0; text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--xl-ink); }
/* Section dạng popup phủ toàn màn hình (vd. "Xem thử" mở từ nút Tìm hiểu thêm ở hero) */
.xl-popup { display: none; }
.xl-popup.is-open, .xl-popup:target { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4vw, 3rem); background: rgba(12, 32, 22, 0.62); backdrop-filter: blur(3px); animation: xl-popup-fade 0.3s ease both; }
.xl-popup.is-closing { animation: xl-popup-fade-out 0.25s ease both; }
/* Khung hộp thoại: chỉ chiếm một phần màn hình, nền trắng giấy, bo góc */
.xl-popup > .container { position: relative; width: 100%; max-width: 900px; margin: auto; padding: clamp(2.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 3vw, 2.5rem); border-radius: 16px; background: var(--xl-paper); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45); animation: xl-popup-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.xl-popup.is-closing > .container { animation: xl-popup-out 0.25s ease both; }
.xl-popup .xl-head { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.xl-popup__close { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--xl-ink); font-size: 1.2rem; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 6px 18px rgba(16, 61, 38, 0.15); transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.xl-popup__close:hover { background: var(--xl-green); color: #fff; text-decoration: none; transform: rotate(90deg); }
.xl-popup__close:focus-visible { outline: 2px solid var(--xl-green); outline-offset: 3px; }
html.xl-popup-lock { overflow: hidden; }
@keyframes xl-popup-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes xl-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xl-popup-fade-out { to { opacity: 0; } }
@keyframes xl-popup-out { to { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  .xl-popup.is-open, .xl-popup:target, .xl-popup.is-closing, .xl-popup > .container, .xl-popup.is-closing > .container { animation: none; }
}

/* ---- 5. Tool ---- */
.xl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.xl-chip {
  padding: 0.45rem 1rem;
  border: 1px solid var(--xl-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--xl-text);
  font-family: var(--xl-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.xl-chip:hover { border-color: var(--xl-green); background: #fff; color: var(--xl-green); }
.xl-chip.is-active { border-color: var(--xl-green); background: var(--xl-green); color: #fff; }
.xl-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
/* Khối demo trên điện thoại: ẩn câu dẫn, thẻ tool, hướng dẫn macro; hiện thông báo mời dùng máy tính (mobile_note) */
.xl-tools__mobile-note { display: none; }
@media (max-width: 720px) {
  .xl-tools--desktop-only .xl-head .xl-sub, .xl-tools--desktop-only .xl-tool-grid, .xl-tools--desktop-only .xl-macro, .xl-tools--desktop-only .xl-tools__more-prefix { display: none; }
  .xl-tools__mobile-note { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 520px; margin: 0 auto 1.75rem; padding: 1.1rem 1.2rem; border-radius: 12px; background: var(--xl-green-soft); box-shadow: inset 0 0 0 1px #cfe5d7; font-size: 1rem; line-height: 1.6; font-weight: 600; color: var(--xl-green-dark); }
  .xl-tools__mobile-note .xl-icon { flex: none; margin-top: 0.15rem; font-size: 1.5rem; }
}
/* Hướng dẫn bật macro dưới lưới demo: khung giấy, 3 bước ngang (điện thoại: dọc), thanh vàng Enable Content mô phỏng Excel */
.xl-macro { max-width: 1040px; margin: 2.25rem auto 0; padding: 1.4rem clamp(1.1rem, 3vw, 1.75rem) 1.5rem; border-radius: 12px; background: var(--xl-paper); box-shadow: 0 0 0 1px var(--xl-line); }
.xl-macro__title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 1.25rem; font-family: var(--xl-font); font-size: 1.1rem; font-weight: 800; color: var(--xl-ink); text-align: center; }
.xl-macro__title .xl-icon { color: var(--xl-green); }
.xl-macro__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.xl-macro__step { display: flex; gap: 0.75rem; align-items: flex-start; }
.xl-macro__step > div { flex: 1; min-width: 0; }
.xl-macro__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--xl-green); color: #fff; font-family: var(--xl-mono); font-weight: 700; font-size: 0.9rem; }
.xl-macro__step h4 { margin: 0.2rem 0 0.3rem; font-family: var(--xl-font); font-size: 1rem; font-weight: 800; color: var(--xl-ink); }
.xl-macro__step p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--xl-text); }
.xl-macro__step strong { color: var(--xl-ink); }
.xl-macro__bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding: 0.4rem 0.45rem; border: 1px solid #e3c96b; background: #fff4ce; font-family: 'Segoe UI', var(--xl-font); font-size: 0.68rem; color: #3b3b3b; white-space: nowrap; }
.xl-macro__bar-icon { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #b8860b; color: #fff; font-weight: 700; font-size: 0.65rem; }
.xl-macro__bar-text { flex: none; letter-spacing: -0.01em; }
.xl-macro__bar-text b { font-weight: 700; }
.xl-macro__bar-btn { flex: none; margin-left: auto; white-space: nowrap; padding: 0.15rem 0.4rem; border: 1px solid #8a8a8a; background: #fff; box-shadow: 0 0 0 2px var(--xl-green); animation: xl-macro-blink 1.6s ease-in-out infinite; }
@keyframes xl-macro-blink { 50% { box-shadow: 0 0 0 2px rgba(16, 124, 65, 0.15); } }
@media (prefers-reduced-motion: reduce) { .xl-macro__bar-btn { animation: none; } }
@media (max-width: 400px) { .xl-macro__bar-icon { display: none; } }
@media (max-width: 1080px) { .xl-macro__steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .xl-macro__bar { width: max-content; max-width: 100%; } }
.xl-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.35rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-line), 0 1px 3px rgba(16, 40, 28, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.xl-tool-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--xl-green), 0 14px 30px rgba(16, 124, 65, 0.12); }
.xl-tool-card[hidden] { display: none; }
.xl-tool-card.is-soon { background: #fbfcfb; }
.xl-tool-card.is-soon:hover { transform: none; box-shadow: 0 0 0 1px var(--xl-line-strong); }
.xl-tool-card__top { display: flex; align-items: center; gap: 0.6rem; }
.xl-tool-card__top .xl-badge { margin-left: auto; }
.xl-tool-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--xl-green-soft); color: var(--xl-green); font-size: 1.3rem; }
.xl-tool-card.is-soon .xl-tool-card__icon { background: #f0f2f0; color: var(--xl-muted); }
.xl-tool-card__title { margin: 0; font-family: var(--xl-font); font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.xl-tool-card__title a { color: var(--xl-ink); text-decoration: none; }
.xl-tool-card__title a:hover { color: var(--xl-green); text-decoration: none; }
.xl-tool-card__desc { flex: 1; margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--xl-muted); }
.xl-tool-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px dashed var(--xl-line-strong); }
.xl-price { font-family: var(--xl-mono); font-size: 0.88rem; font-weight: 600; color: var(--xl-ink); }
.xl-tool-card__guide { font-family: inherit; font-size: 0.9rem; color: var(--xl-green); text-decoration: underline; text-underline-offset: 3px; }
.xl-tool-card__guide:hover { color: var(--xl-green-dark); }
.xl-tool-card__top .xl-tool-card__detail { margin-left: auto; }
.xl-tool-card__video { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Nút tải demo khi chưa có file: vẫn giữ nền xanh chính, chỉ mờ đi (thay vì xám như disabled mặc định) */
.xl-btn--primary.xl-btn--pending:disabled { background: var(--xl-green); color: #fff; opacity: 0.6; }

.xl-time { display: flex; align-items: stretch; gap: 0.4rem; font-family: var(--xl-mono); font-size: 0.86rem; }
.xl-time__cell { flex: 1; display: flex; flex-direction: column; padding: 0.4rem 0.6rem; border-radius: 4px; font-weight: 600; }
.xl-time__cell small { font-family: var(--xl-font); font-size: 0.7rem; font-weight: 500; opacity: 0.8; }
.xl-time__cell--before { background: #fdf3f1; color: #a33a2b; }
.xl-time__cell--before s { text-decoration-thickness: 1px; }
.xl-time__cell--after { background: var(--xl-green-soft); color: var(--xl-green-dark); }
.xl-time__arrow { display: grid; place-items: center; color: var(--xl-muted); }

/* ---- 6. Theo cách bạn nghĩ ---- */
.xl-fit__contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 1000px; margin: 0 auto 2.5rem; }
.xl-fit__other, .xl-fit__ours { padding: 1.4rem 1.5rem; border-radius: 10px; }
.xl-fit__other h3, .xl-fit__ours h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-size: 1.1rem; font-weight: 800; }
.xl-fit__other { background: #f1f2f1; color: #5f6762; box-shadow: inset 0 0 0 1px var(--xl-line); }
.xl-fit__other h3 { color: #4a524d; }
.xl-fit__other .xl-list { margin: 0; gap: 0.55rem; }
.xl-fit__ours { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--xl-green); color: #fff; box-shadow: 0 14px 30px -12px rgba(16, 124, 65, 0.5); }
.xl-fit__ours h3 { color: #fff; }
.xl-fit__ours p { margin: 0; font-size: 1.12rem; line-height: 1.65; }
.xl-fit__ours strong { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.xl-fit__contrast { position: relative; z-index: 3; }
/* Mũi tên vẽ tay (cùng kiểu mũi tên "Click!" ở hero) từ đáy khung xanh xuống bảng note */
.xl-fit__arrow { position: absolute; top: calc(100% - 6px); right: 24%; width: 62px; height: 110px; overflow: visible; fill: none; stroke: #e8590c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff); pointer-events: none; }
/* Bảng tính Excel làm nền + 4 giấy note dán rải rác phía trên */
.xl-board { --xl-cell-w: 104px; --xl-cell-h: 30px; --xl-gutter: 40px; position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 24px 50px -24px rgba(16, 61, 38, 0.3); font-family: 'Segoe UI', var(--xl-font); }
.xl-board__cols { display: flex; height: 26px; border-bottom: 1px solid #d4d4d4; background: #f3f3f3; }
.xl-board__cols span { flex: none; display: grid; place-items: center; width: var(--xl-cell-w); border-right: 1px solid #dcdcdc; color: #7a857e; font-size: 0.72rem; }
.xl-board__cols span:first-child { width: var(--xl-gutter); }
.xl-board__body { position: relative; display: flex; }
.xl-board__rows { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--xl-gutter); overflow: hidden; border-right: 1px solid #d4d4d4; background: #f3f3f3; }
.xl-board__rows span { flex: none; display: grid; place-items: center; height: var(--xl-cell-h); border-bottom: 1px solid #dcdcdc; color: #7a857e; font-size: 0.72rem; }
.xl-board__sheet {
  position: relative; flex: 1; margin-left: var(--xl-gutter);
  background:
    linear-gradient(#e6eae7 1px, transparent 1px) 0 calc(var(--xl-cell-h) - 1px) / 100% var(--xl-cell-h),
    linear-gradient(90deg, #e6eae7 1px, transparent 1px) calc(var(--xl-cell-w) - 1px) 0 / var(--xl-cell-w) 100%,
    #fff;
}
/* Ô đang chọn kiểu Excel: viền xanh + chấm kéo góc */
.xl-board__cell { position: absolute; left: calc(var(--xl-cell-w) * 5); top: calc(var(--xl-cell-h) * 1); width: var(--xl-cell-w); height: var(--xl-cell-h); box-shadow: inset 0 0 0 2px var(--xl-green); }
.xl-board__cell::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; border: 1px solid #fff; background: var(--xl-green); }
.xl-board__notes { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 1.5rem; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 3.75rem); }
/* Giấy note: màu pastel, nghiêng nhẹ, băng dính trên đầu */
.xl-sticky { position: relative; padding: 1.5rem 1.4rem 1.35rem; background: var(--xl-sticky-bg, #fff4b0); color: #3d3a2a; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 12px 22px -10px rgba(40, 40, 20, 0.35); transform: rotate(var(--xl-sticky-tilt, 0deg)); }
.xl-sticky::before { content: ''; position: absolute; top: -11px; left: 50%; width: 84px; height: 22px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); transform: translateX(-50%) rotate(-3deg); }
.xl-sticky__num { display: block; margin-bottom: 0.35rem; font-family: var(--xl-mono); font-size: 0.8rem; font-weight: 600; color: var(--xl-sticky-ink, #8a6d00); }
.xl-sticky__title { margin: 0 0 0.45rem; font-family: var(--xl-font); font-size: 1.1rem; font-weight: 800; color: #24221a; text-wrap: balance; }
.xl-sticky p { margin: 0; font-family: var(--xl-font); font-size: 0.94rem; line-height: 1.6; }
.xl-sticky--1 { grid-column: 1 / span 5; --xl-sticky-bg: #fff4b0; --xl-sticky-tilt: -2deg; }
.xl-sticky--2 { grid-column: 7 / span 5; margin-top: 2.75rem; --xl-sticky-bg: #dcf3df; --xl-sticky-ink: #1d6b3c; --xl-sticky-tilt: 1.8deg; }
.xl-sticky--3 { grid-column: 2 / span 5; margin-top: -0.5rem; --xl-sticky-bg: #ffe0e4; --xl-sticky-ink: #a33a4d; --xl-sticky-tilt: 1.2deg; }
.xl-sticky--4 { grid-column: 8 / span 5; margin-top: 1.75rem; --xl-sticky-bg: #dfeeff; --xl-sticky-ink: #2b5d9c; --xl-sticky-tilt: -1.5deg; }
.xl-fit__questions { margin-top: 2.75rem; text-align: center; }
.xl-fit__qtitle { margin: 0 0 1.25rem; font-weight: 700; color: var(--xl-ink); }
.xl-fit__notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; text-align: left; }
/* Số liệu của bạn: hàng nhãn dữ liệu nhạy cảm + thẻ đối đầu AI / TĐH Excel */
.xl-privacy__top { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 1100px; margin: 0 auto clamp(2rem, 4vw, 2.75rem); }
.xl-privacy__intro { margin: 0 0 1rem; font-size: 1.04rem; line-height: 1.7; }
.xl-privacy__warn { margin: 0; padding: 0.9rem 1.1rem; border-left: 4px solid #d68a1a; border-radius: 0 6px 6px 0; background: #fff6e8; font-size: 0.95rem; line-height: 1.65; color: #6b4a12; }
.xl-privacy__data { padding: 1.2rem 1.3rem; border-radius: 10px; background: #fbfbfa; box-shadow: 0 0 0 1px var(--xl-line); }
.xl-privacy__data-label { display: block; margin-bottom: 0.8rem; font-weight: 700; color: var(--xl-ink); }
.xl-privacy__data ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.xl-privacy__data li { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.55rem 0.8rem; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line); font-size: 0.95rem; }
.xl-privacy__data .xl-icon { flex: none; font-size: 1.2rem; color: #d63c2f; }
/* ---- Băn khoăn (xl-worries): câu than dạng bong bóng thoại, xếp so le, kèm giờ ---- */
.xl-worry__list { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.5rem; }
.xl-worry__item { display: flex; flex-direction: column; align-items: flex-start; }
/* so le: cột giữa lệch xuống, cột phải lệch ít hơn — trông như tin nhắn rải rác */
.xl-worry__item--2 { margin-top: 2.25rem; }
.xl-worry__item--3 { margin-top: 0.9rem; }
.xl-worry__bubble { position: relative; margin: 0; padding: 1rem 1.15rem; border-radius: 18px 18px 18px 4px; background: var(--xl-paper); font-size: 1.04rem; line-height: 1.55; color: var(--xl-ink); box-shadow: 0 0 0 1px var(--xl-line), 0 8px 20px -14px rgba(16, 61, 38, 0.35); }
.xl-worry__item--2 .xl-worry__bubble { background: var(--xl-green-soft); box-shadow: 0 0 0 1px #cfe5d7, 0 8px 20px -14px rgba(16, 61, 38, 0.35); }
.xl-worry__item--3 .xl-worry__bubble { background: #fff7e3; box-shadow: 0 0 0 1px #f1e2bd, 0 8px 20px -14px rgba(16, 61, 38, 0.35); }
.xl-worry__bubble:has(.xl-worry__emoji) { padding-right: 2.4rem; }
/* Emoji cảm xúc gắn ở góc phải trên bong bóng, như một "reaction" */
.xl-worry__emoji { position: absolute; top: -0.85rem; right: -0.6rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; font-size: 1.35rem; line-height: 1; box-shadow: 0 0 0 1px var(--xl-line), 0 4px 10px rgba(16, 61, 38, 0.15); transform: rotate(8deg); }
.xl-worry__item:nth-child(even) .xl-worry__emoji { --xl-emo-rot: -8deg; transform: rotate(-8deg); }
.xl-worry__time { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.45rem 0 0 0.6rem; font-family: var(--xl-mono); font-size: 0.78rem; color: var(--xl-muted); }
.xl-worry__outro { margin: clamp(2rem, 4vw, 2.75rem) auto 0; text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--xl-green-dark); }
/* Rê chuột: bong bóng phóng to nhẹ và nghiêng — cột trái nghiêng sang trái, cột giữa/phải nghiêng sang phải;
   gốc xoay ở góc có "đuôi" bong bóng (dưới trái) để trông như bong bóng bật lên từ đuôi */
.xl-worry__bubble { --xl-worry-tilt: -2deg; transform-origin: 0 100%; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; }
.xl-worry__item--2 .xl-worry__bubble { --xl-worry-tilt: 1.5deg; }
.xl-worry__item--3 .xl-worry__bubble { --xl-worry-tilt: 2.5deg; }
.xl-worry__emoji { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (hover: hover) {
  .xl-worry__bubble:hover { z-index: 2; transform: scale(1.05) rotate(var(--xl-worry-tilt)); box-shadow: 0 0 0 1px var(--xl-line-strong), 0 16px 30px -16px rgba(16, 61, 38, 0.45); }
  .xl-worry__bubble:hover .xl-worry__emoji { transform: scale(1.15) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) { .xl-worry__bubble, .xl-worry__emoji { transition: none; } }
/* Cuộn tới: từng bong bóng lần lượt pop ra (fade + zoom nảy), emoji bật theo ngay sau. JS initXlPop thêm
   is-pending khi tải trang (chưa thấy) rồi is-in khi list vào màn hình; fill backwards để hover vẫn dùng transform riêng. */
.xl-worry__pages.is-pending .xl-worry__item, .xl-worry__pages.is-pending .xl-worry__emoji { opacity: 0; }
.xl-worry__pages.is-in .is-active .xl-worry__item { animation: xl-pop 0.7s cubic-bezier(0.34, 1.7, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.16s); transform-origin: 0 100%; }
.xl-worry__pages.is-in .is-active .xl-worry__emoji { animation: xl-pop-emoji 0.55s cubic-bezier(0.34, 2, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.16s + 0.3s); }
/* Thấu hiểu vấn đề: cuộn tới thì từng dòng checklist pop ra (cùng initXlPop), ô "Có tool" bật theo sau dòng một nhịp.
   Dòng "Xem thêm" (--more) giữ hiệu ứng mở riêng. */
.xl-pain .xl-check__pages.is-pending .xl-check__item { opacity: 0; }
.xl-pain .xl-check__pages.is-in .is-active .xl-check__item { animation: xl-pop 0.65s cubic-bezier(0.34, 1.6, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.12s); transform-origin: 0 50%; }
.xl-pain .xl-check__pages.is-in .is-active .xl-check__time--tool { animation: xl-pop-chip 0.5s cubic-bezier(0.34, 2, 0.5, 1) backwards; animation-delay: calc(var(--i, 0) * 0.12s + 0.3s); }
@media (prefers-reduced-motion: reduce) { .xl-pain .xl-check__pages.is-pending .xl-check__item { opacity: 1; } .xl-pain .xl-check__pages.is-in .xl-check__item, .xl-pain .xl-check__pages.is-in .xl-check__time--tool { animation: none; } }
@keyframes xl-pop { from { opacity: 0; transform: scale(0.82) translateY(14px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes xl-pop-emoji { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(var(--xl-emo-rot, 8deg)); } }
@media (prefers-reduced-motion: reduce) { .xl-worry__pages.is-pending .xl-worry__item, .xl-worry__pages.is-pending .xl-worry__emoji { opacity: 1; } .xl-worry__pages.is-in .is-active .xl-worry__item, .xl-worry__pages.is-in .is-active .xl-worry__emoji { animation: none; } }

/* Chia trang: mũi tên hai bên, chấm tròn bên dưới; các trang xếp chồng cùng ô lưới, chỉ trang is-active hiện */
.xl-worry__slider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev pages next" ". dots ."; align-items: center; gap: 1.6rem 1.5rem; max-width: 1180px; margin: 0 auto; }
.xl-worry__slider:not(.has-pages) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pages"; }
.xl-worry__arrow--prev { grid-area: prev; }
.xl-worry__arrow--next { grid-area: next; }
.xl-worry__pages { grid-area: pages; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0.9rem; }
.xl-worry__pages > .xl-worry__list { grid-area: 1 / 1; }
.xl-worry__slider.has-pages .xl-worry__list:not(.is-active) { visibility: hidden; opacity: 0; pointer-events: none; }
.xl-worry__dots { grid-area: dots; display: flex; justify-content: center; gap: 0.6rem; }
.xl-worry__dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: var(--xl-line-strong); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.xl-worry__dot:hover { background: var(--xl-muted); }
.xl-worry__dot.is-active { background: var(--xl-green); transform: scale(1.25); }
/* Mỗi trang so le một kiểu (chỉ trên màn rộng 3 cột) */
@media (min-width: 901px) {
  .xl-worry__list--2 .xl-worry__item--1 { margin-top: 2rem; padding-left: 1.5rem; }
  .xl-worry__list--2 .xl-worry__item--2 { margin-top: 0; }
  .xl-worry__list--2 .xl-worry__item--3 { margin-top: 1.2rem; padding-left: 0.5rem; }
  .xl-worry__list--3 .xl-worry__item--1 { margin-top: 0.8rem; }
  .xl-worry__list--3 .xl-worry__item--2 { margin-top: 0; padding-left: 2rem; }
  .xl-worry__list--3 .xl-worry__item--3 { margin-top: 2.6rem; }
}

@media (max-width: 900px) { .xl-worry__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl-worry__item--2, .xl-worry__item--3 { margin-top: 0; } .xl-worry__item:nth-child(even) { margin-top: 1.5rem; } }
@media (max-width: 560px) {
  .xl-worry__list { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .xl-worry__slider { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pages pages pages" "prev dots next"; gap: 1.4rem 0.5rem; }
  .xl-worry__bubble { max-width: 88%; }
  .xl-worry__item:nth-child(even) { margin-top: 0; align-items: flex-end; }
  .xl-worry__item:nth-child(even) .xl-worry__bubble { border-radius: 18px 18px 4px 18px; }
  .xl-worry__item:nth-child(even) .xl-worry__time { margin: 0.45rem 0.6rem 0 0; }
}

/* ---- Người sáng lập (xl-founder): bố cục ngang không khung, trái ảnh + tên, phải lời chia sẻ có dấu ngoặc kép lớn mờ ---- */
.xl-founder__card { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1040px; margin: 0 auto; }
.xl-founder__who { text-align: center; }
.xl-founder__avatar { display: grid; place-items: center; width: 200px; height: 200px; margin: 0 auto 1.25rem; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, var(--xl-green) 0%, var(--xl-green-dark) 100%); box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--xl-green-soft), 0 18px 36px -16px rgba(16, 61, 38, 0.5); }
.xl-founder__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xl-founder__avatar b { font-family: var(--xl-font); font-size: 4rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; }
.xl-founder__name { margin: 0; font-family: var(--xl-font); font-size: 1.6rem; font-weight: 800; color: var(--xl-ink); }
.xl-founder__role { display: inline-block; margin: 0.5rem 0 0; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--xl-green-soft); color: var(--xl-green-dark); font-size: 0.9rem; font-weight: 600; }
.xl-founder__body { position: relative; }
.xl-founder__body::before { content: '\201C'; position: absolute; top: -4.2rem; left: -1.2rem; font-family: Georgia, serif; font-size: 8rem; line-height: 1; color: var(--xl-green); opacity: 0.12; pointer-events: none; }
.xl-founder__eyebrow { margin: 0 0 1rem; font-family: var(--xl-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xl-green); }
.xl-founder__body p:not(.xl-founder__eyebrow):not(.xl-founder__sign) { margin: 0 0 1rem; font-size: 1.06rem; line-height: 1.8; color: var(--xl-text); }
.xl-founder__actions { margin-top: 1.75rem; }
.xl-founder__sign { margin: 1.4rem 0 0; font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 1.5rem; color: var(--xl-green-dark); }
.xl-founder__sign::before { content: ''; display: block; width: 48px; height: 2px; margin-bottom: 0.9rem; background: var(--xl-green); }
/* Nền màu chủ đạo (bg: green): chữ chuyển sáng, nhãn vai trò dạng kính mờ, viền ảnh trắng */
.xl-founder--green { background: var(--xl-green); color: #e6f4ec; }
.xl-founder__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.xl-founder__social { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--xl-green-soft); color: var(--xl-green); text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.xl-founder__social svg { width: 20px; height: 20px; }
.xl-founder__social b { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em; }
.xl-founder__social:hover { background: var(--xl-green); color: #fff; transform: translateY(-2px); }
.xl-founder--green .xl-founder__social { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.xl-founder--green .xl-founder__social:hover { background: #fff; color: var(--xl-green); }
.xl-founder--green .xl-founder__name { color: #fff; }
.xl-founder--green .xl-founder__role { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.xl-founder--green .xl-founder__eyebrow { color: #b9ecc9; }
.xl-founder--green .xl-founder__body p:not(.xl-founder__eyebrow):not(.xl-founder__sign) { color: #e6f4ec; }
.xl-founder--green .xl-founder__body::before { color: #fff; opacity: 0.14; }
.xl-founder--green .xl-founder__avatar { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95), 0 0 0 12px rgba(255, 255, 255, 0.18), 0 22px 40px -16px rgba(0, 0, 0, 0.45); }
@media (max-width: 820px) {
  .xl-founder__card { grid-template-columns: minmax(0, 1fr); }
  .xl-founder__avatar { width: 150px; height: 150px; }
  .xl-founder__avatar b { font-size: 3rem; }
  .xl-founder__body::before { top: -2rem; left: -0.4rem; font-size: 6rem; }
}

/* ---- Hiệu ứng khi cuộn tới (data-xl-reveal, JS initXlPop): nhẹ, mỗi khối chạy một lần ----
   (trống) = cả khối fade + trượt lên; stagger = các con lần lượt (JS gán --ri); notes = giấy note dán lên,
   giữ độ nghiêng riêng; lanes = số bước bật ra rồi thẻ hiện theo thứ tự bước (--i có sẵn). */
[data-xl-reveal=""].is-pending, [data-xl-reveal="stagger"].is-pending > *, [data-xl-reveal="notes"].is-pending > * { opacity: 0; }
[data-xl-reveal=""].is-in { animation: xl-feat-fade 0.7s ease backwards; }
[data-xl-reveal="stagger"].is-in > * { animation: xl-feat-fade 0.6s ease backwards; animation-delay: calc(min(var(--ri, 0), 8) * 0.09s); }
[data-xl-reveal="notes"].is-in > * { animation: xl-note-in 0.7s cubic-bezier(0.34, 1.45, 0.5, 1) backwards; animation-delay: calc(0.1s + var(--ri, 0) * 0.15s); }
/* lanes (Quy trình): tiêu đề cột và nút số từng bước được theo dõi riêng (JS xlPopTargets). Bước nào cuộn tới thì số
   bật ra trước, sau đó thẻ trượt từ phía làn của mình cắm vào đúng chỗ (hơi vượt rồi nảy về). Các bước chạy
   lần lượt cách nhau ít nhất 0,3s (--sd do JS tính). Màn hẹp (thẻ cùng một cột bên phải) trượt từ phải. */
.xl-lanes__head.is-pending, .xl-lanes__node.is-pending b, .xl-lanes__node.is-pending + .xl-lanes__card { opacity: 0; }
.xl-lanes__head.is-in { animation: xl-feat-fade 0.6s ease backwards; }
.xl-lanes__node.is-in b { animation: xl-node-pop 0.5s cubic-bezier(0.34, 1.9, 0.5, 1) backwards; animation-delay: var(--sd, 0s); }
.xl-lanes__node.is-in + .xl-lanes__card { animation: xl-lane-plug 0.75s cubic-bezier(0.3, 1.35, 0.5, 1) backwards; animation-delay: calc(var(--sd, 0s) + 0.45s); }
@keyframes xl-node-pop { from { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.25); } to { opacity: 1; transform: none; } }
[data-xl-reveal="lanes"] .xl-lanes__step--b .xl-lanes__card { --xl-plug-from: -90px; }
[data-xl-reveal="lanes"] .xl-lanes__step--t .xl-lanes__card { --xl-plug-from: 90px; }
@keyframes xl-lane-plug { from { opacity: 0; transform: translateX(var(--xl-plug-from, 90px)); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes xl-note-in { from { opacity: 0; transform: rotate(var(--xl-sticky-tilt, 0deg)) translateY(12px) scale(0.9); } to { opacity: 1; transform: rotate(var(--xl-sticky-tilt, 0deg)); } }
@media (prefers-reduced-motion: reduce) {
  [data-xl-reveal].is-pending, [data-xl-reveal].is-pending > *, .xl-lanes__node.is-pending + .xl-lanes__card, .xl-lanes__node.is-pending b, .xl-lanes__head.is-pending { opacity: 1; }
  [data-xl-reveal].is-in, [data-xl-reveal].is-in > *, .xl-lanes__node.is-in + .xl-lanes__card, .xl-lanes__node.is-in b, .xl-lanes__head.is-in { animation: none; }
}

/* ---- Lý do công thức chậm (xl-tired, slide reasons): khung cửa sổ Excel minh họa ---- */
.xl-tired__slides { margin-top: clamp(1rem, 3vw, 2rem); }
.xl-xw { --xw-line: #d4d4d4; --xw-head: #f3f3f3; position: relative; width: 100%; max-width: 560px; overflow: visible; background: #fff; font-family: 'Segoe UI', var(--xl-font); font-size: 12px; line-height: 1.4; color: #222;
  border: 1px solid #c6c6c6; transform: perspective(1400px) rotateY(-10deg); transform-origin: right center; box-shadow: 0 30px 60px -24px rgba(16, 61, 38, 0.4); }
.xl-xw__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 0 0 8px; background: var(--xl-green); color: #fff; }
.xl-xw__logo { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 2px; background: #fff; color: var(--xl-green); font-size: 10px; font-weight: 800; }
.xl-xw__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.xl-xw__ctrl i { display: inline-block; width: 34px; text-align: center; font-style: normal; }
.xl-xw__fx { display: flex; align-items: stretch; border-bottom: 1px solid var(--xw-line); background: #fff; }
.xl-xw__box { flex: none; width: 64px; padding: 4px 6px; border-right: 1px solid var(--xw-line); }
.xl-xw__fxi { flex: none; padding: 4px 8px; border-right: 1px solid var(--xw-line); font-style: italic; color: #777; font-family: Georgia, serif; }
.xl-xw__formula { flex: 1; min-width: 0; padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: Consolas, 'IBM Plex Mono', monospace; font-size: 11.5px; }
.xl-xw__formula b { font-weight: 400; }
.xl-xw__ref1 { color: #1a5fc8; } .xl-xw__ref2 { color: #c43b8b; } .xl-xw__ref3 { color: #7a4fc2; } .xl-xw__ref4 { color: #2c8a3c; } .xl-xw__ref5 { color: #c46a12; }
.xl-xw__err { color: #c0392b; font-weight: 600; }
.xl-xw__caret { display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: #000; }
/* Thanh công thức mở rộng nhiều dòng (công thức dài) */
.xl-xw--edit .xl-xw__formula { white-space: normal; line-height: 1.6; min-height: 92px; box-shadow: inset 0 -2px 0 #e6e6e6; }
.xl-xw__grid { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.xl-xw__grid th, .xl-xw__grid td { height: 22px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #e3e3e3; font-weight: 400; }
.xl-xw__grid th { width: 62px; background: var(--xw-head); color: #666; text-align: center; font-size: 11px; }
.xl-xw__grid .is-head td { background: var(--xw-head); color: #666; text-align: center; font-size: 11px; }
.xl-xw__grid tr:nth-child(2) td { font-weight: 600; }
.xl-xw__grid .r { text-align: right; font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 11px; }
.xl-xw__grid .is-sel { outline: 2px solid var(--xl-green); outline-offset: -2px; }
.xl-xw__grid .is-calc { background: #fff6e5; text-align: center; }
.xl-xw__spin { display: inline-block; width: 10px; height: 10px; border: 2px solid #f0b75a; border-top-color: transparent; border-radius: 50%; }
.xl-xw__grid .is-ref { background: rgba(26, 95, 200, 0.06); border-color: rgba(26, 95, 200, 0.25); }
.xl-xw__grid tr:nth-child(2) .is-ref { box-shadow: inset 0 2px 0 #1a5fc8; }
.xl-xw__grid .is-ref:first-of-type { box-shadow: inset 2px 0 0 #1a5fc8; }
.xl-xw__grid tr:nth-child(2) .is-ref:first-of-type { box-shadow: inset 2px 2px 0 #1a5fc8; }
.xl-xw__grid .is-ref.is-last { box-shadow: inset 0 -2px 0 #1a5fc8; }
.xl-xw__grid tr .is-ref:last-child { box-shadow: inset -2px 0 0 #1a5fc8; }
.xl-xw__grid .is-gap td, .xl-xw__grid .is-gap th { height: 16px; text-align: center; color: #1a5fc8; }
.xl-xw__grid .is-err { background: #fdecea; color: #c0392b; font-weight: 600; text-align: center; }
.xl-xw__tabs { display: flex; align-items: center; gap: 2px; padding: 3px 6px; border-top: 1px solid var(--xw-line); background: var(--xw-head); font-size: 11px; color: #666; }
.xl-xw__tabs b { padding: 2px 12px; font-weight: 400; }
.xl-xw__tabs b.is-on { background: #fff; color: var(--xl-green); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-green); }
.xl-xw__status { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 8px; background: var(--xl-green-deep, #0f3d26); color: #dfeee5; font-size: 11px; }
.xl-xw__status .xl-xw__err { color: #ffb4a8; }
.xl-xw__pbar { flex: 0 0 120px; height: 6px; background: rgba(255, 255, 255, 0.2); }
.xl-xw__pbar i { display: block; height: 100%; background: #fff; }
/* Nhãn chú thích màu cam, dán chéo góc dưới phải */
.xl-xw__note { position: absolute; right: -10px; bottom: -16px; max-width: 250px; padding: 0.45rem 0.75rem; border-radius: 6px; background: #e8590c; color: #fff; font-family: var(--xl-font); font-size: 0.82rem; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 18px -8px rgba(232, 89, 12, 0.6); transform: rotate(-2deg); }
@media (max-width: 900px) { .xl-xw { transform: perspective(1400px) rotateY(-6deg); } }
@media (max-width: 560px) {
  .xl-xw { transform: none; font-size: 11px; }
  .xl-xw__grid th { width: 40px; }
  .xl-xw__grid td:nth-child(6), .xl-xw__grid .is-head td:nth-child(6) { display: none; }
  .xl-xw__note { right: 6px; max-width: 70%; }
}

/* ---- Đặc điểm tool (xl-features): slide chữ trái + hình minh họa cửa sổ tool nghiêng bên phải ---- */
.xl-feat .xl-head { max-width: 960px; }
.xl-title__accent { color: var(--xl-green); }
.xl-feat .xl-sub strong { color: var(--xl-green); }
.xl-feat__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 1160px; margin: 0 auto; }
.xl-feat__count { margin: 0 0 1rem; font-family: var(--xl-mono); font-size: 0.9rem; color: var(--xl-muted); }
.xl-feat__count b { color: var(--xl-green); font-weight: 600; }
/* Các cụm chữ chồng cùng một ô lưới: chiều cao = cụm dài nhất, không nhảy layout khi đổi slide */
.xl-feat__texts { display: grid; }
.xl-feat__text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(22px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.xl-feat__text.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, visibility 0s; }
.xl-feat__text.is-leaving { opacity: 0; visibility: visible; transform: translateY(-22px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }
.xl-feat__text h3 { margin: 0 0 0.85rem; font-family: var(--xl-font); font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.3; color: var(--xl-ink); text-wrap: balance; }
.xl-feat__text p { margin: 0; font-size: 1.06rem; line-height: 1.75; color: var(--xl-muted); }
.xl-feat__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.xl-feat__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--xl-green); font-size: 1.15rem; cursor: pointer; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 6px 16px rgba(16, 61, 38, 0.12); transition: background-color 0.15s ease, color 0.15s ease; }
.xl-feat__arrow:hover { background: var(--xl-green); color: #fff; }
.xl-feat__arrow--prev .xl-icon { transform: rotate(180deg); }
.xl-feat__dots { display: flex; align-items: center; gap: 0.45rem; }
.xl-feat__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--xl-line-strong); cursor: pointer; transition: width 0.25s ease, background-color 0.25s ease; }
.xl-feat__dot:hover { background: var(--xl-muted); }
.xl-feat__dot.is-active { width: 28px; background: var(--xl-green); }
/* Hình minh họa: chồng cùng một ô lưới (chiều cao = hình cao nhất), chỉ fade tại chỗ */
.xl-feat__stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.xl-feat__visual { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.xl-feat__visual.is-active { opacity: 1; visibility: visible; transition: opacity 0.55s ease 0.15s, visibility 0s; }
.xl-feat__note { max-width: 470px; margin: 1.5rem auto 0; text-align: center; font-size: 0.82rem; font-style: italic; line-height: 1.55; color: var(--xl-muted); }
/* Cửa sổ minh họa: mô phỏng sát UserForm VBA thật (MSForms trên Windows) — nền xám hệ thống,
   thanh tiêu đề trắng chỉ có nút đóng, ô/nút vuông, MultiPage, Frame, MsgBox, tooltip vàng.
   Nghiêng như khung Excel ở hero. */
.xl-uf { --uf-bg: #f0f0f0; --uf-line: #7a7a7a; --uf-btn: #e1e1e1; --uf-btn-line: #adadad; --uf-blue: #0078d7;
  position: relative; width: 100%; max-width: 540px; background: var(--uf-bg); color: #000; font-family: Tahoma, 'Segoe UI', Verdana, sans-serif; font-size: 12px; line-height: 1.35;
  border: 1px solid #5a6b7d; transform: perspective(1400px) rotateY(-10deg); transform-origin: right center; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45); }
.xl-uf__title { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 0 0 10px; background: #fff; font-size: 12px; }
.xl-uf__title i { display: grid; place-items: center; width: 44px; height: 100%; font-style: normal; font-size: 13px; color: #333; }
.xl-uf__body { position: relative; padding: 10px 10px 12px; min-height: 300px; }
.xl-uf__lbl { margin: 0; white-space: nowrap; }
.xl-uf__lbl--w { width: 170px; }
.xl-uf__row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.xl-uf__tb, .xl-uf__cb { display: inline-block; min-width: 0; height: 21px; padding: 2px 4px; border: 1px solid var(--uf-line); background: #fff; white-space: nowrap; overflow: hidden; }
.xl-uf__tb--s { width: 60px; }
.xl-uf__tb.is-focus { border-color: var(--uf-blue); }
.xl-uf__cb { position: relative; flex: 1; padding-right: 22px; }
.xl-uf__cb::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 17px; background: var(--uf-btn) no-repeat center / 7px 4px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4z'/%3E%3C/svg%3E"); border-left: 1px solid var(--uf-btn-line); }
.xl-uf__cb--s { flex: none; width: 74px; }
.xl-uf__btn { position: relative; display: inline-block; padding: 3px 12px; border: 1px solid var(--uf-btn-line); background: var(--uf-btn); white-space: nowrap; }
.xl-uf__btn--def { border-color: var(--uf-blue); box-shadow: inset 0 0 0 1px var(--uf-blue); }
.xl-uf__chk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.xl-uf__chk::before { content: ''; flex: none; width: 13px; height: 13px; border: 1px solid #333; background: #fff center / 9px no-repeat; }
.xl-uf__chk.is-on::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3L8.6 2.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.xl-uf__frame { position: relative; margin: 6px 0 10px; padding: 12px 8px 8px; border: 1px solid #c8c8c8; }
.xl-uf__cap { position: absolute; top: -8px; left: 8px; padding: 0 3px; background: var(--uf-bg); font-weight: 400; }
.xl-uf__frame--profile { display: flex; align-items: center; gap: 6px; }
.xl-uf__tabs { display: flex; margin-top: 4px; }
.xl-uf__tabs span { position: relative; top: 1px; padding: 3px 8px; border: 1px solid var(--uf-btn-line); border-right: 0; background: var(--uf-bg); white-space: nowrap; font-size: 11px; }
.xl-uf__tabs span:last-child { border-right: 1px solid var(--uf-btn-line); }
.xl-uf__tabs span.is-on { z-index: 1; top: 0; padding-bottom: 5px; background: #fff; border-bottom-color: #fff; }
.xl-uf__tabs span.is-off { color: #a0a0a0; }
.xl-uf__page { padding: 10px; border: 1px solid var(--uf-btn-line); background: #fff; }
.xl-uf__months { display: grid; grid-template-columns: repeat(4, max-content); gap: 7px 22px; margin: 8px 0 12px; }
.xl-uf__list { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; padding: 6px; border: 1px solid #c8c8c8; }
.xl-uf__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.xl-uf__cursor { position: absolute; right: 10px; bottom: -12px; width: 20px; height: 20px; fill: #fff; stroke: #000; stroke-width: 1.3; stroke-linejoin: round; }
.xl-uf__guide { margin: 0 0 6px; color: #000; }
.xl-uf__tip { display: inline-block; margin: -2px 0 2px 178px; padding: 3px 6px; border: 1px solid #000; background: #ffffe1; font-size: 11px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25); max-width: 280px; }
/* MsgBox của Excel */
.xl-uf__msg { position: absolute; top: 50%; left: 50%; width: 82%; background: #fff; border: 1px solid #5a6b7d; transform: translate(-50%, -42%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.xl-uf__msg .xl-uf__title { height: 28px; }
.xl-uf__msg-body { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 18px; }
.xl-uf__msg-body p { margin: 0; }
.xl-uf__ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1e6fd0; color: #fff; font-family: Georgia, serif; font-size: 18px; font-weight: 700; }
.xl-uf__ico--q { font-family: Tahoma, sans-serif; }
.xl-uf__msg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; background: var(--uf-bg); }
.xl-uf__msg-foot .xl-uf__btn { min-width: 70px; text-align: center; }
/* ListBox + TextBox nhiều dòng (form hướng dẫn) */
.xl-uf__docs { display: grid; grid-template-columns: 170px 1fr; gap: 8px; }
.xl-uf__lb { display: flex; flex-direction: column; padding: 1px; border: 1px solid var(--uf-line); background: #fff; }
.xl-uf__lb span { padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-uf__lb span.is-sel { background: var(--uf-blue); color: #fff; }
.xl-uf__tb--multi { position: relative; height: auto; min-height: 230px; padding: 4px 22px 4px 6px; white-space: normal; }
.xl-uf__tb--multi p { margin: 0 0 8px; }
.xl-uf__scroll { position: absolute; top: 0; right: 0; bottom: 0; width: 17px; background: linear-gradient(#cdcdcd, #cdcdcd) 3px 18px / 11px 70px no-repeat, #f0f0f0; border-left: 1px solid #e3e3e3; }
/* Thanh tiến trình (Label tô màu) + khung log nhiều màu */
.xl-uf__bar { display: block; height: 16px; margin-bottom: 12px; border: 1px solid #bcbcbc; background: #e6e6e6; }
.xl-uf__bar i { display: block; height: 100%; background: #06b025; }
.xl-uf__frame--log { min-height: 150px; background: #fff; }
.xl-uf__frame--log .xl-uf__cap { background: #fff; }
.xl-uf__frame--log p { margin: 0 0 8px; }
.xl-uf__frame--log .is-ok { color: #008c00; }
.xl-uf__frame--log .is-warn { color: #c89600; }
/* Hiệu ứng vào khi cuộn tới (data-xl-feat-enter, JS initXlFeatures): minh họa bay từ phải vào như khung Excel ở hero,
   chữ bên trái fade in. Đặt animation lên stage (không có transform riêng) để khung bên trong giữ nguyên độ nghiêng. */
.xl-feat__grid.is-pending .xl-feat__copy, .xl-feat__grid.is-pending .xl-feat__stage { opacity: 0; }
.xl-feat__grid.is-in .xl-feat__copy { animation: xl-feat-fade 0.8s ease 0.1s backwards; }
.xl-feat__grid.is-in .xl-feat__stage { animation: xl-feat-flyin 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards; }
@keyframes xl-feat-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes xl-feat-flyin {
  from { opacity: 0; transform: perspective(1400px) translateX(260px) rotateY(-60deg) scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
/* Slide đảo vế: minh họa nằm trái nên bay từ trái vào */
.xl-feat__grid--rev.is-in .xl-feat__stage { animation-name: xl-feat-flyin-left; }
@keyframes xl-feat-flyin-left {
  from { opacity: 0; transform: perspective(1400px) translateX(-260px) rotateY(60deg) scale(0.9); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .xl-feat__grid.is-pending .xl-feat__copy, .xl-feat__grid.is-pending .xl-feat__stage { opacity: 1; } .xl-feat__grid.is-in .xl-feat__copy, .xl-feat__grid.is-in .xl-feat__stage { animation: none; } }
/* Slide đảo vế (xl-privacy): minh họa trái, chữ phải */
.xl-feat__grid--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.xl-feat__grid--rev .xl-feat__media { order: -1; }
.xl-privacy__slides { margin-top: clamp(1rem, 3vw, 2rem); }
.xl-pv__tag { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; font-family: var(--xl-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xl-green); }
.xl-pv__tag--ai { color: #b5473a; }
.xl-feat__text .xl-pv__ai { margin: 0 0 1.4rem; padding-left: 0.9rem; border-left: 3px solid #e7b4ad; font-size: 1rem; color: #6b736e; }
.xl-feat__text .xl-pv__tag + h3 { margin: 0; }
/* Minh họa: trình duyệt chat AI (sau, xám) + UserForm tool (trước, chồng lệch xuống phải), nghiêng về phía chữ */
.xl-av { position: relative; width: 100%; max-width: 540px; padding: 0 0 7rem; font-family: 'Segoe UI', var(--xl-font); font-size: 13px; line-height: 1.45; color: #222; transform: perspective(1400px) rotateY(10deg); }
.xl-av p { margin: 0; }
.xl-av .xl-icon { flex: none; font-size: 1.05em; }
.xl-av__ai { width: 86%; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #d9dcda, 0 18px 40px -20px rgba(0, 0, 0, 0.35); }
.xl-av__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #eceeed; border-bottom: 1px solid #dfe2e0; }
.xl-av__bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9cdcb; }
.xl-av__bar span { flex: 1; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; font-size: 11px; color: #777; }
.xl-av__body { display: grid; gap: 9px; min-height: 196px; padding: 14px 16px 28px; align-content: start; }
.xl-av__msg { justify-self: end; max-width: 90%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: #eef1f6; }
.xl-av__file { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px 8px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #d9dee8; font-weight: 600; }
.xl-av__file .xl-icon { color: #1d6f42; }
.xl-av__file small { margin-left: auto; padding-left: 10px; font-weight: 400; color: #888; }
.xl-av__line { display: flex; align-items: center; gap: 7px; color: #555; }
.xl-av__line b { margin-left: auto; color: #c0392b; }
.xl-av__line--bad, .xl-av__line--bad .xl-icon { color: #c0392b; }
.xl-av__q { font-weight: 700; color: #333; }
.xl-av__prog { display: block; height: 6px; border-radius: 999px; background: #e7e9e8; overflow: hidden; }
.xl-av__prog i { display: block; height: 100%; background: #8a94a6; }
.xl-av__prog--warn i { background: #e8590c; }
.xl-av__kv { display: flex; justify-content: space-between; gap: 12px; }
.xl-av__kv span { color: #666; }
.xl-av__center { display: grid; justify-items: center; gap: 4px; padding-top: 8px; text-align: center; color: #666; }
.xl-av__center b { color: #c0392b; font-size: 14px; }
.xl-av__big { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: #fbeceb; color: #c0392b; font-size: 26px; }
.xl-av__btn { margin-top: 8px; padding: 5px 14px; border-radius: 6px; background: #e3e6e4; color: #888; font-size: 12px; }
.xl-av__spin { width: 13px; height: 13px; border: 2px solid #d4d8de; border-top-color: #8a94a6; border-radius: 50%; animation: xl-spin 1s linear infinite; }
/* UserForm tool: nền xám hệ thống kiểu MSForms, chồng lên góc dưới phải */
.xl-av__ours { position: absolute; right: 0; bottom: 0; width: 64%; background: #f0f0f0; border: 1px solid #8f8f8f; box-shadow: 0 22px 44px -16px rgba(16, 61, 38, 0.5), 0 0 0 4px rgba(16, 124, 65, 0.18); }
.xl-av__title { display: flex; justify-content: space-between; align-items: center; padding: 5px 4px 5px 10px; background: #fff; font-size: 12px; }
.xl-av__title i { padding: 0 9px; font-style: normal; color: #555; }
.xl-av__form { display: grid; gap: 7px; padding: 12px 14px 14px; font-family: Tahoma, 'Segoe UI', sans-serif; font-size: 12px; }
.xl-av__form .xl-av__kv b { color: #107c41; }
.xl-av__ok { display: flex; align-items: center; gap: 6px; margin-top: 3px !important; padding: 6px 8px; border: 1px solid #a9d8b9; background: #e9f6ee; color: #107c41; font-weight: 600; }
@media (max-width: 900px) {
  .xl-feat__grid { grid-template-columns: minmax(0, 1fr); }
  .xl-feat__copy { max-width: 620px; width: 100%; margin-inline: auto; }
  /* Màn hẹp (khối Đặc điểm, Công thức, AI): mũi tên + chấm chuyển slide nằm giữa */
  .xl-feat__nav { justify-content: center; }
  .xl-uf { transform: perspective(1400px) rotateY(-6deg); }
  .xl-feat__grid--rev { grid-template-columns: minmax(0, 1fr); }
  /* Màn hẹp: mọi slider chữ + hình (Đặc điểm, Công thức, AI) đưa hình minh họa lên trên cụm chữ */
  .xl-feat__grid .xl-feat__media { order: -1; }
  .xl-av { transform: perspective(1400px) rotateY(6deg); }
}
@media (max-width: 560px) {
  .xl-uf { transform: none; font-size: 11px; overflow: hidden; }
  .xl-uf__row { flex-wrap: wrap; }
  .xl-uf__tabs { overflow: hidden; }
  .xl-uf__body { min-height: 0; }
  .xl-uf__tabs span { padding: 3px 4px; font-size: 10px; }
  .xl-uf__months { grid-template-columns: repeat(3, max-content); gap: 6px 14px; }
  .xl-uf__lbl--w { width: auto; }
  .xl-uf__tip { margin-left: 0; }
  .xl-uf__docs { grid-template-columns: minmax(0, 1fr); }
  .xl-uf__lb { display: none; }
  .xl-uf__frame--profile .xl-uf__btn:last-child { display: none; }
  .xl-av { transform: none; font-size: 12px; padding-bottom: 8.5rem; }
  .xl-av__ai { width: 94%; }
  .xl-av__ours { width: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .xl-feat__text, .xl-feat__text.is-active, .xl-feat__text.is-leaving, .xl-feat__visual, .xl-feat__visual.is-active { transition: none; }
}

/* ---- Nhận xét người dùng (xl-testimonials): một hàng thẻ cuộn ngang + nút trái/phải, avatar minh họa SVG ---- */
.xl-testi__wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.xl-testi__list { list-style: none; margin: 0; padding: 0.5rem 0.25rem 1.25rem; display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 0.25rem; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.xl-testi__list::-webkit-scrollbar { display: none; }
.xl-testi__card { --xl-testi-bg: #fff; --xl-testi-mark: var(--xl-green); flex: 0 0 calc((100% - 2.5rem) / 3); display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 1.5rem 1.4rem 1.25rem; border-radius: 14px; background: var(--xl-testi-bg); scroll-snap-align: start; box-shadow: 0 0 0 1px var(--xl-line), 0 10px 24px -16px rgba(16, 61, 38, 0.35); }
.xl-testi__card--2 { --xl-testi-bg: #f2f8f4; }
.xl-testi__card--3 { --xl-testi-bg: #fffaf0; --xl-testi-mark: #d08a1c; }
.xl-testi__text { position: relative; margin: 0 0 1.15rem; padding-top: 1.6rem; font-size: 1rem; line-height: 1.65; color: var(--xl-text); }
.xl-testi__text::before { content: '\201C'; position: absolute; top: -0.6rem; left: -0.1rem; font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; color: var(--xl-testi-mark); opacity: 0.55; }
.xl-testi__who { display: flex; align-items: center; gap: 0.75rem; }
.xl-testi__avatar { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--xl-line); }
.xl-testi__avatar svg, .xl-testi__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xl-testi__name { flex: 1; min-width: 0; font-size: 0.95rem; color: var(--xl-ink); }
.xl-testi__tool { padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--xl-green-soft); color: var(--xl-green-dark); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.xl-testi__nav { position: absolute; top: calc(50% - 0.5rem); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--xl-green); font-size: 1.2rem; cursor: pointer; box-shadow: 0 0 0 1px var(--xl-line-strong), 0 6px 18px rgba(16, 61, 38, 0.18); transform: translateY(-50%); transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
.xl-testi__nav:hover { background: var(--xl-green); color: #fff; }
.xl-testi__nav--prev { left: -23px; }
.xl-testi__nav--prev .xl-icon { transform: rotate(180deg); }
.xl-testi__nav--next { right: -23px; }
/* Hết đường cuộn: ẩn nút (pointer-events:none theo quy ước nút disabled — xem CLAUDE.md) */
.xl-testi__nav:disabled { opacity: 0; pointer-events: none; }
.xl-testi__sample { margin: 0.25rem 0 0; text-align: center; font-size: 0.78rem; font-style: italic; color: var(--xl-muted); }
@media (max-width: 1240px) { .xl-testi__nav--prev { left: -8px; } .xl-testi__nav--next { right: -8px; } }
@media (max-width: 980px) { .xl-testi__card { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 720px) {
  /* Mobile: vuốt tay, mép thẻ kế tiếp ló ra để gợi ý vuốt; ẩn nút */
  .xl-testi__nav { display: none; }
  .xl-testi__list { gap: 0.9rem; margin: 0 -16px; padding: 0.25rem 16px 1rem; scroll-padding: 0 16px; }
  .xl-testi__card { flex-basis: 84%; }
}

/* ---- Chi phí (xl-pricing): 4 thẻ đặc điểm, icon tròn xanh ---- */
.xl-pricing__note { max-width: 860px; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; text-align: center; font-size: 0.88rem; font-style: italic; line-height: 1.6; color: var(--xl-muted); }
.xl-pricing__note + .xl-btn-row { margin-top: 0.9rem; }
.xl-pricing__points { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.xl-pricing__point { margin: 0; padding: 1.5rem 1.35rem 1.4rem; border-radius: 10px; background: #fff; border-top: 3px solid var(--xl-green); box-shadow: 0 0 0 1px var(--xl-line), 0 10px 24px -14px rgba(16, 61, 38, 0.3); }
.xl-pricing__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 50%; background: var(--xl-green-soft); color: var(--xl-green); font-size: 1.45rem; }
.xl-pricing__point h3 { margin: 0 0 0.45rem; font-size: 1.05rem; line-height: 1.35; color: var(--xl-ink); }
.xl-pricing__point p { margin: 0; line-height: 1.55; color: var(--xl-muted); }
.xl-pricing .xl-sub strong { display: inline-block; padding: 0 0.35em; border-radius: 6px; background: var(--xl-green-soft); color: var(--xl-green-dark); font-size: 1.3em; font-weight: 800; line-height: 1.3; }
.xl-pricing .xl-btn-row { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
@media (max-width: 760px) { .xl-pricing__points { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 560px) {
  .xl-pricing__points { grid-template-columns: 1fr; gap: 0.85rem; }
  .xl-pricing__point { display: grid; grid-template-columns: 42px 1fr; column-gap: 0.9rem; padding: 1.1rem 1.1rem 1.15rem; }
  .xl-pricing__icon { grid-row: span 2; width: 42px; height: 42px; margin: 0; font-size: 1.25rem; }
}

/* Icon tròn nằm vắt ngang đường chia hai nửa */
.xl-privacy__boss { max-width: 820px; margin: 2rem auto 0; text-align: center; line-height: 1.7; text-wrap: balance; }
.xl-privacy__boss em { color: var(--xl-green); font-weight: 700; }
/* Quy trình: infographic 2 làn (Bạn | TĐH Excel), bước so le, nối bằng trục nét đứt ở giữa */
.xl-lanes { --xl-lane-b: #2b5d9c; --xl-lane-b-soft: #eef4fc; --xl-lane-t: var(--xl-green); --xl-lane-t-soft: var(--xl-green-soft); --xl-axis: 72px; --xl-node: 40px; --xl-node-top: 1.2rem; --xl-card-gap: 1.75rem; max-width: 1040px; margin: 0 auto; }
.xl-lanes__head { display: grid; grid-template-columns: minmax(0, 1fr) var(--xl-axis) minmax(0, 1fr); margin-bottom: 1.5rem; }
.xl-lanes__lane { justify-self: center; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 800; font-size: 1.02rem; }
.xl-lanes__lane .xl-icon { font-size: 1.15rem; }
.xl-lanes__lane--b { grid-column: 1; background: var(--xl-lane-b-soft); color: var(--xl-lane-b); box-shadow: inset 0 0 0 1.5px var(--xl-lane-b); }
.xl-lanes__lane--t { grid-column: 3; background: var(--xl-lane-t); color: #fff; }
/* Mọi hàng cao bằng nhau; mỗi thẻ trải 2 hàng nên hàng = nửa thẻ cao nhất */
.xl-lanes__steps { display: grid; grid-template-columns: minmax(0, 1fr) var(--xl-axis) minmax(0, 1fr); grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.xl-lanes__step { display: contents; }
/* Ô nút chiếm trọn hàng ở cột giữa: vòng tròn ở trên, đoạn nét đứt chạy xuống vòng tròn hàng sau */
.xl-lanes__node { grid-column: 2; grid-row: var(--i); position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: var(--xl-node-top); }
.xl-lanes__step:not(.is-last) .xl-lanes__node::before { content: ''; position: absolute; left: 50%; top: calc(var(--xl-node-top) + var(--xl-node) / 2); height: 100%; border-left: 2px dashed #b9c4bd; transform: translateX(-1px); }
.xl-lanes__node b { position: relative; z-index: 1; display: grid; place-items: center; width: var(--xl-node); height: var(--xl-node); border-radius: 50%; color: #fff; font-family: var(--xl-mono); font-weight: 700; box-shadow: 0 0 0 5px #fff, 0 6px 14px -4px rgba(16, 40, 28, 0.35); }
.xl-lanes__step--b .xl-lanes__node b { background: var(--xl-lane-b); }
.xl-lanes__step--t .xl-lanes__node b { background: var(--xl-lane-t); }
.xl-lanes__card { grid-row: var(--i) / span 2; align-self: start; position: relative; margin-bottom: var(--xl-card-gap); padding: 1.15rem 1.35rem 1.25rem; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line), 0 14px 30px -18px rgba(16, 61, 38, 0.35); }
.xl-lanes__step--b .xl-lanes__card { grid-column: 1; border-top: 3px solid var(--xl-lane-b); }
.xl-lanes__step--t .xl-lanes__card { grid-column: 3; border-top: 3px solid var(--xl-lane-t); }
/* Nét đứt ngang nối thẻ với nút trên trục */
.xl-lanes__card::after { content: ''; position: absolute; top: calc(var(--xl-node-top) + var(--xl-node) / 2 - 4px); width: calc((var(--xl-axis) - var(--xl-node)) / 2); border-top: 2px dashed #b9c4bd; }
.xl-lanes__step--b .xl-lanes__card::after { left: 100%; }
.xl-lanes__step--t .xl-lanes__card::after { right: 100%; }
.xl-lanes__tag { display: none; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; font-family: var(--xl-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.xl-lanes__tag .xl-icon { font-size: 0.95rem; }
.xl-lanes__step--b .xl-lanes__tag { color: var(--xl-lane-b); }
.xl-lanes__step--t .xl-lanes__tag { color: var(--xl-lane-t); }
.xl-lanes__card h3 { margin: 0 0 0.35rem; font-family: var(--xl-font); font-size: 1.08rem; font-weight: 800; color: var(--xl-ink); text-wrap: balance; }
.xl-lanes__card p { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--xl-text); }
/* Robot giơ ngón cái ở ô trống cuối làn "Bạn": phóng to, thò xuống quá đáy section (bằng padding-bottom của
   .xl-section + ~32% chiều cao hình) để cạnh dưới section che từ ngực trở xuống; section cắt phần thừa. Ẩn trên mobile. */
.xl-process { overflow: clip; }
.xl-lanes__mascot { grid-column: 1; grid-row: var(--i) / span 2; align-self: end; justify-self: center; list-style: none; pointer-events: none; }
.xl-lanes__mascot img { display: block; width: 300px; height: auto; margin-bottom: calc(-1 * clamp(3.5rem, 7vw, 5.75rem) - 98px); transform-origin: 50% 100%; animation: xl-mascot-bob 3.2s ease-in-out infinite; }
@keyframes xl-mascot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .xl-lanes__mascot img { animation: none; } }
.xl-note {
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid #e6d98a;
  background: #fffbe0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05);
  font-size: 0.97rem;
  line-height: 1.55;
  color: #4a4320;
}
/* Tam giác đỏ góc ô có comment, như Excel */
.xl-note::before { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #d6362c transparent transparent; }
.xl-note__author { display: block; margin-bottom: 0.25rem; font-family: var(--xl-mono); font-size: 0.75rem; font-weight: 600; color: #7a6c1f; }

/* ---- 7. Số liệu trên máy bạn ---- */


/* ---- 8. Chọn dịch vụ ---- */
.xl-services__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.xl-step { margin: 0 0 2rem; padding: 1.5rem; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line); }
.xl-step__title { display: flex; align-items: center; gap: 0.7rem; float: left; width: 100%; margin: 0 0 1.1rem; padding: 0; font-size: 1.12rem; font-weight: 700; color: var(--xl-ink); }
.xl-step__title + * { clear: both; }
.xl-step__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--xl-green); color: #fff; font-family: var(--xl-mono); font-size: 0.9rem; }
.xl-pick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.xl-pick { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line-strong); cursor: pointer; transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.xl-pick:hover { box-shadow: 0 0 0 1px var(--xl-green); }
.xl-pick input, .xl-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.xl-pick__box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--xl-line-strong); border-radius: 4px; color: transparent; font-size: 0.85rem; transition: all 0.15s ease; }
.xl-pick__icon { flex: none; color: var(--xl-green); font-size: 1.3rem; }
.xl-pick__text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.35; }
.xl-pick__text strong { font-size: 0.95rem; color: var(--xl-ink); }
.xl-pick__text small { font-family: var(--xl-mono); font-size: 0.75rem; color: var(--xl-muted); }
.xl-pick input:checked ~ .xl-pick__box { border-color: var(--xl-green); background: var(--xl-green); color: #fff; }
.xl-pick:has(input:checked) { background: var(--xl-green-soft); box-shadow: 0 0 0 2px var(--xl-green); }
.xl-pick input:focus-visible ~ .xl-pick__box, .xl-pkg input:focus-visible + .xl-pkg__card { outline: 2px solid var(--xl-green); outline-offset: 2px; }
.xl-pick.is-soon { cursor: default; opacity: 0.6; pointer-events: none; }
.xl-pick.is-soon .xl-pick__icon { color: var(--xl-muted); }
.xl-pick .xl-badge { margin-left: auto; }
.xl-pkg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.xl-pkg { cursor: pointer; }
.xl-pkg__card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 1.1rem; border-radius: 8px; box-shadow: 0 0 0 1px var(--xl-line-strong); transition: box-shadow 0.15s ease, background-color 0.15s ease; }
.xl-pkg__card .xl-badge { position: absolute; top: -0.6rem; right: 0.8rem; }
.xl-pkg:hover .xl-pkg__card { box-shadow: 0 0 0 1px var(--xl-green); }
.xl-pkg input:checked + .xl-pkg__card { background: var(--xl-green-soft); box-shadow: 0 0 0 2px var(--xl-green); }
.xl-pkg__name { font-size: 1.02rem; color: var(--xl-ink); }
.xl-pkg__desc { flex: 1; font-size: 0.86rem; line-height: 1.5; color: var(--xl-muted); }
.xl-pkg__price { font-family: var(--xl-mono); font-size: 0.85rem; font-weight: 600; color: var(--xl-green-dark); }
.xl-services__hint { margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: 6px; background: #fff8e1; color: #6b5310; font-size: 0.92rem; }
.xl-services__hint[hidden] { display: none; }
.xl-compare-wrap { margin-top: 1.25rem; overflow-x: auto; }
.xl-compare { margin: 0; width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.xl-compare th, .xl-compare td { padding: 0.6rem 0.75rem; border: 1px solid #e3e7e4; }
.xl-compare thead th { background: #f3f4f3; font-weight: 700; color: var(--xl-ink); text-align: center; white-space: nowrap; }
.xl-compare tbody th { font-weight: 500; text-align: left; color: var(--xl-text); background: #fff; }
.xl-compare td { text-align: center; }
.xl-yes { color: var(--xl-green); font-size: 1.1rem; }
.xl-no { color: #b5bdb8; }
.xl-compare[data-active="le"] [data-col="le"],
.xl-compare[data-active="gop"] [data-col="gop"],
.xl-compare[data-active="dong-hanh"] [data-col="dong-hanh"] { background: var(--xl-green-soft); }
.xl-compare[data-active="le"] thead [data-col="le"],
.xl-compare[data-active="gop"] thead [data-col="gop"],
.xl-compare[data-active="dong-hanh"] thead [data-col="dong-hanh"] { background: var(--xl-green); color: #fff; }
.xl-bundle { padding: 1.5rem; border-radius: 10px; border: 1.5px dashed var(--xl-green); background: #fff; }
.xl-bundle__title { margin: 0 0 0.5rem; font-family: var(--xl-font); font-size: 1.08rem; font-weight: 700; color: var(--xl-ink); }

/* Phiếu tổng hợp — kiểu hóa đơn, dính theo khi cuộn */
.xl-receipt {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.35rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--xl-line-strong), 0 18px 40px -18px rgba(16, 61, 38, 0.3);
  border-top: 5px solid var(--xl-green);
}
.xl-receipt__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--xl-line-strong); font-weight: 700; color: var(--xl-ink); }
.xl-receipt__count { font-family: var(--xl-mono); font-size: 0.85rem; color: var(--xl-green); }
.xl-receipt__empty { margin: 0; font-size: 0.9rem; color: var(--xl-muted); }
.xl-receipt__empty[hidden] { display: none; }
.xl-receipt__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.92rem; color: var(--xl-ink); }
.xl-receipt__list:empty { display: none; }
.xl-receipt__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px dashed var(--xl-line-strong); border-bottom: 1px dashed var(--xl-line-strong); font-size: 0.92rem; }
.xl-receipt__row strong { color: var(--xl-green-dark); text-align: right; }
.xl-receipt__note { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--xl-muted); }
.xl-receipt__toast { margin: 0; padding: 0.6rem 0.8rem; border-radius: 6px; background: var(--xl-green-soft); color: var(--xl-green-dark); font-size: 0.85rem; font-weight: 600; }
.xl-receipt__toast[hidden] { display: none; }

/* ---- 9. Quy trình ---- */

/* ---- 10. FAQ ---- */
.xl-faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: 0.6rem; }
.xl-faq__item { border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--xl-line); }
.xl-faq__item[open] { box-shadow: 0 0 0 1px var(--xl-green); }
.xl-faq__item summary { position: relative; padding: 1rem 3rem 1rem 1.2rem; list-style: none; font-weight: 700; color: var(--xl-ink); cursor: pointer; }
.xl-faq__item summary::-webkit-details-marker { display: none; }
.xl-faq__item summary::after { content: '+'; position: absolute; right: 1.1rem; top: 50%; font-family: var(--xl-mono); font-size: 1.3rem; color: var(--xl-green); transform: translateY(-50%); }
.xl-faq__item[open] summary::after { content: '–'; }
.xl-faq__answer { padding: 0 1.2rem 1.1rem; color: var(--xl-muted); line-height: 1.65; }
.xl-faq__answer p { margin: 0; }
/* Cụm câu hỏi: nhãn nhỏ kiểu mono có gạch xanh bên trái, cách cụm trên một khoảng */
.xl-faq__group + .xl-faq__group { margin-top: 2rem; }
.xl-faq__group-title { display: flex; align-items: center; gap: 0.6rem; max-width: 820px; margin: 0 auto 0.85rem; font-family: var(--xl-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xl-green-dark); }
.xl-faq__group-title::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--xl-green); }

/* ---- 11. CTA ---- */
.xl-cta { background: var(--xl-green-dark); color: #e3f3e9; text-align: center; }
.xl-cta__title { max-width: 760px; margin: 0 auto; font-family: var(--xl-font); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.25; color: #fff; }
.xl-cta__text { max-width: 620px; margin: 1rem auto 0; font-size: 1.07rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }

/* ---- Trang danh sách / chi tiết tool ---- */
.xl-page-head { padding-bottom: 2.5rem; }
.xl-page-head__title { margin: 0; font-family: var(--xl-font); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; color: var(--xl-ink); }
.xl-crumbs { margin: 0 0 0.75rem; font-family: var(--xl-mono); font-size: 0.82rem; color: var(--xl-muted); }
.xl-crumbs a { color: var(--xl-green); }
.xl-tool-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
.xl-prose { margin-top: 1.5rem; font-size: 1.03rem; line-height: 1.75; }
.xl-prose p { margin: 0 0 1rem; }
.xl-prose h2 { margin: 2.2rem 0 0.8rem; font-family: var(--xl-font); font-size: 1.4rem; font-weight: 700; line-height: 1.3; color: var(--xl-ink); }
.xl-prose h3 { margin: 1.6rem 0 0.6rem; font-family: var(--xl-font); font-size: 1.15rem; font-weight: 700; color: var(--xl-ink); }
.xl-prose > :first-child { margin-top: 0; }
.xl-prose ul, .xl-prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.xl-prose li { margin-bottom: 0.4rem; }
.xl-prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--xl-green-soft); font-family: var(--xl-mono); font-size: 0.92em; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
}
@media (max-width: 980px) {
  .xl-lanes { --xl-axis: 56px; --xl-node: 36px; }
  .xl-lanes__card { padding: 1rem 1.1rem 1.1rem; }
  .xl-privacy__top { grid-template-columns: 1fr; }
  .xl-hero__grid, .xl-split, .xl-split--even, .xl-services__layout, .xl-tool-detail { grid-template-columns: 1fr; }
  .xl-window { --xl-win-rest: perspective(1400px) rotateY(0deg); --xl-win-zoom: 1.03; }
  .xl-tired__frozen { grid-template-columns: 1fr; }
  .xl-window--frozen { --xl-win-rest: perspective(1400px) rotateY(0deg); }
  .xl-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .xl-receipt { position: static; }
}
@media (max-width: 720px) {
  /* Mobile: trục sang trái, mọi thẻ một cột (mỗi bước 1 hàng, hàng vẫn cao đều nhau);
     bỏ tiêu đề 2 cột, thay bằng nhãn làn trong từng thẻ */
  .xl-lanes { --xl-axis: 44px; --xl-node: 34px; --xl-node-top: 1rem; }
  .xl-lanes__head { display: none; }
  .xl-lanes__mascot { display: none; }
  .xl-lanes__tag { display: inline-flex; }
  /* Mobile: hàng cao theo thẻ của chính nó (không chia đều theo thẻ cao nhất), thẻ sát nhau hơn */
  .xl-lanes { --xl-card-gap: 0.9rem; }
  .xl-lanes__steps { grid-template-columns: var(--xl-axis) minmax(0, 1fr); grid-auto-rows: auto; column-gap: 0.6rem; }
  .xl-lanes__node { grid-column: 1; }
  .xl-lanes__step--b .xl-lanes__card, .xl-lanes__step--t .xl-lanes__card { grid-column: 2; grid-row: var(--i); }
  [data-xl-reveal="lanes"] .xl-lanes__step--b .xl-lanes__card { --xl-plug-from: 60px; }
  [data-xl-reveal="lanes"] .xl-lanes__step--t .xl-lanes__card { --xl-plug-from: 60px; }
  .xl-lanes__card::after { display: none; }
  .xl-tool-grid, .xl-pick-list, .xl-pkg-list, .xl-fit__notes, .xl-fit__contrast { grid-template-columns: 1fr; }
  .xl-board__notes { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .xl-sticky--1, .xl-sticky--2, .xl-sticky--3, .xl-sticky--4 { grid-column: auto; margin-top: 0; }
  .xl-sticky--2, .xl-sticky--4 { margin-top: 1.25rem; }
  /* Mobile: chỉ giữ Ngày chứng từ, TK Nợ, TK Có, Số tiền (cột 2-6 của dữ liệu ẩn đi) */
  .xl-window__sheet th:nth-child(3), .xl-window__sheet td:nth-child(3),
  .xl-window__sheet th:nth-child(4), .xl-window__sheet td:nth-child(4),
  .xl-window__sheet th:nth-child(5), .xl-window__sheet td:nth-child(5),
  .xl-window__sheet th:nth-child(6), .xl-window__sheet td:nth-child(6) { display: none; }
  /* Checklist "Nghe có quen không": thời gian xuống dưới việc, 2 ô cạnh nhau có nhãn */
  .xl-check__head { display: block; }
  .xl-check__head-task { display: block; padding: 0.7rem 1rem; }
  .xl-check__time > span { flex: 1; min-width: 0; }
  .xl-check__head-time { display: none; }
  .xl-check__item { grid-template-columns: 1fr 1fr; }
  .xl-check__task { grid-column: 1 / -1; padding: 0.9rem 1rem 0.7rem; }
  .xl-check__time { flex-wrap: wrap; justify-content: flex-start; padding: 0.55rem 1rem; border-left: 0; border-top: 1px solid #eef1ee; text-align: left; font-size: 0.82rem; }
  .xl-check__time--tool { border-left: 1px solid #eef1ee; }
  .xl-check__time::before { content: attr(data-label); flex-basis: 100%; font-family: var(--xl-font); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
  .xl-vs__row { grid-template-columns: 1fr 1fr; }
  .xl-vs__row--head > span:first-child { display: none; }
  .xl-vs__label { grid-column: 1 / -1; padding-bottom: 0.25rem !important; }
  .xl-vs__row > .xl-vs__formula { border-left: 0; }
  .xl-vs__row > span { font-size: 0.88rem; }
  .xl-video__frame { aspect-ratio: auto; }
  .xl-video__split { position: static; grid-template-columns: 1fr; }
  .xl-video__half { padding: 2rem 1rem; }
  .xl-video__play { display: none; }
  .xl-video__soon { position: static; display: block; margin: 0 auto 1rem; width: max-content; transform: none; }
}
@media (max-width: 460px) {
  .xl-hero__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
  .xl-board { --xl-gutter: 28px; }
  /* Điện thoại: khối "Làm theo cách bạn muốn" gọn lại (note sát nhau, chữ nhỏ hơn, thẻ đối lập bớt đệm) */
  .xl-board__notes { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.4rem 0.9rem 1.5rem; }
  .xl-sticky--2, .xl-sticky--4 { margin-top: 0; }
  .xl-sticky { padding: 1.1rem 1.1rem 1rem; }
  .xl-sticky__title { margin-bottom: 0.3rem; font-size: 1rem; }
  .xl-sticky p { font-size: 0.9rem; line-height: 1.5; }
  .xl-fit__contrast { gap: 0.9rem; margin-bottom: 1.75rem; }
  .xl-fit__other, .xl-fit__ours { padding: 1.1rem 1.15rem; }
  .xl-fit__other .xl-list { gap: 0.4rem; }
  .xl-fit__ours p { font-size: 1.02rem; line-height: 1.55; }
  .xl-fit__questions { margin-top: 1.75rem; }
  .xl-board__cell { display: none; }
  .xl-btn-row .xl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xl-window__sheet tbody tr, .xl-window__bar i, .xl-hang__spinner { animation: none; }
}
@media (max-width: 720px) {
  .xl-section > .container { padding-left: 16px; padding-right: 16px; }
}

/* ---- Mục menu dạng nút (nav.md: button: true), vd "Kết nối" ---- */
.menu .menu-item .menu-link.menu-link--btn { margin-left: 0.5rem; padding: 0.55rem 1.15rem; border-radius: 999px; background: var(--xl-green); color: #fff; box-shadow: 0 6px 16px -6px rgba(16, 124, 65, 0.55); transition: background-color 0.18s ease, transform 0.18s ease; }
.menu .menu-item .menu-link.menu-link--btn::after { content: none; }
.menu .menu-item .menu-link.menu-link--btn:hover { background: var(--xl-green-dark); color: #fff; transform: translateY(-1px); }
/* Menu mobile (.main-nav): rule màu chữ của menu mobile có độ ưu tiên cao hơn nên cần selector mạnh hơn */
body .main-nav .menu .menu-item .menu-link.menu-link--btn { display: inline-block; margin: 0.75rem 0 0 0.75rem; color: #fff; }

/* ---- Nút Zalo nổi góc dưới phải (partials/base.html.twig) ----
   Vòng tròn xanh Zalo + vòng sóng lan ra; desktop hover hiện nhãn bên trái. Nằm dưới popup (z 3000). */
/* Nút liên hệ nổi góc dưới phải: Zalo, Messenger, hotline (bấm = gọi) xếp dọc; icon tròn nhỏ, rê chuột hiện nhãn */
.xl-contact-float { position: fixed; right: clamp(0.85rem, 2vw, 1.5rem); bottom: clamp(0.85rem, 2vw, 1.5rem); z-index: 2500; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
.xl-contact-float__item { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.xl-contact-float__item:hover { text-decoration: none; }
.xl-contact-float__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; box-shadow: 0 4px 12px rgba(16, 40, 80, 0.22); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.xl-contact-float__icon svg { width: 20px; height: 20px; }
.xl-contact-float__icon b { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.72rem; font-weight: 800; letter-spacing: -0.01em; }
.xl-contact-float__item:hover .xl-contact-float__icon { transform: scale(1.08); box-shadow: 0 6px 16px rgba(16, 40, 80, 0.3); }
.xl-contact-float__item--msg .xl-contact-float__icon { background: linear-gradient(45deg, #0a7cff, #a033ff 60%, #ff5c87); }
.xl-contact-float__item--call .xl-contact-float__icon { background: var(--xl-green); }
.xl-contact-float__item--call svg { animation: xl-call-shake 3s ease-in-out infinite; }
.xl-contact-float__item--zalo .xl-contact-float__icon { background: #0068ff; }
.xl-contact-float__label { padding: 0.4rem 0.75rem; border-radius: 999px; background: #fff; color: var(--xl-ink); font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.82rem; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 1px var(--xl-line), 0 6px 16px rgba(16, 40, 80, 0.14); opacity: 0; transform: translateX(6px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; }
.xl-contact-float__item:hover .xl-contact-float__label, .xl-contact-float__item:focus-visible .xl-contact-float__label { opacity: 1; transform: none; }
.xl-contact-float__item:focus-visible { outline: none; }
.xl-contact-float__item:focus-visible .xl-contact-float__icon { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--xl-green); }
@keyframes xl-call-shake { 0%, 70%, 100% { transform: none; } 74%, 82%, 90% { transform: rotate(-14deg); } 78%, 86%, 94% { transform: rotate(14deg); } }
html.xl-popup-lock .xl-contact-float { display: none; }
@media (max-width: 720px) { .xl-contact-float__icon { width: 42px; height: 42px; } .xl-contact-float__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .xl-contact-float__item--call svg { animation: none; } }
/* Khối Thấu hiểu nằm sát hero hơn (giảm đệm dưới hero + đệm trên khối Thấu hiểu) */
.xl-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.xl-pain { padding-top: clamp(2.25rem, 4vw, 3.5rem); }

/* Nút dưới lưới tool trang chủ: chữ "hoặc" đứng ngoài, cạnh nút */
.xl-tools__more { display: flex; align-items: center; justify-content: center; gap: 0.85rem; flex-wrap: wrap; }
.xl-tools__more-prefix { font-size: 0.95rem; font-style: italic; color: var(--xl-muted); }

/* ---- Trang Hướng dẫn (guides.html.twig / guide.html.twig) ---- */
body.template-guides main, body.template-guide main { padding: 0; }
.xl-guides__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.xl-guide-card { position: relative; }
.xl-guide-card__link { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.4rem 1.3rem; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 0 0 1px var(--xl-line), 0 10px 24px -16px rgba(16, 61, 38, 0.3); transition: box-shadow 0.18s ease, transform 0.18s ease; }
.xl-guide-card__link:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--xl-green), 0 14px 30px -16px rgba(16, 61, 38, 0.4); }
.xl-guide-card__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 10px; background: var(--xl-green-soft); color: var(--xl-green); font-size: 1.3rem; }
.xl-guide-card__date { font-family: var(--xl-mono); font-size: 0.8rem; color: var(--xl-muted); }
.xl-guide-card__title { margin: 0.3rem 0 0.5rem; font-family: var(--xl-font); font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: var(--xl-ink); }
.xl-guide-card__desc { margin: 0 0 1rem; line-height: 1.6; color: var(--xl-muted); }
.xl-guide-card__more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; font-weight: 600; color: var(--xl-green); }
.xl-guides__empty { max-width: 560px; margin: 0 auto; padding: 2.5rem 1.5rem; text-align: center; border: 1.5px dashed var(--xl-line-strong); border-radius: 12px; background: var(--xl-paper); }
.xl-guides__empty .xl-guide-card__icon { margin: 0 auto 1rem; }
.xl-guides__empty p { margin: 0 0 1.25rem; line-height: 1.65; color: var(--xl-text); }
.xl-guide-head, .xl-guide-body { max-width: 820px; }
@media (max-width: 980px) { .xl-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .xl-guides__grid { grid-template-columns: 1fr; } }

/* ---- Logo TĐH Excel (partials/xl-logo): robot mặt tròn bên trái, chữ "Tự động hóa" / "Excel" hai dòng bên phải ---- */
.xl-logo { display: inline-flex; align-items: center; gap: 0.55em; font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.05; white-space: nowrap; }
.xl-logo__bot { flex: none; width: 3.1em; height: 3.1em; }
.xl-logo__text { display: flex; flex-direction: column; align-items: flex-start; }
.xl-logo__line1 { font-size: 1.12em; font-weight: 800; letter-spacing: -0.01em; color: #1b2a22; }
.xl-logo__line2 { margin-top: 0.08em; font-size: 1.5em; font-weight: 800; letter-spacing: 0.01em; color: #107c41; }
.xl-logo__bulb { transform-box: fill-box; transform-origin: center; animation: xl-logo-bulb 2.8s ease-in-out infinite; }
.xl-logo__eyes { transform-box: fill-box; transform-origin: center; animation: xl-logo-blink 4.5s infinite; }
@keyframes xl-logo-bulb { 0%, 100% { fill: #7fdc9f; } 50% { fill: #d6f7a0; } }
@keyframes xl-logo-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) { .xl-logo__bulb, .xl-logo__eyes { animation: none; } }
header .logo:has(.xl-logo) img { display: none; }
.main-nav__logo .xl-logo { font-size: 14px; }
@media (max-width: 768px) { header .logo .xl-logo { font-size: 13px; } }