/*
Theme Name: Gon
Theme URI: https://gon.life
Author: Trần Nguyễn Đông Gon
Author URI: https://gon.life
Description: Theme riêng cho gon.life. Nhẹ, không phụ thuộc page builder. Dùng chung bộ màu và font với plugin Design by Gon và Gon Podcast.
Version: 1.4.8
Requires at least: 6.1
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gon
Tags: custom-theme, woocommerce
*/

/* ==========================================================================
   1. BIẾN THƯƠNG HIỆU
   Sửa màu ở đây là đổi toàn site. Plugin cũng đọc chung bộ biến này.
   ========================================================================== */

:root {
  /* Màu */
  --gon-ink:    #1B1810; /* chữ chính, nền tối */
  --gon-paper:  #EAE2CC; /* nền sáng */
  --gon-clay:   #B23A2E; /* CTA, nút mua */
  --gon-moss:   #5C6142; /* phụ */
  --gon-gold:   #C98A2C; /* nhấn */
  --gon-cream:  #F7F2E7; /* nền thẻ */
  --gon-dark:   #141109; /* nền vũ trụ, dùng chung với hai plugin */

  /* Vùng tối: dùng cho header, footer, và mọi chỗ nối với plugin */
  --gon-on-dark:      #F7F2E7;
  --gon-on-dark-dim:  rgba(247, 242, 231, 0.48);
  --gon-hair:         rgba(247, 242, 231, 0.09);

  /* Màu suy ra, dùng cho viền và chữ mờ */
  --gon-line:   rgba(27, 24, 16, 0.14);
  --gon-muted:  rgba(27, 24, 16, 0.64);

  /* Font */
  --gon-font-display: 'Space Grotesk', system-ui, sans-serif;
  --gon-font-body:    'Inter', system-ui, sans-serif;
  --gon-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Thang chữ */
  --gon-text-xs:  0.8125rem;
  --gon-text-sm:  0.9375rem;
  --gon-text-base: 1.0625rem;
  --gon-text-lg:  1.25rem;
  --gon-text-xl:  1.5rem;
  --gon-text-2xl: 2rem;
  --gon-text-3xl: 2.75rem;

  /* Khoảng cách */
  --gon-space-1: 0.5rem;
  --gon-space-2: 1rem;
  --gon-space-3: 1.5rem;
  --gon-space-4: 2.5rem;
  --gon-space-5: 4rem;
  --gon-space-6: 6rem;

  /* Bố cục */
  --gon-width:       1120px;
  --gon-width-text:  680px;
  --gon-radius:      4px;
  --gon-header-h:    72px;
}

/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--gon-dark); }

body {
  margin: 0;
  font-family: var(--gon-font-body);
  font-size: var(--gon-text-base);
  line-height: 1.7;
  color: var(--gon-on-dark);
  background: var(--gon-dark);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gon-clay); text-underline-offset: 0.2em; }
a:hover { color: var(--gon-gold); }

h1, h2, h3, h4 {
  font-family: var(--gon-font-display);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--gon-space-2);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--gon-text-3xl); }
h2 { font-size: var(--gon-text-2xl); }
h3 { font-size: var(--gon-text-xl); }
h4 { font-size: var(--gon-text-lg); }

p, ul, ol { margin: 0 0 var(--gon-space-2); }

code, kbd, pre { font-family: var(--gon-font-mono); font-size: 0.9em; }

blockquote {
  margin: var(--gon-space-3) 0;
  padding-left: var(--gon-space-2);
  border-left: 3px solid var(--gon-gold);
  color: var(--gon-muted);
}

hr { border: 0; border-top: 1px solid var(--gon-line); margin: var(--gon-space-4) 0; }

/* Toàn bộ trang thường dùng cùng nền tối với landing và podcast. */
body {
  --gon-line: rgba(247, 242, 231, 0.12);
  --gon-muted: rgba(247, 242, 231, 0.62);
}

:is(.gon-prose, .entry-content, .woocommerce-content) { color: var(--gon-on-dark); }
:is(.gon-prose, .entry-content) :is(h1, h2, h3, h4, strong) { color: var(--gon-on-dark); }
:is(.gon-prose, .entry-content) :is(p, li, blockquote) { color: rgba(247, 242, 231, 0.74); }

/* Bàn phím phải nhìn thấy được vị trí đang đứng */
:focus-visible {
  outline: 2px solid var(--gon-clay);
  outline-offset: 2px;
}

/* Trên nền tối thì Clay chìm, đổi sang Gold */
.gon-header :focus-visible,
.gon-footer :focus-visible {
  outline-color: var(--gon-gold);
}

/* Cho người bật giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Chỉ đọc màn hình mới thấy */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--gon-ink); color: var(--gon-paper);
  padding: var(--gon-space-1) var(--gon-space-2); z-index: 999;
}
.skip-link:focus { left: var(--gon-space-2); top: var(--gon-space-1); }

/* ==========================================================================
   3. BỐ CỤC
   ========================================================================== */

.gon-wrap {
  width: 100%;
  max-width: var(--gon-width);
  margin-inline: auto;
  padding-inline: var(--gon-space-2);
}

.gon-main { padding-block: var(--gon-space-5); min-height: 50vh; }

/* Bài viết đọc lâu thì hẹp lại cho đỡ mỏi mắt */
.gon-prose { max-width: var(--gon-width-text); }

/* ==========================================================================
   4. ĐẦU TRANG
   Biến --dbg-promo-h do plugin Design by Gon đặt khi bật thanh ưu đãi.
   ========================================================================== */

.gon-header {
  position: relative;
  z-index: 100;
  background: var(--gon-dark);
  color: var(--gon-on-dark);
  border-bottom: 1px solid var(--gon-hair);
  /* Không dùng transform ở đây. Transform làm vỡ position:fixed của giỏ hàng Woo. */
}

.gon-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gon-space-2);
  min-height: var(--gon-header-h);
}

.gon-logo {
  font-family: var(--gon-font-display);
  font-weight: 700;
  font-size: var(--gon-text-lg);
  color: var(--gon-on-dark);
  text-decoration: none;
}
.gon-logo img { max-height: 40px; width: auto; display: block; }

.gon-nav ul {
  display: flex;
  gap: var(--gon-space-3);
  list-style: none;
  margin: 0; padding: 0;
}
.gon-nav a {
  color: var(--gon-on-dark-dim);
  text-decoration: none;
  font-size: var(--gon-text-sm);
  font-weight: 500;
}
.gon-nav a:hover,
.gon-nav .current-menu-item > a { color: var(--gon-gold); }

.gon-burger {
  display: none;
  background: none; border: 1px solid var(--gon-hair);
  border-radius: var(--gon-radius);
  padding: 0.4rem 0.7rem;
  font-family: var(--gon-font-body);
  font-size: var(--gon-text-sm);
  color: var(--gon-on-dark);
  cursor: pointer;
}

@media (max-width: 860px) {
  .gon-burger { display: block; }
  .gon-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--gon-dark);
    border-bottom: 1px solid var(--gon-hair);
    padding: var(--gon-space-2);
  }
  .gon-nav.is-open { display: block; }
  .gon-nav ul { flex-direction: column; gap: var(--gon-space-2); }
}

/* ==========================================================================
   5. THẺ BÀI VIẾT
   ========================================================================== */

.gon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gon-space-3);
}

.gon-card {
  background: var(--gon-cream);
  border: 1px solid var(--gon-line);
  border-radius: var(--gon-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gon-card__thumb { display: block; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.gon-card__body { padding: var(--gon-space-2); }
.gon-card__title { font-size: var(--gon-text-lg); margin-bottom: 0.35rem; }
.gon-card__title a { color: var(--gon-ink); text-decoration: none; }
.gon-card__title a:hover { color: var(--gon-clay); }

.gon-meta {
  font-family: var(--gon-font-mono);
  font-size: var(--gon-text-xs);
  color: var(--gon-muted);
}

/* ==========================================================================
   6. NÚT
   ========================================================================== */

.gon-btn,
.wp-block-button__link {
  display: inline-block;
  background: var(--gon-clay);
  color: var(--gon-cream);
  font-family: var(--gon-font-body);
  font-weight: 600;
  font-size: var(--gon-text-sm);
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--gon-radius);
  text-decoration: none;
  cursor: pointer;
}
.gon-btn:hover,
.wp-block-button__link:hover { background: var(--gon-ink); color: var(--gon-cream); }

.gon-btn--ghost {
  background: transparent;
  color: var(--gon-ink);
  border: 1px solid var(--gon-ink);
}
.gon-btn--ghost:hover { background: var(--gon-ink); color: var(--gon-paper); }

/* ==========================================================================
   7. PHÂN TRANG
   ========================================================================== */

.gon-pagination { margin-top: var(--gon-space-4); }
.gon-pagination .page-numbers {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  margin-right: 0.25rem;
  border: 1px solid var(--gon-line);
  border-radius: var(--gon-radius);
  text-decoration: none;
  color: var(--gon-ink);
  font-family: var(--gon-font-mono);
  font-size: var(--gon-text-sm);
}
.gon-pagination .page-numbers.current,
.gon-pagination .page-numbers:hover { background: var(--gon-ink); color: var(--gon-paper); }

/* ==========================================================================
   8. CHÂN TRANG
   ========================================================================== */

.gon-footer {
  background: var(--gon-ink);
  color: var(--gon-paper);
  padding-block: var(--gon-space-4);
  margin-top: var(--gon-space-6);
}
.gon-footer a { color: var(--gon-gold); }
.gon-footer a:hover { color: var(--gon-paper); }
.gon-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gon-space-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--gon-text-sm);
}
.gon-footer ul {
  display: flex; flex-wrap: wrap; gap: var(--gon-space-2);
  list-style: none; margin: 0; padding: 0;
}
.gon-footer a { text-decoration: none; }

/* ==========================================================================
   9. WOOCOMMERCE
   Đây là CSS thay cho phần Elementor từng lo. Bám vào class gốc của Woo,
   không phải class e-checkout__* của Elementor nữa.
   ========================================================================== */

.woocommerce-page .gon-main { padding-block: var(--gon-space-4); }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gon-space-3);
  margin: 0; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--gon-cream);
  border: 1px solid var(--gon-line);
  border-radius: var(--gon-radius);
  padding: var(--gon-space-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--gon-font-display);
  font-size: var(--gon-text-lg);
  padding: 0;
}

.woocommerce div.product .product_title { font-size: var(--gon-text-2xl); }
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--gon-clay);
  font-family: var(--gon-font-mono);
  font-weight: 600;
}

/* Nút Woo dùng chung một kiểu với nút theme */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--gon-clay);
  color: var(--gon-cream);
  font-family: var(--gon-font-body);
  font-weight: 600;
  border-radius: var(--gon-radius);
  padding: 0.75rem 1.5rem;
  line-height: 1.4;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  background: var(--gon-ink);
  color: var(--gon-cream);
}

/* Ô nhập của trang thanh toán */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  border: 1px solid var(--gon-line);
  border-radius: var(--gon-radius);
  padding: 0.7rem 0.9rem;
  font-family: var(--gon-font-body);
  font-size: var(--gon-text-base);
  background: #fff;
}
.woocommerce form .form-row label { font-weight: 500; font-size: var(--gon-text-sm); }

/* Khối tổng tiền và ô đặt hàng */
.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
  background: var(--gon-cream);
  border: 1px solid var(--gon-line);
  border-radius: var(--gon-radius);
}
.woocommerce-checkout #payment { padding: var(--gon-space-2); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--gon-line); }
.woocommerce-checkout #payment div.payment_box { background: var(--gon-paper); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--gon-paper); }

/* Thông báo của Woo */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--gon-moss); }
.woocommerce-error { border-top-color: var(--gon-clay); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gon-moss); }

/* Trang tài khoản */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--gon-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: 0.7rem 0;
  color: var(--gon-ink); text-decoration: none;
  font-size: var(--gon-text-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--gon-clay); font-weight: 600; }

@media (max-width: 700px) {
  :root { --gon-text-3xl: 2rem; --gon-text-2xl: 1.625rem; }
  .woocommerce-page .col2-set .col-1,
  .woocommerce-page .col2-set .col-2 { width: 100%; float: none; }
}

/* ==========================================================================
   10. CHỖ NỐI VỚI PLUGIN
   Trang chủ [gon_home], landing [gon_landing] và player [gon_podcast] đều
   tự mang nền vũ trụ tối và tự tràn hết chiều ngang. Theme phải nhường chỗ,
   nếu không sẽ có viền Paper sáng hở ra quanh khối tối.
   ========================================================================== */

/* Body class do theme thêm khi trang có một trong ba shortcode trên */
body.gon-bleed .gon-main {
  padding-block: 0;   /* bỏ khoảng đệm, khối tối chạm thẳng header */
  background: var(--gon-dark);
}

body.gon-bleed .gon-footer { margin-top: 0; }

/* Không bọc trong khung hẹp nữa */
body.gon-bleed .gon-main > .gon-wrap {
  max-width: none;
  padding-inline: 0;
}

/* Chặn thanh cuộn ngang thừa do 100vw tính cả bề rộng thanh cuộn */
body.gon-bleed { overflow-x: hidden; }

/* Ba trang giao dịch được định dạng riêng trong assets/commerce.css. */

/* ==========================================================================
   11. THANH ƯU ĐÃI
   Plugin Design by Gon đặt --dbg-promo-h khi bật thanh. Header đã tính rồi,
   phần này chỉ lo neo cho khối tối bên dưới.
   ========================================================================== */

body.gon-bleed .gon-main { scroll-margin-top: var(--dbg-promo-h, 0px); }

/* Khung không giới hạn, dùng cho trang do plugin dựng */
.gon-full { width: 100%; }

/* ==========================================================================
   12. SỬA LỖI SAU LƯỢT THỬ ĐẦU
   ========================================================================== */

/* ─────────── logo ───────────
   the_custom_logo() của WordPress in ra <img class="custom-logo">, không
   nằm trong .gon-logo. Luật cũ chỉ nhắm .gon-logo img nên logo hiện
   nguyên cỡ ảnh gốc, choán hết đầu trang. */

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.custom-logo-link img,
#dbg-root ~ * .custom-logo,
.gon-header .custom-logo {
	max-height: 40px;
	width: auto;
	height: auto;
	display: block;
}

@media (max-width: 640px) {
	.custom-logo-link img { max-height: 32px; }
}

/* ─────────── biểu tượng còn sót của Elementor ───────────
   Nội dung cũ do Elementor dựng có chèn biểu tượng dạng SVG. Elementor
   tắt rồi thì CSS ràng buộc kích thước cũng mất, SVG bung ra bằng cả
   khung nhìn. Chặn lại cho tới khi nội dung đó được thay hết. */

.entry-content svg,
.woocommerce-Tabs-panel svg,
.elementor-icon svg,
.elementor-accordion svg,
.elementor-toggle svg {
	width: 1em;
	height: 1em;
	max-width: 1em;
	vertical-align: middle;
}

/* Ảnh trong nội dung cũng không được vượt khung */
.entry-content img,
.woocommerce-Tabs-panel img { max-width: 100%; height: auto; }

/* ─────────── trang WooCommerce ───────────
   Woo tự in tiêu đề trang, theme không in thêm nữa (xử lý trong PHP).
   Phần dưới chỉ chỉnh lại khoảng cách cho khỏi hụt. */

.woocommerce-cart .gon-main,
.woocommerce-checkout .gon-main,
.woocommerce-account .gon-main { padding-block: var(--gon-space-4); }

/* Dark surfaces for archives, posts and non-commerce Woo pages. */
.gon-card,
.woocommerce ul.products li.product,
.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order { background:#1b170e; color:var(--gon-on-dark); }
.gon-card__title a,
.gon-btn--ghost,
.gon-pagination .page-numbers,
.woocommerce-account .woocommerce-MyAccount-navigation a { color:var(--gon-on-dark); }
.gon-btn--ghost { border-color:rgba(247,242,231,.35); }
.gon-btn:hover,.wp-block-button__link:hover,
.gon-pagination .page-numbers.current,.gon-pagination .page-numbers:hover { background:var(--gon-gold);color:#141109; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text { background:#211d13;color:var(--gon-on-dark);border-color:rgba(247,242,231,.18); }
.woocommerce-checkout #payment div.payment_box { background:#282217;color:var(--gon-on-dark); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color:#282217; }