/*
Theme Name: Đồng Đại Lộc – Lưu trữ Di sản
Theme URI: https://example.com/
Author: Ban biên tập Cổng lưu trữ di sản số
Description: Giao diện cổng lưu trữ di sản truyền thống và sự nghiệp của Trung tướng, PGS.TS Đồng Đại Lộc. Khi kích hoạt sẽ tự tạo các Trang (Trang chủ, Tiểu sử & Công tác, Khen thưởng, Khoa học & Đào tạo, Tác phẩm & Thơ ca, Tư liệu ảnh, Tin bài, Góp tư liệu) và Menu chính. Bài viết có thể gán vào từng trang qua hộp "Hiển thị tại trang". Liên hệ: donglocth@gmail.com
Version: 2.1.0
Requires at least: 5.8
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dong-dai-loc
Tags: one-column, custom-menu, featured-images, custom-logo, translation-ready
*/

/* CSS đã được biên dịch sẵn (Tailwind + giao diện), không cần tải thư viện ngoài. */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* =====================================================================
   BẢNG MÀU NHẬN DIỆN
   Xanh lục quân phục CAND + đỏ cờ + vàng kim cấp hiệu + nền giấy ngà
   ===================================================================== */

:root {
  --green-900: #102716;
  /* xanh quân phục đậm */
  --green-800: #17351F;
  --green-700: #21492B;
  --green-600: #2E5F38;
  --red-800: #7E0F14;
  --red-700: #A3161C;
  /* đỏ cờ */
  --red-600: #C2201F;
  --gold: #D4AF37;
  /* vàng kim */
  --gold-2: #F1D77E;
  --gold-3: #9C7A22;
  --paper: #F7F3E8;
  --paper-2: #EFE7D3;
  --card: #FFFDF7;
  --ink: #1F2620;
  --muted: #5C6157;
  --line: rgba(33, 73, 43, .18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1A12;
    --paper-2: #13221A;
    --card: #172A1E;
    --ink: #ECE8DA;
    --muted: #A9B3A3;
    --line: rgba(212,175,55,.20);
    --red-700: #E0484A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0F1A12;
  --paper-2: #13221A;
  --card: #172A1E;
  --ink: #ECE8DA;
  --muted: #A9B3A3;
  --line: rgba(212,175,55,.20);
  --red-700: #E0484A;
  color-scheme: dark;
}

:root {
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero .rise {
    opacity: 1;
    transform: none;
  }

  .hero-photo {
    transform: none;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.serif {
  font-family: "Noto Serif", Georgia, serif;
}

.muted {
  color: var(--muted);
}

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 36px);
}

/* ---------- Họa tiết hoa văn bảo an (guilloche) dùng chung ---------- */

.guilloche {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.10' stroke-width='.8'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='0' cy='0' r='58'/%3E%3Ccircle cx='120' cy='0' r='58'/%3E%3Ccircle cx='0' cy='120' r='58'/%3E%3Ccircle cx='120' cy='120' r='58'/%3E%3C/g%3E%3C/svg%3E");
}

/* =====================================================================
   ĐẦU TRANG
   ===================================================================== */

.utility {
  background: var(--green-900);
  color: #C9D3C2;
  font-size: 13px;
  padding-top: env(safe-area-inset-top, 0px);
}

.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  gap: 12px;
}

.utility a:hover {
  color: var(--gold-2);
}

.masthead {
  position: relative;
  background: linear-gradient(180deg, var(--green-800), var(--green-700));
  color: #fff;
  overflow: hidden;
}

.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red-700) 0 70%, var(--gold) 70% 100%);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 16px 20px;
}

.mh-emblem {
  width: 92px;
  height: 76px;
  flex: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

.mh-title small {
  display: block;
  color: var(--gold-2);
  font-size: 13px;
  letter-spacing: .04em;
}

.mh-title strong {
  display: block;
  font-family: "Noto Serif", serif;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

.mh-title span {
  display: block;
  color: #CFE0CC;
  font-size: 14px;
}

.mh-rank {
  margin-left: auto;
  flex: none;
}

@media (max-width: 760px) {
  .mh-rank {
    display: none;
  }

  .mh-emblem {
    width: 56px;
    height: 56px;
  }

  .mh-title small {
    display: none;
  }

  .mh-emblem {
    width: 66px;
    height: 56px;
  }
}

/* Thanh menu đỏ */

.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--red-700);
  box-shadow: 0 2px 0 var(--red-800), 0 8px 24px -14px rgba(0,0,0,.6);
}

.navbar .wrap {
  display: flex;
  align-items: stretch;
}

.navbar a.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  min-height: 50px;
  color: #FFEFD0;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
  transition: background .2s;
}

.navbar a.nav:hover {
  background: rgba(0,0,0,.14);
  color: #fff;
}

.navbar a.nav.is-active {
  background: var(--red-800);
  color: #fff;
}

.navbar a.nav.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  background: var(--gold);
}

.navbar a.nav svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: .9;
}

.nav-list {
  display: flex;
  flex-wrap: nowrap;
}

.menu-btn {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: none;
  border: 0;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 50px;
}

.nav-current {
  display: none;
  color: #fff;
  font-weight: 600;
  align-items: center;
}

@media (max-width: 1180px) {
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--red-800);
    padding: 8px 0 14px;
    box-shadow: 0 16px 30px -10px rgba(0,0,0,.5);
  }

  .nav-list.is-open {
    display: flex;
  }

  .navbar a.nav {
    min-height: 46px;
    padding-inline: clamp(18px, 4vw, 36px);
  }

  .navbar a.nav.is-active::after {
    left: 0;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 4px;
    height: auto;
  }

  .menu-btn, .nav-current {
    display: flex;
  }
}

/* =====================================================================
   TRANG CHỦ: HERO
   ===================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  color: #F4EFD9;
  background: var(--green-900);
  isolation: isolate;
}

/* Ảnh nền đội hình diễu binh: chuyển động phóng chậm một lần khi mở trang */

.hero-photo {
  position: absolute;
  inset: -2%;
  z-index: -3;
  background: var(--hero-photo) center 28% / cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.12);
  animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
  to {
    transform: scale(1.0);
  }
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(12,30,17,.94) 0%, rgba(12,30,17,.82) 38%, rgba(12,30,17,.45) 70%, rgba(12,30,17,.30) 100%),
    linear-gradient(180deg, rgba(12,30,17,.35) 0%, transparent 35%, rgba(110,10,14,.55) 100%);
}

@media (max-width: 900px) {
  .hero-shade {
    background: linear-gradient(180deg, rgba(12,30,17,.80), rgba(12,30,17,.88) 55%, rgba(110,10,14,.75));
  }
}

.hero .guilloche {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .7;
}

.hero-mark {
  position: absolute;
  z-index: -1;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(720px, 70vw);
  opacity: .10;
  pointer-events: none;
  filter: grayscale(.2);
}

@media (max-width: 900px) {
  .hero-mark {
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    width: 110vw;
    opacity: .08;
  }
}

.hero-crest {
  width: clamp(118px, 13vw, 156px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .hero-crest {
    margin-inline: auto;
  }
}

.hero-flag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  z-index: 1;
  background: linear-gradient(90deg, var(--red-700) 0 62%, var(--gold) 62% 100%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-2);
  font-size: 15px;
}

.hero-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--gold);
}

@media (max-width: 900px) {
  .hero-kicker::before {
    display: none;
  }
}

.hero h1 {
  font-family: "Noto Serif", serif;
  font-weight: 800;
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  line-height: 1.05;
  margin: 12px 0 10px;
  background: linear-gradient(180deg, #FFF8DC 0%, #F4D97A 55%, #C9A030 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}

.hero .rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}

.hero .r1 {
  animation-delay: .15s
}

.hero .r2 {
  animation-delay: .35s
}

.hero .r3 {
  animation-delay: .55s
}

.hero .r4 {
  animation-delay: .75s
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.hero .rank {
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--gold-2);
}

.hero .pos {
  margin-top: 18px;
  font-size: 1.08rem;
  color: #E3EADF;
  max-width: 40ch;
}

@media (max-width: 900px) {
  .hero .pos {
    margin-inline: auto;
  }
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .hero-actions {
    justify-content: center;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 3px;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-red {
  background: var(--red-700);
  color: #fff;
  border-color: var(--red-600);
}

.btn-red:hover {
  background: var(--red-600);
}

.btn-gold {
  background: var(--gold);
  color: var(--green-900);
}

.btn-gold:hover {
  background: var(--gold-2);
}

.btn-line {
  border-color: rgba(241,215,126,.6);
  color: #FFF3CF;
}

.btn-line:hover {
  background: rgba(241,215,126,.12);
}

/* Khung chân dung kiểu bằng danh dự */

.honor-frame {
  position: relative;
  width: min(380px, 82vw);
  margin-inline: auto;
  padding: 14px;
  background: linear-gradient(145deg, #F6DF8E, #B8902C 45%, #F1D77E 70%, #8F6B1C);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,.75);
}

.honor-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(80,50,0,.45);
  pointer-events: none;
}

.honor-frame .inner {
  position: relative;
  aspect-ratio: 4/5.2;
  overflow: hidden;
  background: var(--green-900);
  border: 3px solid var(--red-700);
}

.honor-frame img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 18%;
     object-position: center 18%;
}

.honor-ribbon {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  background: var(--red-700);
  color: #FFF0C9;
  font-family: "Noto Serif", serif;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 26px;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
}

.honor-ribbon::before, .honor-ribbon::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 18px;
  height: 100%;
  background: var(--red-800);
  z-index: -1;
}

.honor-ribbon::before {
  left: -12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
}

.honor-ribbon::after {
  right: -12px;
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%);
}

/* Cấp hiệu Trung tướng (minh họa) */

.shoulder {
  width: 150px;
  height: 46px;
}

/* =====================================================================
   PHẦN CHUNG CỦA CÁC TRANG
   ===================================================================== */

.banner {
  position: relative;
  overflow: hidden;
  color: #F4EFD9;
  isolation: isolate;
  background: linear-gradient(100deg, rgba(16,39,22,.96) 0%, rgba(23,53,31,.90) 55%, rgba(33,73,43,.72) 100%), var(--hero-photo) center 30% / cover no-repeat, var(--green-800);
}

.banner .guilloche {
  position: absolute;
  inset: 0;
}

.banner .wrap {
  position: relative;
  padding-block: 38px 42px;
}

.banner .watermark {
  position: absolute;
  right: clamp(-30px, 3vw, 60px);
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 200px;
  opacity: .22;
  pointer-events: none;
}

@media (max-width: 640px) {
  .banner .watermark {
    width: 170px;
    height: 140px;
    right: -40px;
    opacity: .14;
  }
}

.crumbs {
  font-size: 13.5px;
  color: #C7D5C2;
}

.crumbs a:hover {
  color: var(--gold-2);
}

.banner h1 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.15;
  margin: 8px 0 6px;
  color: #FFF6DA;
}

.banner p {
  color: #DCE6D7;
  max-width: 64ch;
}

.banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
}

.section {
  padding-block: clamp(48px, 7vw, 84px);
}

.h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.25;
  color: var(--red-700);
  margin-bottom: 24px;
}

.h2::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.2em;
  background: linear-gradient(180deg, var(--red-700) 0 60%, var(--gold) 60%);
}

.h3 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.4;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
}

.panel-head {
  background: var(--green-700);
  color: #FFF3CF;
  padding: 12px 20px;
  font-family: "Noto Serif", serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-head svg {
  width: 18px;
  height: 18px;
  fill: var(--gold);
}

.star-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  margin-block: 8px;
}

.star-rule::before, .star-rule::after {
  content: "";
  height: 1px;
  flex: 0 1 200px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.star-rule svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ---------- Trang chủ: chuyên mục ---------- */

.cat {
  position: relative;
  display: block;
  padding: 26px 24px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-700);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.cat:hover {
  border-top-color: var(--red-700);
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -22px rgba(16,39,22,.6);
}

.cat .ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--green-700);
  border: 2px solid var(--gold);
  border-radius: 50%;
  margin-bottom: 14px;
}

.cat .ic svg {
  width: 22px;
  height: 22px;
  fill: var(--gold-2);
}

.cat p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 6px;
}

.cat .go {
  margin-top: 14px;
  color: var(--red-700);
  font-weight: 600;
  font-size: 14.5px;
}

.milestones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}

.milestones::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 2px;
  background: linear-gradient(90deg, var(--green-700), var(--red-700));
}

.ms {
  position: relative;
  padding: 0 12px;
  text-align: center;
}

.ms .dot {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--gold);
  border-radius: 50%;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 14px;
}

.ms b {
  display: block;
  font-family: "Noto Serif", serif;
  font-size: 1.15rem;
  color: var(--green-700);
}

.ms span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  display: block;
}

@media (max-width: 820px) {
  .milestones {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .milestones::before {
    left: 27px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--green-700), var(--red-700));
  }

  .ms {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 16px;
    text-align: left;
    padding: 0;
    align-items: center;
  }

  .ms .dot {
    margin: 0;
    grid-row: span 2;
  }
}

.quote-band {
  position: relative;
  background: var(--red-700);
  color: #FFF1CC;
  overflow: hidden;
}

.quote-band .guilloche {
  position: absolute;
  inset: 0;
}

.quote-band blockquote {
  position: relative;
  font-family: "Noto Serif", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.95rem);
  line-height: 1.5;
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Tiểu sử & Công tác ---------- */

.subnav {
  position: sticky;
  top: 50px;
  z-index: 35;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 20px -18px rgba(16,39,22,.7);
}

.subnav-in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav-in::-webkit-scrollbar {
  display: none;
}

.subnav button {
  position: relative;
  flex: none;
  padding: 13px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

.subnav button:hover {
  color: var(--ink);
}

.subnav button.is-on {
  color: var(--red-700);
  font-weight: 600;
}

.subnav button.is-on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  background: var(--red-700);
}

.anchor-sec, #sec-tieusu {
  scroll-margin-top: 112px;
}

.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

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

@media (max-width: 480px) {
  .stages {
    grid-template-columns: 1fr;
  }
}

.stage-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-700);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.stage-card:hover {
  border-top-color: var(--red-700);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -20px rgba(16,39,22,.7);
}

.stage-card .yr {
  display: block;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 14.5px;
}

.stage-card b {
  display: block;
  font-family: "Noto Serif", serif;
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 2px 0 4px;
}

.stage-card .sm {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Tiểu sử ---------- */

.bio p {
  margin-bottom: 1.1em;
  max-width: 70ch;
}

.bio p:first-of-type::first-letter {
  font-family: "Noto Serif", serif;
  font-weight: 800;
  color: var(--red-700);
  float: left;
  font-size: 3.9em;
  line-height: .85;
  padding: 6px 12px 0 0;
}

.facts dl {
  padding: 18px 22px;
}

.facts dt {
  font-size: 13px;
  color: var(--muted);
}

.facts dd {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.4;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.facts dd:last-child {
  border: 0;
  margin: 0;
  padding: 0;
}

.edu {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.edu .y {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 1.2rem;
}

/* ---------- Sự nghiệp (dòng thời gian) ---------- */

.tl {
  position: relative;
  max-width: 920px;
}

.tl::before {
  content: "";
  position: absolute;
  left: 170px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}

.tl li {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 0 38px;
  padding-bottom: 26px;
  list-style: none;
}

.tl li::before {
  content: "";
  position: absolute;
  left: 164px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--green-600);
}

.tl li.key::before {
  background: var(--gold);
  border-color: var(--red-700);
}

.tl .d {
  text-align: right;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--green-700);
  padding-right: 24px;
}

.tl .r {
  font-weight: 600;
  font-size: 16.5px;
}

.tl .o {
  color: var(--muted);
  font-size: 15px;
}

.tl li.key .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red-700);
  padding: 12px 16px;
  margin-top: -10px;
}

.tl .stage {
  grid-column: 1 / -1;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 1.15rem;
  padding: 6px 0 14px 208px;
}

.tl li.stage-row::before {
  display: none;
}

.tl li.stage-row {
  padding-bottom: 0;
}

@media (max-width: 680px) {
  .tl::before {
    left: 6px;
  }

  .tl li {
    grid-template-columns: 1fr;
    padding-left: 32px;
  }

  .tl li::before {
    left: 0;
  }

  .tl .d {
    text-align: left;
    padding: 0;
  }

  .tl .stage {
    padding-left: 0;
  }
}

/* ---------- Khen thưởng ---------- */

.ribbon-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 14px;
  background: var(--green-900);
  border: 1px solid var(--gold-3);
  max-width: 420px;
  margin-inline: auto;
}

.ribbon-rack span {
  width: 60px;
  height: 18px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.medal-hall {
  background: linear-gradient(180deg, var(--green-800), var(--green-900));
  color: #EFE9D5;
  position: relative;
  overflow: hidden;
}

.medal-hall .guilloche {
  position: absolute;
  inset: 0;
}

.medal-hall .hall-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(820px, 120vw);
  height: 680px;
  opacity: .06;
  pointer-events: none;
}

.medal {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 30px 20px 26px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(212,175,55,.3);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s;
}

.medal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,236,180,.14) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s ease;
}

.medal:hover, .medal:focus-visible {
  transform: translateY(-6px);
  border-color: var(--gold);
  background: rgba(212,175,55,.08);
}

.medal:hover::after {
  transform: translateX(120%);
}

.medal svg.m {
  width: 96px;
  height: 140px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.5));
  transition: transform .4s;
}

.medal:hover svg.m {
  transform: scale(1.05) rotate(-2deg);
}

.medal h3 {
  font-family: "Noto Serif", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFF0C2;
  line-height: 1.35;
}

.medal .grade {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--gold-2);
  border: 1px solid rgba(212,175,55,.5);
  padding: 2px 12px;
  border-radius: 99px;
}

.medal p {
  font-size: 14px;
  color: #C6CEC0;
  margin-top: 10px;
  line-height: 1.55;
}

/* ---------- Khoa học ---------- */

.theme {
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-700);
}

.theme .y {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 14.5px;
}

.theme p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 6px;
}

.proj {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 18px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
}

.proj .lv {
  grid-row: span 2;
  text-align: center;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 14px;
  color: #FFF0C2;
  background: var(--red-700);
  padding: 6px 8px;
  height: -moz-fit-content;
  height: fit-content;
  border-bottom: 3px solid var(--gold);
}

.proj h4 {
  font-weight: 600;
  line-height: 1.55;
}

.proj span {
  color: var(--muted);
  font-size: 14px;
}

.pub-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--green-700);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tab {
  padding: 11px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px 3px 0 0;
}

.tab .n {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  margin-left: 6px;
  color: var(--red-700);
}

.tab[aria-selected="true"] {
  background: var(--green-700);
  color: #FFF3CF;
  font-weight: 600;
}

.tab[aria-selected="true"] .n {
  color: var(--gold-2);
}

.pub-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 12px;
  margin-bottom: 8px;
  min-width: min(300px, 100%);
}

.pub-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 9px 0;
  width: 100%;
  color: var(--ink);
}

.pub-search svg {
  width: 16px;
  height: 16px;
  fill: var(--muted);
  flex: none;
}

.pub-list {
  counter-reset: p;
  margin: 0;
  padding: 0;
}

.pub-list li[hidden] {
  display: none;
}

.pub-list li {
  counter-increment: p;
  list-style: none;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px dashed var(--line);
}

.pub-list li::before {
  content: counter(p, decimal-leading-zero);
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--gold-3);
  font-size: 1.15rem;
}

.pub-t {
  font-weight: 500;
  line-height: 1.6;
}

.pub-s {
  color: var(--muted);
  font-style: italic;
  font-size: 14.5px;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

/* ---------- Thơ ca ---------- */

.sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(28px, 5vw, 56px);
}

.sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,.5);
  pointer-events: none;
}

.poem-title {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  color: var(--red-700);
  line-height: 1.2;
}

.poem-body {
  font-family: "Noto Serif", serif;
  font-size: 1.2rem;
  line-height: 1.95;
  white-space: pre-line;
}

.pending {
  border: 1px dashed var(--gold-3);
  background: rgba(212,175,55,.07);
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.seal {
  width: 64px;
  height: 64px;
  border: 2px solid var(--red-700);
  color: var(--red-700);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  transform: rotate(-5deg);
  flex: none;
}

/* ---------- Tư liệu ảnh ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.chip {
  padding: 7px 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  border-radius: 99px;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
}

.gallery {
  -moz-columns: 3 290px;
       columns: 3 290px;
  -moz-column-gap: 18px;
       column-gap: 18px;
}

.g {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin: 0 0 18px;
  background: var(--card);
  border: 1px solid var(--line);
}

.g button {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: #000;
  cursor: zoom-in;
  overflow: hidden;
}

.g img {
  width: 100%;
  height: auto;
  transition: transform .6s ease, opacity .3s;
}

.g button:hover img {
  transform: scale(1.03);
  opacity: .94;
}

.g figcaption {
  padding: 13px 16px 15px;
  font-size: 14.5px;
  line-height: 1.55;
  border-top: 3px solid var(--green-700);
}

.g figcaption b {
  display: block;
  font-family: "Noto Serif", serif;
  color: var(--red-700);
  font-size: 1.02rem;
  margin-bottom: 2px;
}

.g figcaption span {
  color: var(--muted);
}

.g .tag {
  display: inline-block;
  font-size: 12px;
  color: var(--green-700);
  border: 1px solid var(--line);
  padding: 0 8px;
  border-radius: 99px;
  margin-top: 8px;
}

.g[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(8,18,11,.95);
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-height: 76vh;
  width: auto;
  margin: 0 auto;
  border: 2px solid var(--gold);
}

.lightbox figcaption {
  color: #E8E2CC;
  text-align: center;
  margin-top: 14px;
  max-width: 70ch;
  margin-inline: auto;
  font-size: 15px;
}

.lb {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(212,175,55,.55);
  font-size: 22px;
  cursor: pointer;
}

.lb:hover {
  background: rgba(212,175,55,.2);
}

.lb-x {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
}

.lb-p {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-n {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .lb-p, .lb-n {
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}

/* ---------- Liên hệ ---------- */

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-weight: 600;
  font-size: 14.5px;
}

.field input, .field textarea, .field select {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 2px;
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
}

/* =====================================================================
   CHÂN TRANG
   ===================================================================== */

.footer {
  background: var(--green-900);
  color: #C4CEBE;
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red-700) 0 70%, var(--gold) 70%);
}

.footer h4 {
  font-family: "Noto Serif", serif;
  color: #FFF0C2;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.footer a:hover {
  color: var(--gold-2);
}

.footer li {
  margin-bottom: 6px;
  list-style: none;
}

.footer ul {
  padding: 0;
  margin: 0;
}

.footer .bottom {
  border-top: 1px solid rgba(212,175,55,.18);
  font-size: 13.5px;
  color: #93A08D;
}

.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red-700);
  color: #fff;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* =====================================================================
   BỔ SUNG CHO WORDPRESS
   ===================================================================== */

[hidden] {
  display: none !important;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--gold);
  color: var(--green-900);
  padding: 8px 14px;
  font-weight: 600;
}

.skip-link:focus {
  left: 8px;
}

/* Menu sinh từ WordPress (ul > li > a.nav) */

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list > li {
  display: flex;
  list-style: none;
}

@media (max-width: 1180px) {
  .nav-list > li {
    display: block;
  }

  .nav-list > li > a.nav {
    display: flex;
  }
}

/* Thanh quản trị WordPress */

body.admin-bar .navbar {
  top: 32px;
}

body.admin-bar .subnav {
  top: 82px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .navbar {
    top: 46px;
  }

  body.admin-bar .subnav {
    top: 96px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar .navbar {
    top: 0;
  }

  body.admin-bar .subnav {
    top: 50px;
  }
}

/* Nội dung soạn trong trình soạn thảo */

.entry-content {
  font-size: 17px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

.entry-content > * + * {
  margin-top: 1.05em;
}

.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 700;
  color: var(--red-700);
  line-height: 1.3;
  margin-top: 1.6em;
}

.entry-content h2 {
  font-size: 1.6rem;
}

.entry-content h3 {
  font-size: 1.3rem;
}

.entry-content h4 {
  font-size: 1.1rem;
  color: var(--green-700);
}

.entry-content a {
  color: var(--red-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content ul {
  list-style: disc;
  padding-left: 1.4em;
}

.entry-content ol {
  list-style: decimal;
  padding-left: 1.4em;
}

.entry-content li + li {
  margin-top: .35em;
}

.entry-content blockquote {
  border-left: 4px solid var(--gold);
  background: var(--card);
  padding: 14px 20px;
  font-family: "Noto Serif", serif;
  font-style: italic;
}

.entry-content img {
  height: auto;
}

.entry-content figure {
  margin-left: 0;
  margin-right: 0;
}

.entry-content figcaption, .entry-content .wp-element-caption {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.entry-content th, .entry-content td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.entry-content th {
  background: var(--green-700);
  color: #FFF3CF;
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}

.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.entry-content .alignleft {
  float: left;
  margin: .3em 1.4em 1em 0;
}

.entry-content .alignright {
  float: right;
  margin: .3em 0 1em 1.4em;
}

@media (max-width: 600px) {
  .entry-content .alignleft, .entry-content .alignright {
    float: none;
    margin: 1em 0;
  }
}

.bio.entry-content > p:first-of-type::first-letter {
  font-family: "Noto Serif", serif;
  font-weight: 800;
  color: var(--red-700);
  float: left;
  font-size: 3.9em;
  line-height: .85;
  padding: 6px 12px 0 0;
}

.bio.entry-content > * + * {
  margin-top: 0;
}

.poem-body.entry-content {
  white-space: normal;
}

.poem-body.entry-content p {
  white-space: pre-line;
  margin: 0 0 1.2em;
}

.entry-hero {
  margin: 0 0 28px;
  border: 1px solid var(--line);
  background: var(--card);
}

.entry-hero img {
  width: 100%;
  height: auto;
}

/* Thẻ bài viết */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green-700);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.post-card:hover {
  border-top-color: var(--red-700);
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -22px rgba(16,39,22,.6);
}

.post-thumb {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--green-800);
}

.post-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .6s ease;
}

.post-card:hover .post-thumb img {
  transform: scale(1.04);
}

.post-thumb-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 22% 30%;
  background: linear-gradient(135deg, var(--green-800), var(--green-600));
}

.post-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-date {
  font-size: 13px;
  color: var(--muted);
}

.post-title {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.4;
  margin: 4px 0 8px;
}

.post-title a:hover {
  color: var(--red-700);
}

.post-excerpt {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
}

.post-more {
  margin-top: 12px;
  color: var(--red-700);
  font-weight: 600;
  font-size: 14.5px;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 36px;
}

.pager .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  font-weight: 600;
}

.pager .page-numbers.current {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
}

.pager a.page-numbers:hover {
  border-color: var(--red-700);
  color: var(--red-700);
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--red-700);
}

.side-list {
  list-style: none;
  margin: 0;
  padding: 8px 20px 14px;
}

.side-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  line-height: 1.5;
}

.side-list li:last-child {
  border-bottom: 0;
}

.side-list a {
  font-weight: 500;
}

.side-list a:hover {
  color: var(--red-700);
}

.side-list span {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0 6px 0 12px;
}

.search-box svg {
  width: 16px;
  height: 16px;
  fill: var(--muted);
  flex: none;
}

.search-box input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 10px 0;
  color: var(--ink);
  min-width: 0;
}

.search-box button {
  background: var(--green-700);
  color: #FFF3CF;
  border: 0;
  padding: 7px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}

.search-box button:hover {
  background: var(--red-700);
}

.empty.panel {
  padding: 28px;
}

/* =====================================================================
   THƠ CA: tuyển tập và trang một bài thơ
   ===================================================================== */

.btn-line-dark {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}

.btn-line-dark:hover {
  border-color: var(--red-700);
  color: var(--red-700);
}

.poem-count {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}

.poem-intro {
  max-width: 760px;
}

.poem-stage {
  background: radial-gradient(900px 500px at 50% 0%, rgba(212,175,55,.10), transparent 70%), var(--paper);
}

.poem-sheet {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 80px) clamp(22px, 6vw, 72px) clamp(32px, 5vw, 56px);
  background:
    linear-gradient(var(--gold), var(--gold)) top 20px left 20px / 30px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 20px left 20px / 2px 30px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 20px right 20px / 30px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 20px right 20px / 2px 30px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 20px left 20px / 30px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 20px left 20px / 2px 30px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 20px right 20px / 30px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 20px right 20px / 2px 30px no-repeat,
    var(--card);
  border: 1px solid var(--line);
  border-top: 6px solid var(--red-700);
  box-shadow: 0 40px 70px -50px rgba(60,30,10,.55);
}

.poem-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,.45);
  pointer-events: none;
}

.poem-illus {
  margin: 0 0 34px;
  border: 1px solid var(--line);
}

.poem-illus img {
  width: 100%;
  max-height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
}

.poem-head {
  text-align: center;
}

.poem-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--red-700);
  text-align: center;
}

.poem-name {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-style: italic;
  color: var(--red-700);
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.2;
  margin: 10px 0 8px;
}

.poem-by {
  color: var(--muted);
  font-size: 15.5px;
}

.poem-head .star-rule {
  margin-top: 18px;
}

.poem-text {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 8px;
  font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1.06rem, 2.4vw, 1.24rem);
  line-height: 2;
  color: var(--ink);
  overflow-wrap: break-word;
}

.poem-text > * {
  margin: 0 0 1.6em;
}

.poem-text > *:last-child {
  margin-bottom: 0;
}

.poem-text > p:first-child::first-letter {
  font-weight: 800;
  color: var(--red-700);
  font-size: 1.55em;
  line-height: 1;
}

.poem-text pre, .poem-text .wp-block-verse {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  background: none;
  padding: 0;
  border: 0;
  color: inherit;
}

.poem-text h2, .poem-text h3, .poem-text h4 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--green-700);
  font-size: 1.05em;
  text-align: center;
  margin-top: 1.8em;
}

.poem-text em {
  color: var(--muted);
}

.poem-text img {
  height: auto;
  margin: 0 auto;
}

.poem-text figure {
  margin: 1.6em 0;
}

.poem-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 44px;
}

.poem-sign {
  text-align: right;
  font-family: "Noto Serif", serif;
  font-style: italic;
  line-height: 1.6;
}

.poem-sign span {
  display: block;
}

.poem-written {
  color: var(--muted);
  font-size: 15px;
}

.poem-author-sign {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.08rem;
}

.poem-note {
  max-width: 780px;
  margin: 28px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: 22px 26px;
}

.poem-note h3 {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  color: var(--red-700);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.poem-note p {
  margin: 0 0 .8em;
}

.poem-note p:last-child {
  margin: 0;
}

.poem-actions {
  max-width: 780px;
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.poem-pager {
  max-width: 780px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.poem-pager a {
  display: block;
  height: 100%;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  font-family: "Noto Serif", serif;
  font-weight: 600;
  transition: border-color .2s;
}

.poem-pager a:hover {
  border-color: var(--red-700);
  color: var(--red-700);
}

.poem-pager small {
  display: block;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}

.poem-pager .r {
  text-align: right;
}

@media (max-width: 560px) {
  .poem-pager {
    grid-template-columns: 1fr;
  }

  .poem-pager .r {
    text-align: left;
  }
}

/* Thẻ bài thơ */

.poem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.poem-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red-700);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.poem-card a::after {
  content: "\201C";
  position: absolute;
  right: 16px;
  top: -6px;
  font-family: "Noto Serif", serif;
  font-size: 110px;
  line-height: 1;
  color: var(--gold);
  opacity: .22;
  pointer-events: none;
}

.poem-card a:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 34px -24px rgba(60,30,10,.6);
  border-color: var(--gold);
  border-top-color: var(--red-700);
}

.pc-img {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.pc-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.pc-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 20px;
}

.pc-inner::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212,175,55,.35);
  pointer-events: none;
}

.pc-kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--red-700);
}

.pc-title {
  display: block;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.3;
  margin: 6px 0 12px;
  color: var(--ink);
}

.pc-lines {
  display: block;
  flex: 1;
  font-family: "Noto Serif", serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}

.pc-lines span {
  display: block;
}

.pc-meta {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.pc-more {
  margin-top: 10px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--red-700);
}

/* Bài thơ nổi bật */

.poem-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

@media (max-width: 860px) {
  .poem-feature {
    grid-template-columns: 1fr;
  }
}

.pf-sheet {
  position: relative;
  display: block;
  padding: 40px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 6px solid var(--red-700);
  box-shadow: 0 30px 60px -44px rgba(60,30,10,.6);
  transition: transform .3s;
}

.pf-sheet:hover {
  transform: translateY(-3px);
}

.pf-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,.45);
  pointer-events: none;
}

.pf-lines {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Noto Serif", serif;
  font-size: 1.12rem;
  line-height: 1.95;
  color: var(--ink);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

.pf-lines span {
  display: block;
}

.pf-title {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.2;
  color: var(--red-700);
  margin: 8px 0 8px;
}

.pf-title a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.pf-meta {
  color: var(--muted);
  font-size: 15px;
}

.pf-note {
  margin-top: 14px;
  font-family: "Noto Serif", serif;
  font-style: italic;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding-left: 14px;
}

/* In bài thơ */

@media print {
  .utility, .masthead, .navbar, .banner, .footer, .poem-actions, .poem-pager, .to-top, .skip-link, #wpadminbar, main > section:not(.poem-stage) {
    display: none !important;
  }

  body, .poem-stage {
    background: #fff !important;
  }

  .poem-sheet {
    box-shadow: none;
    border-color: #ccc;
  }

  .poem-note {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.static {
  position: static;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[520px\] {
  max-width: 520px;
}

.max-w-\[80ch\] {
  max-width: 80ch;
}

.max-w-\[820px\] {
  max-width: 820px;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.p-6 {
  padding: 1.5rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.text-center {
  text-align: center;
}

.text-\[1\.15rem\] {
  font-size: 1.15rem;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:inline {
    display: inline;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.4fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-\[124px\] {
    top: 124px;
  }

  .lg\:top-\[70px\] {
    top: 70px;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.3fr_1fr\] {
    grid-template-columns: 1.3fr 1fr;
  }

  .lg\:grid-cols-\[1\.4fr_1fr\] {
    grid-template-columns: 1.4fr 1fr;
  }

  .lg\:grid-cols-\[1\.6fr_1fr\] {
    grid-template-columns: 1.6fr 1fr;
  }

  .lg\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr 320px;
  }
}