/* Bổ sung cho bản WordPress (nạp sau site.css) */

/* Thanh quản trị khi đăng nhập */
body.admin-bar header.fixed { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.fixed { top: 46px; } }
@media (max-width: 600px) { body.admin-bar header.fixed { top: 0; } }

/* Menu: trạng thái thường */
header nav a.nav-idle:hover { color: var(--brand) !important; }

/* Thông báo form */
.tg-msg { font-weight: 600; margin-top: 4px; min-height: 1px; }
.tg-msg.success { color: #2e7d32; }
.tg-msg.error { color: var(--brand); }
#msg { min-height: 1px; }
.tg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
form.tg-booking button[disabled] { opacity: .7; cursor: wait; }

/* Trang thường / bài viết */
.tg-page { background: #f8f9fa; }
.tg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tg-page-head {
  padding: 170px 0 56px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(193,18,31,.35), transparent 70%),
    linear-gradient(135deg, #1d2021 0%, #121415 100%);
}
.tg-page-head h1 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 40px; font-weight: 800; line-height: 1.2; }
.tg-page-body { padding: 56px 0 80px; }
.tg-prose { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 20px 40px -24px rgba(25,28,29,.25); font-size: 17px; line-height: 1.75; color: #2b2e30; }
.tg-prose > * + * { margin-top: 1em; }
.tg-prose h2 { font-size: 28px; font-weight: 800; line-height: 1.3; margin-top: 1.6em; color: #191c1d; }
.tg-prose h3 { font-size: 22px; font-weight: 700; margin-top: 1.4em; color: #191c1d; }
.tg-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.tg-prose ul { list-style: disc; padding-left: 1.4em; }
.tg-prose ol { list-style: decimal; padding-left: 1.4em; }
.tg-prose img { border-radius: 14px; height: auto; }
.tg-prose blockquote { border-left: 4px solid var(--brand); padding-left: 16px; color: #555; font-style: italic; }
.tg-meta { color: #888; font-size: 14px; }
.tg-thumb img { width: 100%; border-radius: 16px; }

.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tg-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 32px -22px rgba(25,28,29,.35); transition: transform .3s, box-shadow .3s; }
.tg-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(122,10,20,.35); }
.tg-card-img img { width: 100%; height: 190px; object-fit: cover; }
.tg-card-body { padding: 20px; }
.tg-card-body h2 { font-size: 19px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; color: #191c1d; }
.tg-card-body p { color: #666; font-size: 15px; }
.tg-pagination { margin-top: 40px; text-align: center; }
.tg-pagination .page-numbers { display: inline-block; min-width: 40px; padding: 8px 12px; margin: 0 3px; border-radius: 10px; background: #fff; }
.tg-pagination .page-numbers.current { background: var(--brand); color: #fff; }

.tg-404 { text-align: center; padding-bottom: 120px; }
.tg-404-code { font-size: 96px; font-weight: 800; line-height: 1; color: #ff5a64; margin-bottom: 12px; }
.tg-404 p { color: rgba(255,255,255,.8); margin-top: 12px; }

@media (max-width: 767px) {
  .tg-page-head { padding: 110px 0 36px; }
  .tg-page-head h1 { font-size: 28px; }
  .tg-prose { padding: 24px 20px; font-size: 16px; }
  .tg-page-body { padding: 32px 0 56px; }
}

/* ---------- Bài viết ---------- */
.tg-wrap--narrow { max-width: 900px; }
.tg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.tg-crumbs a { color: rgba(255,255,255,.85); }
.tg-crumbs a:hover { color: #fff; text-decoration: underline; }
.tg-lead { max-width: 720px; margin-top: 14px; font-size: 18px; color: rgba(255,255,255,.8); line-height: 1.6; }
.tg-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tg-cats a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.3); transition: background .2s, border-color .2s; }
.tg-cats a:hover { border-color: #fff; }
.tg-cats a.is-active { background: var(--brand); border-color: var(--brand); }

.tg-card-link { display: flex; flex-direction: column; height: 100%; }
.tg-card-img { position: relative; overflow: hidden; background: #eee; }
.tg-card-img img { transition: transform .5s; }
.tg-card:hover .tg-card-img img { transform: scale(1.05); }
.tg-chip { position: absolute; left: 14px; top: 14px; padding: 4px 12px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.tg-card-body { display: flex; flex-direction: column; flex: 1; }
.tg-card-body .tg-meta { margin-bottom: 8px; }
.tg-card-body h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tg-card:hover .tg-card-body h2 { color: var(--brand); }
.tg-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--brand); }
.tg-more .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.tg-card:hover .tg-more .material-symbols-outlined { transform: translateX(3px); }
.tg-meta { display: flex; align-items: center; gap: 4px; }
.tg-meta .material-symbols-outlined { font-size: 16px; }
.tg-empty { text-align: center; color: #666; padding: 40px 0; }

.tg-post-head h1 { font-size: 40px; max-width: 860px; }
.tg-post-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; color: rgba(255,255,255,.75); font-size: 14px; }
.tg-post-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.tg-post-meta .material-symbols-outlined { font-size: 18px; color: #ff5a64; }
.tg-article { max-width: none; }
.tg-article .tg-thumb { margin: -40px -40px 28px; }
.tg-article .tg-thumb img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 20px 20px 0 0; }
.tg-excerpt { font-size: 19px; font-weight: 500; color: #191c1d; border-left: 4px solid var(--brand); padding-left: 16px; }
.tg-prose h2 { font-size: 26px; padding-top: .2em; }
.tg-prose h3 { font-size: 20px; }
.tg-prose li + li { margin-top: .35em; }
.tg-prose strong { color: #191c1d; }
.tg-prose table { width: 100%; border-collapse: collapse; font-size: 16px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #e5e7eb; }
.tg-prose thead th { background: #191c1d; color: #fff; text-align: left; font-weight: 700; }
.tg-prose th, .tg-prose td { padding: 12px 16px; border-bottom: 1px solid #eceff1; white-space: nowrap; }
.tg-prose td { white-space: normal; }
.tg-prose tbody tr:nth-child(even) { background: #fafafa; }
.tg-prose blockquote { background: #fff5f5; border-radius: 0 12px 12px 0; padding: 14px 18px; font-style: normal; color: #3a3d40; }
.tg-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: #f1f3f4; color: #444; font-size: 14px; text-decoration: none; }

.tg-cta { margin: 40px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 22px; color: #fff;
  background: radial-gradient(500px 240px at 0% 0%, rgba(224,38,51,.55), transparent 70%), linear-gradient(135deg, #1d2021, #121415); }
.tg-cta h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 800; line-height: 1.25; margin: 4px 0 6px; }
.tg-cta p { color: rgba(255,255,255,.8); }
.tg-cta-kicker { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ff7a82 !important; }
.tg-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tg-page-body > .tg-wrap > .tg-cta { max-width: none; margin-top: 56px; }

.tg-related { margin-top: 64px; }
.tg-related > h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 800; margin-bottom: 24px; color: #191c1d; }

@media (max-width: 767px) {
  .tg-post-head h1 { font-size: 27px; }
  .tg-lead { font-size: 16px; }
  .tg-article .tg-thumb { margin: -24px -20px 20px; }
  .tg-prose h2 { font-size: 22px; }
  .tg-prose table { display: block; overflow-x: auto; }
  .tg-cta { padding: 24px 20px; }
  .tg-cta-actions .btn-hero { flex: 1 1 100%; justify-content: center; }
}