/* TKPN Thanh Tịnh • WordPress • 1.1.0
   Cam đất & vàng cổ truyền; responsive full-width, không sidebar. */
:root {
  --clay: #9c502a;
  --clay-deep: #73371f;
  --mahogany: #553121;
  --gold: #bc8d4a;
  --gold-light: #e6d1a7;
  --paper: #fffaf2;
  --ivory: #f9f4eb;
  --surface: #ffffff;
  --ink: #302b26;
  --ink-soft: #70665d;
  --line: #eadfd1;
  --shadow: 0 9px 30px rgba(91, 57, 30, .075);
  --reading-width: 880px;
  --radius: 15px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 25px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--clay-deep); text-decoration: none; }
a:hover { color: #b86734; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
button, input { font: inherit; }
button { cursor: pointer; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
.site-shell { overflow-x: clip; }
.wrap { width: min(100% - 64px, 1320px); margin-inline: auto; }
.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; }
.screen-reader-text:focus { position: fixed !important; left: 1rem; top: 1rem; z-index: 999999; background: white; width: auto; height: auto; margin: 0; padding: 12px; clip: auto; }
.site-header { background: linear-gradient(180deg, #fffaf2 0%, #fff 94%); }
.topline { display: flex; align-items: center; justify-content: space-between; padding-block: 9px; font-size: 12px; font-weight: 600; color: #8f7563; letter-spacing: .05em; }
.topline-home { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; color: #9b643c; }
.topline-home::first-letter { color: #bd9257; }
.topline-right { font-weight: 400; }
.hero-wrap { padding-bottom: 18px; }
/* New responsive header: live text, authentic portrait, edited .NET badge. */
.brand-banner.tkpn-brand {
  display: grid; grid-template-columns: clamp(165px, 19vw, 265px) minmax(0, 1fr) clamp(118px, 12vw, 169px);
  min-height: 230px; gap: clamp(12px, 2vw, 30px); align-items: center;
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid #edcda7; border-radius: 16px;
  background: radial-gradient(circle at 93% 12%, rgba(223,166,96,.2), transparent 31%),
              radial-gradient(circle at 18% 96%, rgba(200,121,64,.15), transparent 37%),
              linear-gradient(112deg,#f2cda3 0%,#fff4df 35%,#fff9ed 74%,#f6dfb6 100%);
  color: #653b28; box-shadow: 0 9px 30px rgba(121,72,33,.12);
  padding: 16px clamp(18px, 3.2vw, 45px) 15px 0;
}
.tkpn-brand::after { content: ""; position: absolute; inset: 9px; z-index: -1; pointer-events: none; border: 1px solid rgba(166,100,48,.16); border-radius: 11px; }
.tkpn-brand .brand-portrait { display: block; align-self: end; height: 210px; overflow: hidden; position: relative; }
.tkpn-brand .brand-portrait img { display: block; position: absolute; left: 0; bottom: 0; width: 290px; max-width: none; height: auto; object-fit: contain; }
.tkpn-brand .brand-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 7px 0; }
.tkpn-brand .brand-overline { font: 750 clamp(13px,1.45vw,19px)/1.45 "Segoe UI",sans-serif; letter-spacing: .22em; color: #855034; }
.tkpn-brand .brand-invocation { font-size: clamp(12px,1.15vw,16px); font-weight: 550; color: #896044; margin-top: 3px; }
.tkpn-brand .brand-mantra { display: block; font: 700 clamp(35px,5vw,71px)/1.13 Georgia,"Times New Roman",serif; letter-spacing: -.025em; white-space: nowrap; color: #823d23; text-shadow: 0 1px 0 #fff3de; }
.tkpn-brand .brand-message { font-size: clamp(13px,1.55vw,19px); font-style: italic; font-weight: 600; line-height: 1.5; color: #8f5c36; }
.tkpn-brand .brand-identity { display: grid; align-items: center; justify-items: center; gap: 3px; min-width: 0; }
.tkpn-brand .brand-logo { width: clamp(100px,11vw,148px); aspect-ratio: 1; height: auto; border-radius: 100%; filter: drop-shadow(0 3px 6px rgba(91,49,19,.16)); }
.tkpn-brand .brand-domain { color: #764a2f; font-size: clamp(10px,.94vw,13px); font-weight: 800; letter-spacing: .005em; }
.tkpn-brand:hover .brand-mantra { color: #a54f2d; }
.nav-strip { background: linear-gradient(100deg, #70371f 0%, #a65c31 63%, #794226 100%); box-shadow: 0 4px 14px rgba(115,55,31,.16); position: relative; z-index: 10; }
.nav-flex { min-height: 60px; display: flex; align-items: stretch; justify-content: space-between; }
.primary-navigation { flex: 1; min-width: 0; }
.menu-list, .menu-list ul { margin: 0; padding: 0; list-style: none; }
.menu-list { display: flex; align-items: stretch; height: 100%; flex-wrap: wrap; }
.menu-list > li { position: relative; display: flex; align-items: stretch; }
.menu-list > li > a { display: flex; align-items: center; padding: 14px 18px; color: #fffaf0; font-weight: 650; font-size: 15px; letter-spacing: .012em; transition: background .2s ease; }
.menu-list > li.current-menu-item > a, .menu-list > li > a:hover, .menu-list > li > a:focus-visible { background: rgba(255,255,255,.15); color: white; }
.menu-list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; max-width: 360px; background: #fffaf2; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 0 0 9px 9px; display: none; z-index: 15; }
.menu-list .sub-menu .sub-menu { left: 100%; top: 0; }
.menu-list li:hover > .sub-menu, .menu-list li:focus-within > .sub-menu { display: block; }
.menu-list .sub-menu li { position: relative; }
.menu-list .sub-menu a { display: block; padding: 11px 16px; color: var(--mahogany); font-weight: 500; border-bottom: 1px solid #f1e5d6; }
.menu-list .sub-menu a:hover { background: #faeddb; }
.nav-toggle { display: none; background: none; color: white; border: 0; padding: 10px 12px; align-items: center; gap: 10px; font-weight: 700; }
.hamburger { display: grid; gap: 4px; }
.hamburger i { display: block; height: 2px; width: 22px; background: white; }
.header-search-toggle { margin-left: auto; background: rgba(255,255,255,.08); border: 0; color: white; width: 60px; display: grid; place-items: center; }
.header-search-toggle:hover { background: rgba(255,255,255,.18); }
.header-search { padding-block: 12px 18px; }
.header-search[hidden] { display: none; }
.site-search-form { display: flex; width: 100%; max-width: 620px; gap: 0; }
.site-search-form input { min-width: 0; width: 100%; padding: 12px 15px; background: #fff; border: 1px solid var(--line); border-radius: 8px 0 0 8px; color: var(--ink); }
.site-search-form button { flex: 0 0 auto; border: 1px solid #a96d3c; padding: 12px 17px; border-radius: 0 8px 8px 0; background: var(--clay); color: white; font-weight: 700; }
.site-search-form button:hover { background: var(--clay-deep); }
/* 1.4.34: single aligned focus border for the header search field + button.
   The global input outline-offset:4px used to draw a detached rectangle. */
.site-header .header-search .site-search-form {
  max-width: 100%;
  display: flex;
  min-width: 0;
  border: 1px solid rgba(229, 194, 151, .58);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.site-header .header-search .site-search-form:focus-within {
  border-color: #e0b371;
  box-shadow: 0 0 0 2px rgba(224, 179, 113, .7);
}
.site-header .header-search .site-search-form input[type="search"] {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  outline-offset: 0;
  box-shadow: none;
  appearance: none;
}
.site-header .header-search .site-search-form input[type="search"]:focus,
.site-header .header-search .site-search-form input[type="search"]:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}
.site-header .header-search .site-search-form button {
  margin: 0;
  border: 0;
  border-left: 1px solid rgba(169, 109, 60, .45);
  border-radius: 0;
}
.site-header .header-search .site-search-form button:focus-visible {
  outline: 2px solid #f9dcae;
  outline-offset: -3px;
}
html[data-tkpn-theme="dark"] .site-header .header-search .site-search-form {
  background: #302725;
  border-color: #715649;
}
html[data-tkpn-theme="dark"] .site-header .header-search .site-search-form:focus-within {
  border-color: #dfb47e;
  box-shadow: 0 0 0 2px rgba(223, 180, 126, .65);
}
/* 1.4.35: keep both placeholder and button label away from the golden frame. */
.site-header .header-search .site-search-form input[type="search"] {
  box-sizing: border-box;
  padding: 12px 20px;
  line-height: 1.5;
}
.site-header .header-search .site-search-form button {
  box-sizing: border-box;
  padding: 12px 24px;
  line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .site-header .header-search .site-search-form input[type="search"] { padding-inline: 15px; }
  .site-header .header-search .site-search-form button { padding-inline: 16px; }
}
.welcome { padding-block: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.welcome-left { white-space: nowrap; color: var(--clay-deep); font-weight: 750; font-size: 14px; letter-spacing: .04em; }
.small-lotus { color: var(--gold); margin-right: 8px; }
.welcome p { margin: 0; font-size: 14px; color: var(--ink-soft); text-align: right; }
.section-pad { padding-block: 78px; }
.section-titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: .15em; font-weight: 800; color: #ae7d44; }
.eyebrow-link { color: var(--clay); font-weight: 750; font-size: 12px; line-height: 1.55; letter-spacing: .045em; text-transform: uppercase; }
.section-titlebar h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 3.1vw, 43px); line-height: 1.22; margin: 0 0 8px; color: var(--mahogany); font-weight: 700; letter-spacing: -.03em; }
.section-titlebar h2 span { color: var(--clay); }
.section-description { margin: 0; color: var(--ink-soft); font-size: 15px; }
.section-more { color: var(--clay-deep); white-space: nowrap; border: 1px solid #ddc5a8; border-radius: 100px; padding: 9px 17px; font-weight: 700; font-size: 13px; background: white; }
.section-more:hover { color: white; background: var(--clay-deep); border-color: var(--clay-deep); }
.video-section { background: radial-gradient(ellipse at 7% 0%, rgba(238, 210, 165, .34), transparent 42%), #fffaf2; }
.video-spotlight { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(290px, .85fr); gap: 22px; align-items: stretch; }
.video-spotlight-hero { min-width: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #56321f; }
.video-poster { position: relative; display: flex; height: 100%; min-height: 398px; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 14px; padding: 42px 45px; overflow: hidden; isolation: isolate; color: #fff9e7; background: radial-gradient(circle at 68% 24%, rgba(221,169,95,.26), transparent 36%), linear-gradient(135deg, #5e3323 5%, #9b542d 62%, #bd8346); }
.video-poster::before, .video-poster::after { content: ""; position: absolute; width: 490px; height: 490px; border: 1px solid rgba(247, 216, 175, .16); border-radius: 50%; z-index: -1; }
.video-poster::before { left: -250px; bottom: -250px; box-shadow: 0 0 0 42px rgba(243,212,173,.028), 0 0 0 100px rgba(243,212,173,.028); }
.video-poster::after { right: -310px; top: -270px; }
.poster-ornament { position: absolute; right: 6%; bottom: -90px; font-size: 400px; font-family: Georgia, serif; color: rgba(255,229,181,.055); line-height: 1; pointer-events: none; }
.hero-play { display: grid; place-items: center; height: 76px; width: 76px; padding-left: 4px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.11); color: #fff; font-size: 24px; box-shadow: 0 0 0 12px rgba(255,255,255,.045); transition: transform .2s ease, background .2s ease; }
.video-poster:hover { color: #fff; }
.video-poster:hover .hero-play { transform: scale(1.08); background: rgba(255,255,255,.22); }
.poster-kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: #f3dbb5; }
.video-poster strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.8vw, 39px); line-height: 1.25; text-wrap: balance; font-weight: 700; }
.video-poster small { font-size: 14px; opacity: .95; }
.video-embed { position: relative; aspect-ratio: 16/9; height: 100%; min-height: 398px; background: #241e17; }
.video-embed iframe, .video-embed video { width: 100% !important; height: 100% !important; position: absolute; inset: 0; }
.video-spotlight-side { background: linear-gradient(180deg, #fff 0%, #fdf9f3 100%); border: 1px solid var(--line); padding: 24px 24px 18px; border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.spotlight-side-head { display: grid; gap: 8px; margin-bottom: 6px; }
.spotlight-side-head h3 { margin: 0; font-family: Georgia, serif; color: var(--mahogany); font-size: 26px; line-height: 1.22; }
.spotlight-side-intro { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.68; }
.series-list-cards { display: grid; gap: 12px; margin-top: 8px; }
.series-link { display: grid; grid-template-columns: 48px minmax(0,1fr) 36px; align-items: center; gap: 14px; padding: 16px 15px; color: var(--ink); background: rgba(255,255,255,.76); border: 1px solid #eadbc8; border-radius: 18px; box-shadow: 0 10px 22px rgba(85, 52, 28, .05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.series-link:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(85, 52, 28, .09); border-color: #d9bb93; background: #fff; }
.series-index { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-family: Georgia, serif; color: #a1703d; font-size: 22px; background: linear-gradient(180deg, #fff5e6 0%, #f6ead8 100%); border: 1px solid #ecd8bd; }
.series-text { min-width: 0; display: grid; gap: 8px; }
.series-text strong { line-height: 1.38; font-size: 18px; color: var(--ink); }
.series-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.series-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #f5ebde; color: var(--clay-deep); font-size: 12px; font-weight: 700; }
.series-meta-note { color: var(--ink-soft); font-size: 12px; }
.series-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid #e8d5be; background: #fff; color: #9a6c3b; font-size: 16px; transition: transform .18s ease, background .18s ease, color .18s ease; }
.series-link:hover .series-arrow { transform: translateX(2px); background: var(--clay-deep); color: #fff; }
.series-link:hover .series-text strong { color: var(--clay); }
.transition-note { margin-top: auto; padding-top: 12px; border-top: 1px solid #f2e9df; font-size: 12px; line-height: 1.65; color: #9d8571; }
.video-grid { display: grid; gap: 18px; grid-template-columns: 1.5fr 1fr 1fr; }
.video-slot-featured { grid-row: span 2; }
.video-slot:not(.video-slot-featured):last-child { grid-column: 2 / span 2; }
.video-card { height: 100%; overflow: hidden; border-radius: var(--radius); background: white; box-shadow: var(--shadow); border: 1px solid var(--line); }
.video-card-art { background: linear-gradient(135deg, #583222, #b87440); min-height: 170px; aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; }
.video-card-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .25s ease; }
.video-card-art:hover img { transform: scale(1.04); }
.video-card-pattern { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 165px Georgia,serif; color: rgba(255,255,255,.08); }
.play-circle { display: grid; place-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,250,241,.95); color: var(--clay-deep); border-radius: 50%; width: 58px; height: 58px; padding-left: 3px; font-size: 18px; box-shadow: 0 5px 25px rgba(0,0,0,.12); }
.video-card-info { padding: 14px 17px 18px; }
.video-card h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.video-card h3 a { color: var(--ink); }
.video-card h3 a:hover { color: var(--clay); }
.video-slot-featured .video-card-art { min-height: 300px; }
.video-slot-featured .video-card-info { padding: 22px 24px; }
.video-slot-featured .video-card h3 { font-size: 23px; }
.reading-section { background: #fff; }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.post-card { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 5px 21px rgba(97,68,40,.04); transition: box-shadow .2s ease, transform .2s ease; }
.post-card:hover { box-shadow: 0 14px 38px rgba(97,68,40,.11); transform: translateY(-2px); }
.post-card-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: #f0dfca; }
.post-card-image img { height: 100%; width: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card-image img { transform: scale(1.03); }
.post-card-pattern { display: flex; height: 100%; align-items: center; justify-content: center; color: rgba(141,76,45,.27); font-family: Georgia,serif; font-size: 120px; background: radial-gradient(ellipse at 20% 80%, rgba(217,175,106,.4), transparent 55%), linear-gradient(120deg,#f6eadb,#fbf6eb 60%,#f1debf); }
.post-card-info { padding: 20px 21px 19px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { margin: 7px 0 9px; font-family: Georgia, "Times New Roman", serif; color: var(--mahogany); font-size: clamp(17px,1.55vw,21px); line-height: 1.45; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--clay); }
.post-card-excerpt { color: var(--ink-soft); margin: 0 0 21px; font-size: 14px; line-height: 1.75; flex: 1; }
.post-card-bottom { padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #f0e6db; color: #887666; font-size: 12px; }
.read-more { font-weight: 700; color: var(--clay); white-space: nowrap; }
.topics-section { background: linear-gradient(180deg, #fcf7ef, #faf2e8); border-top: 1px solid #f4e9d9; }
.topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.topic-item { display: flex; align-items: center; gap: 15px; padding: 20px; background: #fff; border: 1px solid #eee0cc; box-shadow: 0 5px 15px rgba(81,58,31,.035); border-radius: 12px; color: var(--ink); min-height: 95px; transition: border-color .15s ease, transform .15s ease; }
.topic-item:hover { border-color: #c49b68; transform: translateY(-2px); }
.topic-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; color: #b88e57; background: #fcf1e1; border-radius: 50%; font-size: 25px; }
.topic-name { flex: 1; font-weight: 700; line-height: 1.42; }
.topic-arrow { color: #b7a28a; }
.closing-band { background: linear-gradient(90deg, #713b29, #a76337); color: white; }
.closing-band-inner { display: flex; align-items: center; gap: 23px; padding-block: 26px; }
.closing-band-inner > span { font-size: 65px; opacity: .5; }
.closing-band h2 { font: bold 25px Georgia,serif; color: white; margin: 0 0 4px; }
.closing-band p { margin: 0; color: #f8e5d4; font-size: 14px; }
.closing-band a { margin-left: auto; border: 1px solid rgba(255,255,255,.58); border-radius: 100px; color: white; padding: 9px 18px; font-weight: 700; white-space: nowrap; }
.closing-band a:hover { background: white; color: var(--clay-deep); }
.site-footer { background: #382920; color: #dfd0c4; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr; gap: 70px; padding-block: 64px; }
.footer-lotus { color: #d2a469; font-size: 34px; }
.site-footer h2, .site-footer h3 { color: #fff6e9; margin: 0 0 14px; }
.site-footer h2 { font: 28px Georgia,serif; }
.site-footer h3 { font-size: 16px; }
.site-footer p { margin: 6px 0; color: #cfbcad; font-size: 14px; }
.site-footer .footer-invocation { color: #dbb779; font: 22px Georgia,serif; margin-top: 20px; }
.footer-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu li { margin-block: 7px; }
.site-footer a { color: #f2e1d1; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* 1.4.37 — Footer search: keep field and submit button on the same row,
   even on narrow mobile screens; do not alter the header search form. */
.site-footer .footer-search { min-width: 0; }
.site-footer .site-search-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 9px;
}
.site-footer .site-search-form input[type="search"] {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 7px;
}
.site-footer .site-search-form button[type="submit"] {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 7px;
}
@media (max-width: 390px) {
  .site-footer .site-search-form { gap: 7px; }
  .site-footer .site-search-form input[type="search"] { padding-inline: 11px; }
  .site-footer .site-search-form button[type="submit"] { padding-inline: 12px; }
}
.footer-bottom { border-top: 1px solid rgba(255,255,255,.13); padding-block: 17px 23px; display: flex; justify-content: space-between; align-items: center; color: #b4a295; font-size: 12px; }
/* Archives, search, single posts — wide layout without right sidebar. */
.archive-main { padding-top: 33px; padding-bottom: 90px; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #8a7969; padding: 6px 0 24px; }
.breadcrumbs a { color: #926a4e; }
.breadcrumbs [aria-current=page] { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.archive-head h1 { font: bold clamp(32px,4vw,51px)/1.24 Georgia,"Times New Roman",serif; color: var(--mahogany); margin: 8px 0 16px; }
.archive-description { font-size: 16px; color: var(--ink-soft); }
.archive-description p { margin: 0; }
.archive-head .site-search-form { margin: 25px auto 0; }
.pagination { text-align: center; margin: 42px 0; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { padding: 8px 13px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--mahogany); }
.pagination .page-numbers.current { background: var(--clay); color: #fff; border-color: var(--clay); }
.empty-state { max-width: 780px; padding: 50px 30px; margin: 0 auto; text-align: center; border: 1px solid var(--line); background: var(--ivory); border-radius: var(--radius); color: var(--ink-soft); }
.empty-state .site-search-form { margin: 24px auto 0; }
.reading-main { padding-top: 27px; padding-bottom: 100px; }
.reading-article { max-width: var(--reading-width); margin: 0 auto; }
.reading-header { text-align: center; padding-top: 30px; margin-bottom: 50px; }
.reading-header h1 { font-family: Georgia, "Times New Roman", serif; color: var(--mahogany); font-weight: 700; font-size: clamp(33px, 4.25vw, 54px); line-height: 1.29; letter-spacing: -.025em; margin: 15px auto 17px; max-width: 850px; }
.reading-meta { font-size: 13px; color: #918170; }
.meta-separator { padding-inline: 10px; color: #d8c5b1; }
.reading-cover { text-align: center; margin: 0 0 34px; }
.reading-cover img { border-radius: 11px; max-height: 570px; object-fit: contain; }
.reading-body { color: #302e2c; font-size: clamp(18px, 1.7vw, 20px); line-height: 1.85; overflow-wrap: anywhere; }
.reading-body p { margin: 0 0 1.3em; }
.reading-body strong, .reading-body b { font-weight: 700; }
.reading-body em, .reading-body i { font-style: italic; }
.reading-body h2, .reading-body h3, .reading-body h4 { color: var(--mahogany); font-family: Georgia,serif; line-height: 1.4; margin: 1.8em 0 .7em; }
.reading-body h2 { font-size: 1.55em; }
.reading-body h3 { font-size: 1.3em; }
.reading-body ul, .reading-body ol { padding-left: 1.5em; }
.reading-body blockquote { border-left: 3px solid #bb8950; padding: .7em 1.3em; margin: 1.8em 0; background: #fff8ec; color: #675240; }
.reading-body a { text-decoration: underline; text-underline-offset: 3px; }
.reading-body img { max-width: 100%; height: auto; border-radius: 7px; }
.reading-body figure { max-width: 100%; }
.reading-body pre { overflow-x: auto; max-width: 100%; }
.reading-body .wp-block-embed, .reading-body .wp-block-video { max-width: 100%; }
.reading-body iframe { max-width: 100%; }
.reading-end { margin-top: 54px; padding: 28px 0; border-top: 1px solid var(--line); text-align: center; color: #85725e; }
.end-lotus { font-size: 36px; color: var(--gold); line-height: 1.1; }
.reading-end p { margin: 5px 0 16px; font: italic 22px Georgia,serif; color: var(--clay); }
.reading-cats { font-size: 14px; }
.reading-cats a { color: var(--clay); }
.post-nav { max-width: var(--reading-width); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.post-nav-link a { display: flex; flex-direction: column; height: 100%; gap: 7px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.post-nav-link a:hover { background: var(--ivory); }
.post-nav-link small { color: #8a7866; }
.post-nav-link strong { font-size: 15px; line-height: 1.5; color: var(--mahogany); }
.post-nav-link.next { text-align: right; }
.comments-area { max-width: var(--reading-width); margin: 70px auto 0; }
.comments-area textarea { max-width: 100%; }
.notfound { text-align: center; padding: 95px 0 135px; }
.notfound-icon { font-size: 80px; color: var(--gold); }
.notfound h1 { font: 44px Georgia,serif; color: var(--mahogany); }
.notfound p { color: var(--ink-soft); }
.notfound .site-search-form { margin: 25px auto; }
.button-primary { display: inline-block; background: var(--clay); border-radius: 30px; padding: 10px 24px; color: white; }
.button-primary:hover { background: var(--clay-deep); color: white; }
/* Tablet */
@media (max-width: 1100px) {
  .wrap { width: min(100% - 44px, 1320px); }
  .menu-list > li > a { padding-inline: 12px; font-size: 14px; }
  .video-spotlight { grid-template-columns: minmax(0,1.15fr) minmax(290px,.9fr); }
  .series-link { padding-block: 12px; }
  .video-poster { min-height: 360px; padding: 30px; }
  .footer-grid { gap: 32px; }
}
@media (max-width: 820px) {
  .wrap { width: min(100% - 36px, 1320px); }
  .topline-right { display: none; }
  .nav-flex { min-height: 54px; position: relative; }
  .nav-toggle { display: flex; }
  .primary-navigation { display: none; position: absolute; z-index: 25; width: 100%; left: 0; top: 100%; background: #754329; box-shadow: 0 16px 28px rgba(54,31,18,.19); max-height: 70vh; overflow: auto; }
  .primary-navigation.is-open { display: block; }
  .menu-list { display: block; }
  .menu-list > li { display: block; border-top: 1px solid rgba(255,255,255,.12); }
  .menu-list > li > a { display: block; padding: 14px 17px; }
  .menu-list .sub-menu, .menu-list .sub-menu .sub-menu { display: none !important; position: static; max-width: none; box-shadow: none; background: #8c5438; border: 0; border-radius: 0; }
  .menu-list li.submenu-expanded > .sub-menu { display: block !important; }
  .menu-list .sub-menu a { color: #fff6eb; padding-left: 27px; border-color: rgba(255,255,255,.12); }
  .menu-list .sub-menu a:hover { color: white; background: rgba(255,255,255,.08); }
  .header-search-toggle { width: 57px; }
  .welcome { align-items: start; flex-direction: column; gap: 5px; }
  .welcome p { text-align: left; }
  .section-pad { padding-block: 58px; }
  .video-spotlight { grid-template-columns: 1fr; }
  .video-spotlight-side { padding: 24px; }
  .video-poster { min-height: 355px; }
  .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .video-slot-featured { grid-column: span 2; grid-row: auto; }
  .video-slot:not(.video-slot-featured):last-child { grid-column: auto; }
  .video-slot-featured .video-card-art { min-height: 320px; }
  .posts-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-search { grid-column: 1 / -1; }
  .reading-header { margin-bottom: 38px; }
}
/* Mobile */
@media (max-width: 580px) {
  .wrap { width: min(100% - 28px, 1320px); }
  .topline { padding-block: 6px; font-size: 11px; }
  .hero-wrap { padding-bottom: 12px; }
  .welcome { padding-block: 16px; }
  .welcome p { font-size: 12px; }
  .section-pad { padding-block: 43px; }
  .section-titlebar { gap: 15px; flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .section-titlebar h2 { font-size: 31px; }
  .section-description { font-size: 14px; }
  .section-more { font-size: 12px; }
  .video-poster { min-height: 300px; padding: 24px; }
  .poster-ornament { font-size: 300px; }
  .hero-play { width: 62px; height: 62px; font-size: 19px; }
  .video-poster strong { font-size: 28px; }
  .video-embed { min-height: 230px; }
  .video-spotlight-side { padding: 19px; }
  .series-text strong { font-size: 14px; }
  .video-grid, .posts-grid, .topic-grid { grid-template-columns: 1fr; }
  .video-slot-featured { grid-column: auto; }
  .video-slot-featured .video-card-art { min-height: 200px; }
  .post-card-image { aspect-ratio: 16/8; }
  .post-card-info { padding: 18px; }
  .post-card h3 { font-size: 20px; }
  .topic-item { min-height: 78px; padding: 15px; }
  .closing-band-inner { flex-wrap: wrap; gap: 9px; padding-block: 25px; }
  .closing-band-inner > span { font-size: 42px; }
  .closing-band h2 { font-size: 19px; }
  .closing-band p { font-size: 12px; }
  .closing-band a { margin-left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-block: 48px; }
  .footer-search { grid-column: auto; }
  .footer-bottom { gap: 14px; flex-wrap: wrap; }
  .archive-main, .reading-main { padding-top: 16px; padding-bottom: 55px; }
  .breadcrumbs { font-size: 12px; }
  .archive-head { margin-bottom: 28px; }
  .archive-head h1 { font-size: 33px; }
  .reading-header { padding-top: 12px; margin-bottom: 31px; }
  .reading-header h1 { font-size: clamp(30px,8vw,40px); }
  .reading-body { font-size: 18px; line-height: 1.84; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { text-align: left; }
  .reading-end { margin-top: 34px; }
  .notfound { padding: 50px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.video-archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.single-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #261c17; border-radius: 12px; overflow: hidden; margin-bottom: 34px; }
.single-video-embed iframe, .single-video-embed video { width: 100% !important; height: 100% !important; position: absolute; inset: 0; }
.external-video-link { text-align: center; margin: 0 0 35px; }
@media(max-width:820px) { .video-archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .video-archive-grid { grid-template-columns: 1fr; } }

/* 1.1.0 responsive identity overrides after general media rules. */
@media (min-width: 821px) and (max-width: 1140px) {
  .brand-banner.tkpn-brand { min-height: 201px; grid-template-columns: 186px minmax(0,1fr) 110px; padding-right: 14px; gap: 4px; }
  .tkpn-brand .brand-portrait { height: 190px; }
  .tkpn-brand .brand-portrait img { width: 259px; }
  .tkpn-brand .brand-overline { letter-spacing: .09em; }
  .tkpn-brand .brand-logo { width: 102px; }
  .tkpn-brand .brand-domain { font-size: 10px; }
}
@media (max-width: 820px) {
  .brand-banner.tkpn-brand { min-height: 188px; grid-template-columns: 148px minmax(0,1fr) 98px; gap: 5px; padding: 10px 10px 8px 0; border-radius: 12px; }
  .tkpn-brand .brand-portrait { height: 178px; }
  .tkpn-brand .brand-portrait img { width: 245px; }
  .tkpn-brand .brand-overline { font-size: 13px; letter-spacing: .07em; }
  .tkpn-brand .brand-mantra { font-size: clamp(31px,5.7vw,45px); }
  .tkpn-brand .brand-logo { width: 91px; }
  .tkpn-brand .brand-domain { display: none; }
  .tkpn-brand .brand-message { font-size: 13px; }
}
@media (max-width: 580px) {
  .brand-banner.tkpn-brand { display: flex; min-height: 161px; padding: 15px 10px 15px 0; align-items: center; justify-content: flex-start; gap: 0; border-radius: 11px; }
  .tkpn-brand .brand-portrait { height: 153px; width: 26%; min-width: 86px; align-self: end; flex: 0 0 26%; }
  .tkpn-brand .brand-portrait img { width: 142px; left: -20px; }
  .tkpn-brand .brand-copy { flex: 1 1 auto; align-items: flex-start; text-align: left; padding: 8px 6px; gap: 2px; }
  .tkpn-brand .brand-overline { font-size: clamp(9px,2.55vw,12px); letter-spacing: .025em; }
  .tkpn-brand .brand-invocation { font-size: 11px; margin-top: 5px; }
  .tkpn-brand .brand-mantra { font-size: clamp(24px,6.2vw,36px); white-space: normal; line-height: 1.13; }
  .tkpn-brand .brand-message { font-size: clamp(10px,2.55vw,13px); line-height: 1.35; }
  .tkpn-brand .brand-identity { width: 50px; align-self: flex-start; flex: 0 0 50px; padding-top: 0; }
  .tkpn-brand .brand-logo { width: 50px; }
}
@media (max-width: 390px) {
  .tkpn-brand .brand-portrait { flex-basis: 22%; min-width: 69px; }
  .tkpn-brand .brand-portrait img { width: 125px; left: -19px; }
  .tkpn-brand .brand-logo { width: 42px; }
  .tkpn-brand .brand-identity { flex-basis: 42px; width: 42px; }
  .tkpn-brand .brand-mantra { font-size: 25px; }
  .tkpn-brand .brand-overline { font-size: 9px; }
}



/* === TKPN Thanh Tịnh A 1.3.0 — full-bleed, logo left, no duplicated banner text === */
.hero-final { position: relative; isolation: isolate; min-height: 340px; overflow: hidden; color: #fff7e9; background: #87492e; }
.hero-final .hero-full-bg { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(61,29,21,.32), rgba(79,37,22,.09) 55%, rgba(80,37,24,.04)), url('../images/hero-tkpn-background.webp') center / cover no-repeat; }
.hero-final::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 32px; z-index: -1; background: linear-gradient(transparent, rgba(66,32,19,.18)); pointer-events: none; }
.hero-final .hero-full-inner { position: relative; min-height: 340px; display: grid; grid-template-columns: minmax(150px, 210px) minmax(0,1fr) minmax(200px,300px); gap: clamp(16px, 2.8vw, 54px); align-items: center; padding-block: 28px; }
.hero-final .hero-logo-link { display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center; color: #fff2df; min-width: 0; text-align: center; }
.hero-final .hero-logo { display: block; width: clamp(105px, 10vw, 145px); height: auto; border-radius: 50%; filter: drop-shadow(0 5px 15px rgba(0,0,0,.19)); }
.hero-final .hero-logo-domain { color: #fff1d7; font-size: clamp(10px, .83vw, 12px); font-weight: 750; letter-spacing: .025em; text-shadow: 0 2px 8px rgba(0,0,0,.24); overflow-wrap: anywhere; }
.hero-final .hero-copy { z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 0; text-shadow: 0 3px 18px rgba(46,22,14,.25); }
.hero-final .hero-overline { color: #ffeaca; font-size: clamp(13px, 1.4vw, 18px); font-weight: 700; letter-spacing: .16em; }
.hero-final .hero-small { margin-top: 12px; color: #fff3da; font-size: clamp(14px, 1.4vw, 19px); }
.hero-final .hero-mantra { color: #fff8eb; font: 700 clamp(39px, 5.2vw, 72px)/1.16 Georgia, 'Times New Roman', serif; letter-spacing: -.022em; white-space: nowrap; }
.hero-final .hero-quote { color: #ffedcf; font-size: clamp(15px, 1.55vw, 21px); font-style: italic; line-height: 1.5; }
.hero-final .hero-portrait-wrap { position: absolute; right: 0; bottom: 0; width: min(29vw, 340px); display: flex; align-items: end; justify-content: end; pointer-events: none; }
.hero-final .hero-portrait-wrap picture { display: block; width: 100%; }
.hero-final .hero-portrait-wrap img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(-12px 5px 22px rgba(57,25,14,.17)); -webkit-mask-image: radial-gradient(ellipse at 64% 60%, #000 38%, transparent 78%); mask-image: radial-gradient(ellipse at 64% 60%, #000 38%, transparent 78%); }
/* Keep text and portrait apart at compact desktop widths. */
@media (max-width: 1160px) {
 .hero-final .hero-full-inner { grid-template-columns: 145px minmax(0,1fr) minmax(145px,215px); gap: 24px; min-height: 296px; }
 .hero-final { min-height: 296px; }
 .hero-final .hero-portrait-wrap { width: 25vw; }
 .hero-final .hero-mantra { font-size: clamp(36px, 4.9vw, 56px); }
 .hero-final .hero-overline { letter-spacing: .075em; }
}
@media (max-width: 800px) {
 .hero-final { min-height: auto; }
 .hero-final .hero-full-inner { grid-template-columns: 120px minmax(0,1fr); gap: 23px; min-height: 285px; padding-block: 30px; }
 .hero-final .hero-logo { width: 112px; }
 .hero-final .hero-portrait-wrap { width: 230px; right: -45px; opacity: .20; z-index: 0; }
 .hero-final .hero-mantra { font-size: clamp(37px, 5.5vw, 52px); white-space: normal; }
 .hero-final .hero-copy { z-index: 2; }
}
@media (max-width: 580px) {
 .hero-final .hero-full-inner { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding-block: 21px 26px; }
 .hero-final .hero-logo { width: 84px; }
 .hero-final .hero-logo-domain { font-size: 10px; }
 .hero-final .hero-copy { align-items: center; text-align: center; gap: 4px; max-width: 100%; }
 .hero-final .hero-overline { font-size: 12px; letter-spacing: .11em; }
 .hero-final .hero-small { margin-top: 3px; font-size: 13px; }
 .hero-final .hero-mantra { font-size: clamp(35px, 10.2vw, 48px); }
 .hero-final .hero-quote { font-size: 14px; }
 .hero-final .hero-portrait-wrap { width: 180px; right: -42px; bottom: -12px; opacity: .13; }
}
/* Only paragraph text of normal single posts is justified. No headings, menus, lists, cards or captions. */
body.single-post .reading-article .reading-body > p,
body.single-post .reading-article .reading-body .wp-block-paragraph {
 text-align: justify;
 text-justify: inter-word;
}
@media (max-width: 580px) {
 body.single-post .reading-article .reading-body p { text-align: justify; }
}

/* === TKPN A 1.3.1 portrait refinement === */
.hero-final .hero-portrait-wrap { width: min(31vw, 355px); right: 0; bottom: 0; }
.hero-final .hero-portrait-wrap img {
  transform: scaleX(-1);
  transform-origin: center bottom;
  filter: drop-shadow(10px 6px 20px rgba(57,25,14,.13));
  opacity: .94;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 42%, rgba(0,0,0,.96) 56%, rgba(0,0,0,.82) 68%, rgba(0,0,0,.45) 82%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 42%, rgba(0,0,0,.96) 56%, rgba(0,0,0,.82) 68%, rgba(0,0,0,.45) 82%, transparent 100%);
}
@media (max-width: 1160px) {
  .hero-final .hero-portrait-wrap { width: min(27vw, 290px); }
}
@media (max-width: 800px) {
  .hero-final .hero-portrait-wrap { width: 225px; right: -35px; opacity: .22; }
  .hero-final .hero-portrait-wrap img { opacity: .86; }
}
@media (max-width: 580px) {
  .hero-final .hero-portrait-wrap { width: 170px; right: -34px; bottom: -8px; opacity: .14; }
  .hero-final .hero-portrait-wrap img { opacity: .8; }
}

/* TKPN Thanh Tịnh A v1.3.2 — new frontal portrait supplied by site owner. */
.hero-final .hero-portrait-wrap {
  right: max(-8px, calc((1320px - 100vw) / 9));
  bottom: 0;
  width: clamp(260px, 30vw, 400px);
  height: 100%;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}
.hero-final .hero-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transform: none;
  opacity: .92;
  filter: saturate(.92) sepia(.08);
  /* Fade the left edge toward the banner center; fade the top/bottom too. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.14) 17%, rgba(0,0,0,.65) 43%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.14) 17%, rgba(0,0,0,.65) 43%, #000 78%);
}
@media (max-width: 1160px) {
  .hero-final .hero-portrait-wrap { width: clamp(225px,28vw,300px); right: 0; }
}
@media (max-width: 800px) {
  .hero-final .hero-portrait-wrap { width: 245px; right: -30px; opacity: .24; }
  .hero-final .hero-portrait-wrap img { object-position: center 14%; }
}
@media (max-width: 580px) {
  .hero-final .hero-portrait-wrap { width: 190px; right: -28px; bottom: 0; opacity: .16; }
}

/* TKPN 1.3.3 — chân dung gắn vào TOÀN BỘ banner, không vào .wrap.
   Ghi đè dứt khoát mọi opacity/mask từ các phiên bản trước. */
.hero-final { isolation: isolate; }
.hero-final > .hero-portrait-wrap {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: clamp(300px, 31vw, 490px);
  height: 100%;
  margin: 0;
  opacity: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  isolation: auto;
}
.hero-final > .hero-portrait-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 19%;
  opacity: 1;
  transform: none;
  filter: none;
  /* mép trái tan dần vào nền, khuôn mặt và mép phải vẫn rõ */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.24) 16%, rgba(0,0,0,.84) 38%, #000 56%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.24) 16%, rgba(0,0,0,.84) 38%, #000 56%);
}
.hero-final > .hero-full-inner { z-index: 1; }
@media(max-width:1160px) {
  .hero-final > .hero-portrait-wrap { width: clamp(250px, 32vw, 360px); right: 0; opacity: 1; }
}
@media(max-width:800px) {
  .hero-final > .hero-portrait-wrap { width: clamp(185px, 37vw, 260px); right: 0; opacity: .45; }
}
@media(max-width:580px) {
  .hero-final > .hero-portrait-wrap { width: min(45vw, 210px); right: 0; opacity: .32; }
}


/* TKPN 1.3.4 — portrait fix for IIS/JPG */
.hero-final > .hero-portrait-wrap {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: auto;
  width: clamp(320px, 32vw, 500px);
  height: 100%;
  z-index: 0;
  overflow: hidden;
  opacity: 1 !important;
  pointer-events: none;
}
.hero-final > .hero-portrait-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 18%, rgba(0,0,0,.88) 42%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 18%, rgba(0,0,0,.88) 42%, #000 58%);
}
.hero-final > .hero-full-inner { position: relative; z-index: 1; }
@media (max-width: 1160px) {
  .hero-final > .hero-portrait-wrap { width: clamp(260px, 31vw, 380px); }
}
@media (max-width: 800px) {
  .hero-final > .hero-portrait-wrap { width: clamp(185px, 36vw, 260px); opacity: .55 !important; }
  .hero-final > .hero-portrait-wrap > img { object-position: 55% center; }
}
@media (max-width: 580px) {
  .hero-final > .hero-portrait-wrap { width: min(46vw, 210px); opacity: .38 !important; }
}


/* TKPN 1.3.5 — show full portrait head */
.hero-final > .hero-portrait-wrap {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: auto;
  width: clamp(300px, 31vw, 470px);
  height: 100%;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 1 !important;
}
.hero-final > .hero-portrait-wrap > img {
  display: block;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.80) 40%, #000 58%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.80) 40%, #000 58%);
}
@media (max-width: 1160px) {
  .hero-final > .hero-portrait-wrap { width: clamp(250px, 29vw, 370px); }
}
@media (max-width: 860px) {
  .hero-final > .hero-portrait-wrap { width: clamp(190px, 33vw, 250px); opacity: .58 !important; }
  .hero-final > .hero-portrait-wrap > img { height: 96% !important; }
}
@media (max-width: 580px) {
  .hero-final > .hero-portrait-wrap { width: min(42vw, 185px); opacity: .42 !important; }
  .hero-final > .hero-portrait-wrap > img { height: 92% !important; }
}


/* === TKPN 1.4.0: Full-HD friendly reading & light/dark mode === */
:root { --reading-width: 1200px; color-scheme: light; }
body.single-post .reading-main.wrap { width: min(calc(100% - 72px), 1500px); }
body.single-post .reading-article,
body.single-post .post-nav,
body.single-post .comments-area { width: min(100%, var(--reading-width)); max-width: var(--reading-width); }
body.single-post .reading-header h1 { max-width: 1150px; }
body.single-post .reading-body { font-size: clamp(18px, 1.12vw, 20px); line-height: 1.9; }
body.single-post .reading-body p,
body.single-post .reading-body .wp-block-paragraph { text-align: justify; text-justify: inter-word; }
@media (min-width: 1600px) {
  :root { --reading-width: 1240px; }
}
@media (max-width: 820px) {
  :root { --reading-width: 100%; }
  body.single-post .reading-main.wrap { width: min(calc(100% - 36px), 100%); }
  body.single-post .reading-body { font-size: 18px; line-height: 1.83; }
}
@media (max-width: 580px) {
  body.single-post .reading-main.wrap { width: calc(100% - 28px); }
  body.single-post .reading-body { font-size: 17px; line-height: 1.83; }
}
.tkpn-theme-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 9px 12px; border: 0; border-left: 1px solid rgba(255,255,255,.15);
  background: transparent; color: #fff7e9; font: inherit; font-size: 13px; font-weight: 650;
}
.tkpn-theme-toggle:hover, .tkpn-theme-toggle:focus-visible { background: rgba(255,255,255,.14); }
.tkpn-theme-toggle .theme-sun { display:none; }
[data-tkpn-theme="dark"] .tkpn-theme-toggle .theme-sun { display:block; }
[data-tkpn-theme="dark"] .tkpn-theme-toggle .theme-moon { display:none; }
@media (max-width: 1060px) { .theme-toggle-label { display:none; } .tkpn-theme-toggle { padding-inline: 15px; } }
/* Refine portrait within the edge-to-edge hero without cutting the head. */
.hero-final > .hero-portrait-wrap { right:0; top:0; bottom:0; width: clamp(300px, 28vw, 460px); height:100%; opacity:1!important; }
.hero-final > .hero-portrait-wrap > img {
  width:auto!important; height:100%!important; max-width:none!important;
  object-fit:contain!important; object-position:right bottom!important;
  transform:none!important; opacity:1!important;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 20%, #000 51%)!important;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 20%, #000 51%)!important;
}
@media (max-width: 860px) {
 .hero-final > .hero-portrait-wrap { width: min(34vw, 245px); opacity:.38!important; }
}
@media (max-width: 580px) {
 .hero-final > .hero-portrait-wrap { width:min(44vw, 190px); opacity:.19!important; }
}
/* Dark reader palette: no change to saved posts or WordPress admin. */
html[data-tkpn-theme="dark"] {
 color-scheme: dark;
 --clay:#d59a66; --clay-deep:#f0b77e; --mahogany:#f2dbbc;
 --gold:#dfb57b; --gold-light:#ad8657; --paper:#211b19; --ivory:#211b19;
 --surface:#292321; --ink:#eee4d7; --ink-soft:#c6b5a2; --line:#4a3d36;
 --shadow:0 9px 30px rgba(0,0,0,.26);
}
html[data-tkpn-theme="dark"] body { background:#171514; color:var(--ink); }
html[data-tkpn-theme="dark"] .site-header { background:#221b18; }
html[data-tkpn-theme="dark"] .topline,
html[data-tkpn-theme="dark"] .welcome,
html[data-tkpn-theme="dark"] .reading-section,
html[data-tkpn-theme="dark"] .archive-main,
html[data-tkpn-theme="dark"] .reading-main { background:#171514; }
html[data-tkpn-theme="dark"] .topline-home,
html[data-tkpn-theme="dark"] .topline-right,
html[data-tkpn-theme="dark"] .breadcrumbs,
html[data-tkpn-theme="dark"] .reading-meta,
html[data-tkpn-theme="dark"] .post-card-excerpt,
html[data-tkpn-theme="dark"] .section-description,
html[data-tkpn-theme="dark"] .welcome p { color:var(--ink-soft); }
html[data-tkpn-theme="dark"] .video-section,
html[data-tkpn-theme="dark"] .topics-section { background:#211b19; border-color:var(--line); }
html[data-tkpn-theme="dark"] .post-card,
html[data-tkpn-theme="dark"] .video-card,
html[data-tkpn-theme="dark"] .video-spotlight-side,
html[data-tkpn-theme="dark"] .topic-item,
html[data-tkpn-theme="dark"] .pagination .page-numbers,
html[data-tkpn-theme="dark"] .section-more,
html[data-tkpn-theme="dark"] .empty-state,
html[data-tkpn-theme="dark"] .post-nav-link a { background:#292321; border-color:var(--line); color:var(--ink); }
html[data-tkpn-theme="dark"] .post-card h3,
html[data-tkpn-theme="dark"] .post-card h3 a,
html[data-tkpn-theme="dark"] .post-nav-link strong,
html[data-tkpn-theme="dark"] .series-text strong,
html[data-tkpn-theme="dark"] .topic-name,
html[data-tkpn-theme="dark"] .reading-body,
html[data-tkpn-theme="dark"] .reading-header h1 { color:var(--ink); }
html[data-tkpn-theme="dark"] .reading-body blockquote { background:#2d251f; color:#eed5b7; }
html[data-tkpn-theme="dark"] .site-footer { background:#15100e; }
html[data-tkpn-theme="dark"] .closing-band { background:linear-gradient(90deg,#3d261f,#693c2b); }
html[data-tkpn-theme="dark"] .nav-strip { background:linear-gradient(95deg,#4e2b20,#6e3b28); }
html[data-tkpn-theme="dark"] .menu-list .sub-menu { background:#2b221e; border-color:var(--line); }
html[data-tkpn-theme="dark"] .menu-list .sub-menu a { color:var(--ink); border-color:var(--line); }
html[data-tkpn-theme="dark"] .menu-list .sub-menu a:hover,
html[data-tkpn-theme="dark"] .post-nav-link a:hover { background:#403027; }
html[data-tkpn-theme="dark"] input,
html[data-tkpn-theme="dark"] textarea,
html[data-tkpn-theme="dark"] select { background:#302725; color:#f5ece1; border-color:#625247; }
html[data-tkpn-theme="dark"] .post-card-pattern,
html[data-tkpn-theme="dark"] .video-card-art { background:linear-gradient(125deg,#38261e,#70452e); }
html[data-tkpn-theme="dark"] .topic-icon { background:#3a2e25; color:#e0b77a; }
html[data-tkpn-theme="dark"] .video-spotlight-side .series-link,
html[data-tkpn-theme="dark"] .post-card-bottom { border-color:var(--line); }
html[data-tkpn-theme="dark"] .reading-body a,
html[data-tkpn-theme="dark"] .reading-cats a,
html[data-tkpn-theme="dark"] .breadcrumbs a { color:#edb780; }
html[data-tkpn-theme="dark"] .reading-end { color:#c5aa8e; }
html[data-tkpn-theme="dark"] .reading-end p { color:#e6b980; }
html[data-tkpn-theme="dark"] .primary-navigation { --mobile-menu-dark:#33241f; }
@media(max-width:820px) {
 html[data-tkpn-theme="dark"] .primary-navigation { background:#33241f; }
 html[data-tkpn-theme="dark"] .menu-list .sub-menu { background:#4a2c22; }
}


/* TKPN 1.4.1 — align slogan under mantra */
@media (min-width: 581px) {
  .hero-final .hero-copy {
    width: fit-content;
    max-width: 100%;
  }
  .hero-final .hero-quote {
    align-self: flex-end;
    text-align: right;
    width: auto;
    max-width: 100%;
    margin-top: 2px;
  }
}
@media (max-width: 580px) {
  .hero-final .hero-quote {
    align-self: center;
    text-align: center;
  }
}

/* TKPN 1.4.6 — một mẫu hoa sen thống nhất; không chồng các bản CSS cũ */
.post-card-image, .video-card-art { position: relative; overflow: hidden; }
.post-card-image .post-card-pattern.lotus-placeholder,
.video-card-art .video-card-pattern.lotus-placeholder {
    position: absolute; inset: 0;
    display: block; z-index: 1;
    background: #f7eadb url('../images/lotus-clean-v146.jpg') center center / cover no-repeat;
    color: transparent; font-size: 0;
    filter: none;
}
.post-card-image .post-card-pattern.lotus-placeholder::before,
.video-card-art .video-card-pattern.lotus-placeholder::before { display: none; content: none; }
.post-card-image img, .video-card-art img {
    position: absolute; inset: 0; z-index: 2;
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.post-card-image.thumb-error img,
.video-card-art.thumb-error img { display: none; }
html[data-tkpn-theme="dark"] .post-card-image .post-card-pattern.lotus-placeholder,
html[data-tkpn-theme="dark"] .video-card-art .video-card-pattern.lotus-placeholder {
    background: #3e2c25 url('../images/lotus-clean-v146.jpg') center center / cover no-repeat;
    filter: brightness(.78);
}

/* TKPN 1.4.7 — cùng biểu tượng hoa sen cho chuyên đề, dải lời nhắc, footer và Video.
   Không can thiệp ảnh đại diện/placeholder của các thẻ bài viết. */
.tkpn-lotus-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  background: #b88e57;
  -webkit-mask: url('../images/lotus-ornament.svg') center / contain no-repeat;
  mask: url('../images/lotus-ornament.svg') center / contain no-repeat;
}
.topic-item .topic-icon .tkpn-lotus-mark { width: 26px; height: 23px; background: #b88e57; }
.closing-band-inner > .closing-lotus.tkpn-lotus-mark { width: 72px; height: 54px; background: #f0d2ac; opacity: .75; }
.footer-lotus.tkpn-lotus-mark { width: 38px; height: 29px; background: #d2a469; vertical-align: middle; }
.video-poster .poster-ornament.tkpn-lotus-mark {
  position: absolute;
  inset: auto 3% -76px auto;
  width: clamp(210px, 31vw, 380px);
  height: clamp(165px, 25vw, 290px);
  background: #ffe5ba;
  opacity: .095;
  transform: none;
  pointer-events: none;
}
html[data-tkpn-theme="dark"] .topic-item .topic-icon .tkpn-lotus-mark { background: #e0b77a; }
html[data-tkpn-theme="dark"] .closing-band-inner > .closing-lotus.tkpn-lotus-mark { background: #d8b68b; }
html[data-tkpn-theme="dark"] .footer-lotus.tkpn-lotus-mark { background: #d2a469; }
@media(max-width: 580px) {
  .closing-band-inner > .closing-lotus.tkpn-lotus-mark { width: 48px; height: 38px; }
  .video-poster .poster-ornament.tkpn-lotus-mark { width: 230px; height: 170px; inset: auto -8% -45px auto; }
}


/* TKPN v1.4.8: serif Vietnamese glyph/diacritic rendering fix.
 * Georgia may render some Vietnamese combining accents with poor placement;
 * Cambria and Times New Roman have Vietnamese coverage on Windows.
 * Do not affect body paragraphs, navigation or the A Di Da Phat banner.
 */
.reading-header h1,
.archive-head h1,
.section-titlebar h2,
.post-card h3,
.video-card h3,
.video-poster strong,
.spotlight-side-head h3,
.reading-body h2, .reading-body h3, .reading-body h4,
.closing-band h2,
.site-footer h2 {
  font-family: Cambria, "Times New Roman", "Liberation Serif", serif;
  letter-spacing: normal;
  font-kerning: normal;
}
body.single-post .reading-header h1 {
  font-family: Cambria, "Times New Roman", "Liberation Serif", serif;
  letter-spacing: normal;
  font-kerning: normal;
  line-height: 1.34;
}


/* TKPN 1.4.10: hero landscape background – explicit stacking avoids disappearing on IIS */
.hero-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  background: #8d4f31;
}
.hero-final .hero-full-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url('../images/hero-tkpn-banner-flipped.jpg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
}
.hero-final::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(66, 28, 17, .87) 0%,
    rgba(84, 38, 22, .82) 21%,
    rgba(105, 53, 30, .69) 36%,
    rgba(120, 67, 39, .38) 51%,
    rgba(120, 67, 39, .05) 69%,
    rgba(120, 67, 39, 0) 82%);
  pointer-events: none;
}
.hero-final::after { z-index: 1; pointer-events: none; }
.hero-final > .hero-portrait-wrap { display: none !important; }
.hero-final > .hero-full-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 700px);
  justify-content: start;
  gap: clamp(16px, 3vw, 56px);
  min-height: 340px;
  padding-block: 30px;
}
.hero-final .hero-logo-link {
  position: relative;
  z-index: 2;
  align-self: center;
}
.hero-final .hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  text-shadow: 0 2px 13px rgba(31, 14, 9, .25);
}
.hero-final .hero-mantra {
  color: #fff7ea;
  font-family: Cambria, 'Times New Roman', Georgia, serif;
  font-size: clamp(40px, 4.9vw, 74px);
  line-height: 1.12;
  letter-spacing: normal;
  white-space: nowrap;
}
.hero-final .hero-overline { color: #ffedce; letter-spacing: .14em; }
.hero-final .hero-small { color: #fff2dc; }
.hero-final .hero-quote {
  align-self: flex-end;
  text-align: right;
  color: #ffebca;
  max-width: 100%;
  margin-top: 6px;
}
@media (max-width: 1180px) {
  .hero-final > .hero-full-inner {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 22px;
    min-height: 310px;
  }
  .hero-final .hero-mantra { font-size: clamp(36px, 4.9vw, 58px); }
}
@media (max-width: 820px) {
  .hero-final .hero-full-bg { background-position: 65% center !important; }
  .hero-final::before {
    background: linear-gradient(90deg,
      rgba(66, 28, 17, .86) 0%, rgba(84, 38, 22, .78) 34%,
      rgba(105, 53, 30, .45) 68%, rgba(105, 53, 30, .16) 100%);
  }
  .hero-final > .hero-full-inner { grid-template-columns: 105px minmax(0, 1fr); gap: 16px; min-height: 290px; }
  .hero-final .hero-mantra { font-size: clamp(33px, 5.6vw, 48px); white-space: normal; }
  .hero-final .hero-quote { max-width: 100%; font-size: 15px; }
}
@media (max-width: 580px) {
  .hero-final .hero-full-bg { background-position: 68% center !important; }
  .hero-final::before {
    background: linear-gradient(180deg,
      rgba(78, 35, 21, .65) 0%, rgba(78, 35, 21, .73) 55%, rgba(78, 35, 21, .84) 100%);
  }
  .hero-final > .hero-full-inner { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding-block: 20px 25px; }
  .hero-final .hero-logo-link { position: relative; }
  .hero-final .hero-copy { width: 100%; max-width: 100%; align-items: center; text-align: center; }
  .hero-final .hero-mantra { font-size: clamp(32px, 9vw, 44px); }
  .hero-final .hero-quote { align-self: center; text-align: center; font-size: 14px; }
}


/* TKPN v1.4.11: original monk photo from the supplied NukeViet banner.
   Only mirror the original crop; no facial AI changes. Scenic background excludes generated figure. */
.hero-final { background-color:#7c3f26; isolation:isolate; }
.hero-final .hero-full-bg {
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background: url('../images/tkpn-son-thuy-khong-chan-dung.jpg') center center/cover no-repeat !important;
  opacity:1 !important;
}
.hero-final::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
   rgba(70,30,17,.87) 0%,rgba(84,38,23,.83) 22%,
   rgba(100,47,29,.73) 39%,rgba(117,61,35,.48) 59%,
   rgba(131,74,43,.12) 86%,rgba(131,74,43,.08) 100%);
  pointer-events:none;
}
.hero-final::after { z-index:1; }
.hero-final > .hero-full-inner { position:relative; z-index:3; }
.hero-final > .hero-portrait-wrap.authentic-portrait {
  display:block !important; position:absolute !important;
  top:0 !important; bottom:0 !important; left:auto !important; right:0 !important;
  width:clamp(300px,29vw,465px) !important;
  height:100% !important; z-index:2 !important;
  opacity:1 !important; overflow:hidden !important;
  transform:none !important; pointer-events:none;
}
.hero-final > .hero-portrait-wrap.authentic-portrait img {
  display:block !important;
  width:100% !important; height:100% !important; max-width:none !important;
  object-fit:cover !important; object-position:54% 45% !important;
  opacity:1 !important; transform:none !important; filter:none !important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 13%,rgba(0,0,0,.85) 34%,#000 50%) !important;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.28) 13%,rgba(0,0,0,.85) 34%,#000 50%) !important;
}
.hero-final .hero-copy { text-shadow:0 2px 14px rgba(32,14,9,.32); }
@media (max-width:1180px) {
 .hero-final > .hero-portrait-wrap.authentic-portrait { width:clamp(235px,27vw,330px) !important; }
}
@media (max-width:820px) {
 .hero-final > .hero-portrait-wrap.authentic-portrait { width:clamp(175px,31vw,250px) !important; opacity:.48 !important; }
}
@media (max-width:580px) {
 .hero-final > .hero-portrait-wrap.authentic-portrait { width:min(47vw,205px) !important; opacity:.26 !important; }
 .hero-final::before { background:linear-gradient(180deg,rgba(72,31,18,.73),rgba(72,31,18,.79)); }
}


/* TKPN v1.4.12 — 21 original News categories as responsive series cards */
.tkpn-series-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tkpn-series-card { min-width:0; display:flex; flex-direction:column; border:1px solid #eee0cc; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 5px 21px rgba(97,68,40,.04); transition:transform .2s ease, box-shadow .2s ease; }
.tkpn-series-card:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(97,68,40,.11); }
.tkpn-series-card-art { display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 8.4; background:#f7eadb url('../images/lotus-clean-v146.jpg') center center / cover no-repeat; overflow:hidden; }
.tkpn-series-card-lotus { display:none; }
.tkpn-series-card-info { flex:1; display:flex; flex-direction:column; padding:20px 21px 17px; }
.tkpn-series-card-kicker { margin:0 0 7px; color:#a24f28; font-size:11px; font-weight:800; letter-spacing:.055em; }
.tkpn-series-card h3 { margin:0 0 10px; color:var(--mahogany); font-family:Cambria, 'Times New Roman', serif; font-size:clamp(18px,1.5vw,22px); line-height:1.35; font-weight:700; }
.tkpn-series-card h3 a { color:inherit; }
.tkpn-series-card h3 a:hover { color:var(--clay); }
.tkpn-series-card-desc { color:var(--ink-soft); font-size:14px; line-height:1.6; margin:0 0 16px; flex:1; }
.tkpn-series-card-footer { margin-top:auto; padding-top:13px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid #f0e6db; color:#887666; font-size:12px; }
.tkpn-series-card-footer a { color:#9b4c2a; font-weight:700; }
.tkpn-series-card-footer a:hover { text-decoration:underline; }
html[data-tkpn-theme="dark"] .tkpn-series-card { background:#292321; border-color:var(--line); }
html[data-tkpn-theme="dark"] .tkpn-series-card h3 { color:var(--ink); }
html[data-tkpn-theme="dark"] .tkpn-series-card-desc, html[data-tkpn-theme="dark"] .tkpn-series-card-footer { color:var(--ink-soft); }
html[data-tkpn-theme="dark"] .tkpn-series-card-footer { border-color:var(--line); }
html[data-tkpn-theme="dark"] .tkpn-series-card-kicker, html[data-tkpn-theme="dark"] .tkpn-series-card-footer a { color:#edb780; }
html[data-tkpn-theme="dark"] .tkpn-series-card-art { filter:brightness(.83); }
@media (max-width:900px) { .tkpn-series-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:580px) { .tkpn-series-grid { grid-template-columns:1fr; gap:15px; } .tkpn-series-card-art { aspect-ratio:16/7; } .tkpn-series-card-info { padding:17px; } }


/* TKPN 1.4.13 — per-series search and natural-number sorting */
.tkpn-category-page .archive-head { margin-bottom: 25px; }
.tkpn-series-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 20px; margin: 0 0 13px; background: var(--surface, #fffaf3);
  border: 1px solid var(--line); border-radius: 13px;
}
.tkpn-series-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tkpn-series-field label { font-size: 13px; font-weight: 700; color: var(--mahogany); }
.tkpn-series-search { flex: 2 1 320px; }
.tkpn-series-sort { flex: 1 1 230px; }
.tkpn-series-field input, .tkpn-series-field select {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 15px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); background: var(--surface, #fff);
}
.tkpn-series-submit { min-height: 44px; border: 0; padding: 10px 22px; background: var(--clay); color: #fff; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.tkpn-series-submit:hover { background: var(--clay-deep); }
.tkpn-series-clear { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; color: var(--clay-deep); }
.tkpn-series-summary { margin: 0 0 24px; color: var(--ink-soft); font-size: 14px; }
.tkpn-category-page .archive-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tkpn-category-page .archive-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .tkpn-series-filter { padding: 14px; gap: 12px; }
  .tkpn-series-search, .tkpn-series-sort { flex: 1 1 100%; }
  .tkpn-series-submit { flex: 1; }
  .tkpn-category-page .archive-posts { grid-template-columns: minmax(0, 1fr); }
}
html[data-tkpn-theme="dark"] .tkpn-series-filter { background: #292321; border-color: var(--line); }
html[data-tkpn-theme="dark"] .tkpn-series-field label { color: var(--mahogany); }

/* TKPN 1.4.14 — auto-scroll reader, only on single post */
body.single-post .tkpn-auto-reader {
  max-width: 650px; margin: 24px auto 32px; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: 13px;
  background: #fff9f0; color: #67452f;
  box-shadow: 0 5px 18px rgba(75,45,25,.04);
}
body.single-post .tkpn-auto-reader-top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
body.single-post .tkpn-reader-heading { font-weight:700; font-size:15px; }
body.single-post .tkpn-reader-toggle {
  min-height:38px; border:0; border-radius:9px; background:#8c4c30;
  color:#fff9ef; padding:7px 15px; font:inherit; font-size:13px;
  font-weight:700; cursor:pointer;
}
body.single-post .tkpn-reader-toggle:hover { background:#693820; }
body.single-post .tkpn-reader-toggle:focus-visible,
body.single-post .tkpn-reader-speed-row input:focus-visible { outline:3px solid #c89658; outline-offset:3px; }
body.single-post .tkpn-reader-speed-row {
  display:grid; grid-template-columns:65px minmax(70px,1fr) 73px;
  align-items:center; gap:13px; margin-top:14px; font-size:13px;
}
body.single-post .tkpn-reader-speed-row input { width:100%; accent-color:#9f623c; cursor:pointer; }
body.single-post .tkpn-reader-speed-row output { text-align:right; font-weight:700; }
body.single-post .tkpn-reader-status { margin:9px 0 0; font-size:12px; line-height:1.55; color:#876b57; }
html[data-tkpn-theme="dark"] body.single-post .tkpn-auto-reader {
  background:#312821; color:#f1dfca; border-color:#554335;
}
html[data-tkpn-theme="dark"] body.single-post .tkpn-reader-status { color:#c8ad93; }
html[data-tkpn-theme="dark"] body.single-post .tkpn-reader-toggle { background:#a96d46; color:#fff9ef; }
@media (max-width:580px) {
  body.single-post .tkpn-auto-reader { padding:13px; margin:17px 0 25px; }
  body.single-post .tkpn-auto-reader-top { gap:8px; }
  body.single-post .tkpn-reader-speed-row { grid-template-columns:50px minmax(50px,1fr) 65px; gap:8px; }
}


/* v1.4.15 — the home Video section now renders real TKPN Phap Thoai episodes. */
.tkpn-home-featured-video{display:flex;flex-direction:column;height:100%;min-width:0;background:var(--surface);color:var(--ink)}
.tkpn-home-video-frame{position:relative;width:100%;height:clamp(250px,28vw,410px);background:#120f0d;overflow:hidden}
/* v1.4.20: the whole homepage video preview is one accessible link to the episode. */
.tkpn-home-video-link{display:block;text-decoration:none;cursor:pointer}
.tkpn-home-video-link:focus-visible{outline:3px solid #e4b87a;outline-offset:3px}
.tkpn-home-video-preview{display:block;width:100%;height:100%;object-fit:contain;background:#100e0d}
.tkpn-home-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(64,37,23,.67);color:#fff;display:grid;place-items:center;font-size:26px;padding:0 0 0 4px;box-shadow:0 0 0 13px rgba(255,255,255,.11);z-index:2;pointer-events:none;transition:background .2s ease,transform .2s ease}
.tkpn-home-video-link:hover .tkpn-home-play,.tkpn-home-video-link:focus-visible .tkpn-home-play{background:rgba(151,95,45,.95);transform:translate(-50%,-50%) scale(1.06)}
.tkpn-home-video-info{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 22px;min-height:95px;border-top:1px solid var(--line)}
.tkpn-home-video-copy{flex:1;min-width:0}
.tkpn-home-video-kicker{display:block;text-transform:uppercase;letter-spacing:.085em;font-size:.72rem;font-weight:750;color:var(--clay);margin-bottom:5px}
.tkpn-home-video-info h3{font:700 clamp(17px,1.35vw,21px)/1.38 Georgia,'Times New Roman',serif;margin:0;overflow-wrap:anywhere}
.tkpn-home-video-info h3 a{color:var(--ink)}
.tkpn-home-video-info h3 a:hover{color:var(--clay-deep)}
.tkpn-home-episode-link{flex-shrink:0;border:1px solid var(--line);padding:8px 12px;border-radius:40px;font-size:12px;font-weight:750;white-space:nowrap;color:var(--clay-deep)}
.tkpn-home-episode-link:hover{background:var(--clay-deep);color:var(--surface)}
.tkpn-home-series-note{margin:auto 0 0;padding-top:14px;font-size:12px;line-height:1.75;color:var(--ink-soft)}
.tkpn-home-all-series{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;border-top:1px solid var(--line);padding-top:14px;color:var(--clay-deep);font-size:13px;font-weight:750}
.tkpn-home-all-series:hover{color:var(--clay)}
html[data-tkpn-theme="dark"] .video-spotlight-side{background:linear-gradient(180deg,#292321 0%,#241e1b 100%)}
html[data-tkpn-theme="dark"] .spotlight-side-intro{color:#cdb9a3}
html[data-tkpn-theme="dark"] .series-link{background:#2f2723;border-color:#4e4036;box-shadow:none}
html[data-tkpn-theme="dark"] .series-link:hover{background:#372d29;border-color:#6b523f}
html[data-tkpn-theme="dark"] .series-index{background:linear-gradient(180deg,#3c2f27 0%, #322822 100%);border-color:#58483e;color:#e7b97b}
html[data-tkpn-theme="dark"] .series-chip{background:#3b3029;color:#f0bf84}
html[data-tkpn-theme="dark"] .series-meta-note{color:#cdb9a3}
html[data-tkpn-theme="dark"] .series-arrow{background:#332924;border-color:#58483e;color:#e4b57a}
html[data-tkpn-theme="dark"] .series-link:hover .series-arrow{background:#6f4a2f;color:#fff}
html[data-tkpn-theme="dark"] .tkpn-home-featured-video{background:#292321}
html[data-tkpn-theme="dark"] .tkpn-home-video-info{border-top-color:var(--line)}
html[data-tkpn-theme="dark"] .tkpn-home-episode-link{color:#f0b77e}
html[data-tkpn-theme="dark"] .tkpn-home-episode-link:hover{background:#4b3527;color:#fff}
@media(max-width:820px){.tkpn-home-video-frame{height:auto;aspect-ratio:16/9;min-height:0}.tkpn-home-video-info{min-height:0}}
@media(max-width:560px){.tkpn-home-video-info{flex-direction:column;align-items:flex-start;padding:15px}.tkpn-home-play{width:62px;height:62px;font-size:21px}.tkpn-home-episode-link{align-self:flex-start}}
@media(prefers-reduced-motion:reduce){.tkpn-home-play{transition:none}}
@media(max-width:820px){.series-link{grid-template-columns:42px minmax(0,1fr) 34px;padding:14px}.series-index{width:42px;height:42px;font-size:20px}.series-text strong{font-size:16px}}
@media(max-width:560px){.video-spotlight-side{padding:18px}.spotlight-side-head h3{font-size:22px}.series-link{grid-template-columns:40px minmax(0,1fr) 32px;gap:11px;padding:13px 12px;border-radius:16px}.series-index{width:40px;height:40px;font-size:18px}.series-meta{gap:6px}.series-chip{min-height:26px;padding:0 9px}}

/* v1.4.18 — clean directory layout for the /video/ page only.
   Preserve the breadcrumb and the cards, not the reading-article margins. */
.tkpn-video-directory-main{padding-top:22px;padding-bottom:66px}
.tkpn-video-directory-main>.breadcrumbs{padding-bottom:18px}
.tkpn-video-directory-content{min-width:0}
.tkpn-video-directory-main .tkpn-vcat{margin:0 auto 18px}
@media(max-width:600px){
  .tkpn-video-directory-main{padding-top:15px;padding-bottom:42px}
  .tkpn-video-directory-main>.breadcrumbs{padding-bottom:14px}
}

/* 1.4.25 — series thumbnails in place of numbers */
.series-link .series-thumb{overflow:hidden;padding:0;background:#f4e9da;border-radius:13px;position:relative;flex-shrink:0;}
.series-link .series-thumb img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;}
html[data-tkpn-theme="dark"] .series-link .series-thumb{background:#372e28;}
@media(max-width:560px){.series-link .series-thumb{border-radius:11px;}}

/* 1.4.26 — refined framed thumbnails for featured series, desktop & mobile. */
.series-link .series-thumb{
  box-sizing:border-box;
  border:2px solid #d9bd97;
  border-radius:16px;
  padding:3px;
  background:#fffaf3;
  box-shadow:0 2px 8px rgba(75,44,23,.12);
  overflow:hidden;
}
.series-link .series-thumb img{
  border-radius:11px;
  width:100%;height:100%;aspect-ratio:1/1;
  object-fit:cover;
}
.series-link:hover .series-thumb{border-color:#b88851;box-shadow:0 4px 11px rgba(75,44,23,.16)}
html[data-tkpn-theme="dark"] .series-link .series-thumb{background:#322721;border-color:#8b6a49;box-shadow:0 2px 8px rgba(0,0,0,.25)}
@media(max-width:560px){
  .series-link .series-thumb{border-radius:13px;padding:2px;border-width:1.5px}
  .series-link .series-thumb img{border-radius:9px}
}

/* 1.4.27 — fix mobile overflow caused by unconstrained thumbnail image sizing. */
.video-spotlight-side,.series-list-cards,.series-link,.series-text{min-width:0;max-width:100%;box-sizing:border-box}
.series-list-cards{width:100%}
.series-link{width:100%;grid-template-columns:48px minmax(0,1fr) 36px}
.series-link .series-thumb{display:block!important;position:relative;inline-size:48px!important;block-size:48px!important;min-inline-size:48px!important;min-block-size:48px!important;max-inline-size:48px!important;max-block-size:48px!important;align-self:center;justify-self:start;aspect-ratio:1/1;line-height:normal;box-sizing:border-box;overflow:hidden}
.series-link .series-thumb img{display:block!important;position:static!important;inline-size:100%!important;block-size:100%!important;max-inline-size:100%!important;max-block-size:100%!important;min-inline-size:0!important;min-block-size:0!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center!important;box-sizing:border-box}
.series-link .series-text{overflow-wrap:anywhere;word-break:normal}
@media(max-width:820px){.series-link{grid-template-columns:42px minmax(0,1fr) 34px}.series-link .series-thumb{inline-size:42px!important;block-size:42px!important;min-inline-size:42px!important;min-block-size:42px!important;max-inline-size:42px!important;max-block-size:42px!important}}
@media(max-width:560px){.series-link{grid-template-columns:54px minmax(0,1fr) 32px;gap:11px}.series-link .series-thumb{inline-size:54px!important;block-size:54px!important;min-inline-size:54px!important;min-block-size:54px!important;max-inline-size:54px!important;max-block-size:54px!important}.series-link .series-text strong{font-size:15px;line-height:1.4}.series-link .series-meta-note{font-size:11px}}


/* TKPN 1.4.28: page navigation progress (no blocking during media playback). */
.tkpn-page-loading[hidden] { display: none !important; }
.tkpn-page-loading { position: fixed; inset: 0; z-index: 2147480000; background: rgba(24,20,17,.69); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: grid; place-items: center; padding: 22px; }
.tkpn-page-loading__panel { box-sizing: border-box; width: min(340px, 100%); padding: 30px 24px 26px; border-radius: 22px; border: 1px solid rgba(183,145,85,.45); background: #fffaf2; box-shadow: 0 22px 60px rgba(0,0,0,.24); color: #61452e; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tkpn-page-loading__logo { width: 92px; height: 92px; flex: 0 0 92px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: transparent; border: 1px solid rgba(160,120,66,.25); box-shadow: 0 5px 17px rgba(0,0,0,.08); animation: tkpn-logo-breathe 1.7s ease-in-out infinite; }
.tkpn-page-loading__logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: transparent; }
.tkpn-page-loading__title { font-size: 18px; font-weight: 750; }
.tkpn-page-loading__message { font-size: 14px; opacity: .8; }
.tkpn-page-loading__bar { position: relative; margin-top: 10px; width: 72%; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(160,120,66,.17); }
.tkpn-page-loading__bar::after { content: ''; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; border-radius: inherit; background: #a07842; animation: tkpn-load-sweep 1.25s ease-in-out infinite; }
@keyframes tkpn-logo-breathe { 50% { transform: scale(.96); opacity: .85; } }
@keyframes tkpn-load-sweep { to { left: 105%; } }
@media (prefers-reduced-motion: reduce) { .tkpn-page-loading__logo, .tkpn-page-loading__bar::after { animation: none !important; } }
@media (prefers-color-scheme: dark) { body:not(.light-mode) .tkpn-page-loading__panel { background: #2e2520; color: #f6e9d9; } }

/* 1.4.29: Transparent circular logo for page loading, independent of light/dark palette. */
body.light-mode .tkpn-page-loading__logo { border-color: rgba(145,108,58,.30); }
body:not(.light-mode) .tkpn-page-loading__logo { border-color: rgba(224,192,144,.35); box-shadow: 0 5px 20px rgba(0,0,0,.18); }

/* TKPN 1.4.31 - unobtrusive update banner, including PWA standalone/mobile. */
.tkpn-version-alert{position:fixed;z-index:99990;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(94vw,540px);display:flex;align-items:center;gap:12px;background:var(--card-bg,#fffaf1);color:var(--text,#342920);border:1px solid rgba(150,111,58,.45);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.2);padding:12px 14px;font:inherit;font-size:14px;line-height:1.45}
.tkpn-version-alert span{flex:1;min-width:0}
.tkpn-version-alert button{border:1px solid currentColor;border-radius:9px;padding:8px 10px;font:inherit;white-space:nowrap;cursor:pointer;color:inherit;background:transparent}
.tkpn-version-alert .tkpn-version-dismiss{border:0;font-size:23px;padding:4px 6px}
@media(max-width:420px){.tkpn-version-alert{gap:7px;padding:10px;font-size:12px}.tkpn-version-alert button{padding:7px}}
@media(prefers-color-scheme:dark){.tkpn-version-alert{background:#29231e;color:#f9eddf}}

/* TKPN 1.4.32 — homepage compact layout. Scoped to homepage only. */
body.home .section-pad{padding-block:44px}
body.home .section-titlebar{margin-bottom:20px}
body.home .video-spotlight{gap:16px;align-items:start}
body.home .video-spotlight-hero{align-self:start}
body.home .tkpn-home-video-frame{height:clamp(220px,25vw,345px)}
body.home .tkpn-home-video-info{min-height:0;padding:14px 18px}
body.home .video-spotlight-side{padding:18px}
body.home .posts-grid{gap:16px}
body.home .tkpn-series-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
body.home .tkpn-series-card{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:12px;padding:13px;min-height:100px;border-radius:17px}
body.home .tkpn-series-card-art{width:58px;height:58px;min-width:58px;aspect-ratio:1;background:linear-gradient(140deg,#fcf4e6,#f0e2ce);border:1px solid #dfc9a8;border-radius:13px;text-decoration:none;filter:none}
body.home .tkpn-series-card-book{font-size:29px;line-height:1;color:#9c7047}
body.home .tkpn-series-card-info{padding:0;min-width:0;display:block}
body.home .tkpn-series-card-kicker{font-size:10px;line-height:1.4;margin:0 0 3px}
body.home .tkpn-series-card h3{font-family:inherit;font-size:15px;line-height:1.4;margin:0 0 6px;overflow-wrap:anywhere}
body.home .tkpn-series-card-desc{display:none}
body.home .tkpn-series-card-footer{padding:0;margin:0;border:0;gap:7px;font-size:11px}
body.home .tkpn-series-card-footer a{white-space:nowrap}
html[data-tkpn-theme="dark"] body.home .tkpn-series-card-art{background:linear-gradient(140deg,#3b3027,#302720);border-color:#68503c;filter:none}
html[data-tkpn-theme="dark"] body.home .tkpn-series-card-book{color:#dfb88c}
@media(max-width:1100px){body.home .tkpn-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){body.home .section-pad{padding-block:34px}body.home .tkpn-home-video-frame{height:auto;aspect-ratio:16/9}body.home .video-spotlight{gap:14px}}
@media(max-width:580px){body.home .section-pad{padding-block:26px}body.home .section-titlebar{margin-bottom:16px}body.home .tkpn-series-grid{grid-template-columns:1fr;gap:10px}body.home .tkpn-series-card{grid-template-columns:48px minmax(0,1fr);gap:11px;min-height:80px;padding:11px}body.home .tkpn-series-card-art{width:48px;height:48px;min-width:48px;border-radius:12px}body.home .tkpn-series-card-book{font-size:24px}body.home .tkpn-series-card h3{font-size:14px}body.home .tkpn-home-video-info{padding:12px 14px}}

/* 1.4.33 — match featured Video and series cards heights on desktop.
   The series panel determines natural row height; the image frame fills the
   remaining hero space without stretching the poster itself. */
@media (min-width:821px) {
  body.home .video-spotlight { align-items: stretch; }
  body.home .video-spotlight-hero { align-self: stretch; min-height: 0; }
  body.home .tkpn-home-featured-video { height: 100%; min-height: 0; }
  body.home .tkpn-home-video-frame {
    flex: 1 1 auto;
    height: auto;
    min-height: 260px;
  }
  body.home .tkpn-home-video-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body.home .tkpn-home-video-info { flex: 0 0 auto; }
  body.home .video-spotlight-hero > .video-poster { min-height: 100%; }
}

/* 1.4.39 — mỗi chuyên đề có ảnh đại diện: hiển thị gọn, bo góc, không kéo méo. */
body.home .tkpn-series-card-art { position:relative; padding:2px; overflow:hidden; }
body.home .tkpn-series-card-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:10px; background:#f4eadc; }
@media (max-width:580px) { body.home .tkpn-series-card-image { border-radius:9px; } }


/* TKPN Thanh Tịnh A 1.4.40 — original supplied orange landscape banner.
   The WebP already contains the portrait. Do not overlay an additional portrait.
   Strongly scoped overrides intentionally supersede historical hero rules. */
.hero-final.tkpn-hero-artwork {
  position:relative;
  isolation:isolate;
  background:#ffe1b6;
  color:#562b19;
  min-height:0;
}
.hero-final.tkpn-hero-artwork .hero-full-bg {
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100%;
  height:100%;
  background-image:url('../images/tkpn-banner-son-thuy-2026.webp') !important;
  background-position:center 34% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
}
/* Soft ivory wash protects the text while preserving the portrait at right. */
.hero-final.tkpn-hero-artwork::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(255,233,202,.76) 0%,
    rgba(255,230,196,.64) 22%,
    rgba(255,225,187,.40) 38%,
    rgba(255,225,187,.07) 54%,
    transparent 72%);
  pointer-events:none;
}
.hero-final.tkpn-hero-artwork::after { display:none; }
.hero-final.tkpn-hero-artwork > .hero-portrait-wrap { display:none !important; }
.hero-final.tkpn-hero-artwork > .hero-full-inner {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:clamp(100px,11vw,160px) minmax(0,min(40vw,545px));
  justify-content:start;
  align-items:center;
  gap:clamp(12px,2.7vw,44px);
  min-height:clamp(195px,21vw,285px);
  padding-block:16px;
}
.hero-final.tkpn-hero-artwork .hero-logo-link { color:#5a2b14; }
.hero-final.tkpn-hero-artwork .hero-logo { width:clamp(90px,10vw,142px); }
.hero-final.tkpn-hero-artwork .hero-logo-domain {
  color:#6b3317;
  text-shadow:0 1px 2px rgba(255,245,225,.75);
}
.hero-final.tkpn-hero-artwork .hero-copy {
  align-items:flex-start;
  text-align:left;
  width:auto;
  min-width:0;
  max-width:100%;
  text-shadow:0 1px 2px rgba(255,246,231,.82);
}
.hero-final.tkpn-hero-artwork .hero-overline { color:#703516; font-size:clamp(12px,1.3vw,18px); }
.hero-final.tkpn-hero-artwork .hero-small { color:#6c361e; font-size:clamp(13px,1.35vw,18px); }
.hero-final.tkpn-hero-artwork .hero-mantra {
  color:#502614;
  font-size:clamp(33px,4.6vw,66px);
  line-height:1.16;
  white-space:normal;
}
.hero-final.tkpn-hero-artwork .hero-quote {
  color:#65321c;
  align-self:flex-start;
  text-align:left;
  font-size:clamp(13px,1.35vw,19px);
  line-height:1.4;
}
@media(max-width:820px) and (min-width:581px) {
  .hero-final.tkpn-hero-artwork > .hero-full-inner {
    grid-template-columns:100px minmax(0,45vw);
    min-height:190px;
    gap:14px;
  }
  .hero-final.tkpn-hero-artwork .hero-full-bg { background-position:62% 30% !important; }
  .hero-final.tkpn-hero-artwork::before {
    background:linear-gradient(90deg,rgba(255,233,201,.88),rgba(255,230,197,.64) 42%,transparent 72%);
  }
}
/* TKPN 1.4.43 — Mobile: compact full-width banner with the copy OVER the artwork.
   Put all content on the left and reserve the right side for the portrait.
   The background stays in place; no second strip is created below it. */
@media (max-width:580px) {
  .hero-final.tkpn-hero-artwork {
    min-height:clamp(188px,54vw,240px);
    overflow:hidden;
  }
  .hero-final.tkpn-hero-artwork .hero-full-bg {
    position:absolute !important;
    inset:0 !important;
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    background-image:url('../images/tkpn-banner-son-thuy-mobile-2026.webp') !important;
    background-size:cover !important;
    /* Show the entire top of the portrait instead of cropping from below. */
    background-position:center 12% !important;
  }
  .hero-final.tkpn-hero-artwork::before {
    display:block;
    background:linear-gradient(90deg,
      rgba(255,237,212,.94) 0%,
      rgba(255,233,205,.84) 34%,
      rgba(255,231,198,.42) 54%,
      rgba(255,231,198,.04) 70%,
      transparent 80%);
  }
  .hero-final.tkpn-hero-artwork > .hero-full-inner {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    width:100%;
    min-height:clamp(188px,54vw,240px);
    gap:6px;
    padding:10px 12px 11px clamp(12px,4.5vw,24px);
    box-sizing:border-box;
  }
  .hero-final.tkpn-hero-artwork .hero-logo-link {
    display:flex;
    flex-direction:row;
    flex:0 0 auto;
    align-self:flex-start;
    align-items:center;
    /* Same left-column width as .hero-copy: center the logo above its text. */
    justify-content:center;
    width:min(56vw,240px);
    max-width:56vw;
    gap:0;
    margin:0;
  }
  .hero-final.tkpn-hero-artwork .hero-logo { width:clamp(34px,10vw,43px); }
  .hero-final.tkpn-hero-artwork .hero-logo-domain { display:none; }
  .hero-final.tkpn-hero-artwork .hero-copy {
    display:flex;
    flex-direction:column;
    flex:0 1 auto;
    width:min(56vw,240px);
    min-width:0;
    max-width:56vw;
    gap:2px;
    /* Keep the copy in the LEFT column but center each line within it. */
    align-items:center;
    text-align:center;
    text-shadow:0 1px 2px rgba(255,246,232,.85);
  }
  .hero-final.tkpn-hero-artwork .hero-copy > * {
    max-width:100%;
    text-align:center;
  }
  .hero-final.tkpn-hero-artwork .hero-overline {
    font-size:clamp(9px,2.6vw,12px);
    letter-spacing:.04em;
    line-height:1.25;
  }
  .hero-final.tkpn-hero-artwork .hero-small {
    margin-top:1px;
    font-size:clamp(10px,2.9vw,12px);
    line-height:1.2;
  }
  .hero-final.tkpn-hero-artwork .hero-mantra {
    font-size:clamp(22px,6.3vw,32px);
    line-height:1.12;
    white-space:normal;
  }
  .hero-final.tkpn-hero-artwork .hero-quote {
    align-self:center;
    text-align:center;
    margin-top:3px;
    font-size:clamp(10px,2.65vw,12px);
    line-height:1.25;
    overflow-wrap:break-word;
  }
}

/* TKPN 1.4.48: lift the EXISTING background image, not the banner container.
   At a 1640px desktop width the reference green line sits ~40px below the top.
   Moving the image upward makes that source-image row visible at the top.
   Keep the 1.4.46 content, artwork, size, and mobile/tablet layout unchanged. */
@media (min-width:821px) {
  .hero-final.tkpn-hero-artwork .hero-full-bg {
    background-position: center calc(34% - clamp(16px, 2.4vw, 40px)) !important;
  }
}

/* TKPN 1.4.49: apply the same upward background-image alignment as 1.4.48
   to tablet and phone. Preserve the source image, portrait, text, logo,
   banner size, and layout. Use the same responsive vertical offset as desktop
   (16–40px) so smaller viewports do not crop the teacher's head excessively. */
@media (min-width:581px) and (max-width:820px) {
  .hero-final.tkpn-hero-artwork .hero-full-bg {
    background-position: 62% calc(30% - clamp(16px, 2.4vw, 40px)) !important;
  }
}
@media (max-width:580px) {
  .hero-final.tkpn-hero-artwork .hero-full-bg {
    background-position: center calc(12% - clamp(16px, 2.4vw, 40px)) !important;
  }
}