/*
Theme Name: Quân Gà Long Biên
Description: Giao diện tiếng Việt cho Quân Gà Long Biên, với trang chủ và bài viết WordPress.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: quan-ga-long-bien
*/

:root {
  --forest: #2a241c;
  --green: #654a2e;
  --ink: #252b22;
  --muted: #51574a;
  --cream: #f2ede2;
  --line: #d9cdb9;
  --gold: #dfbf83;
  --paper: #fcf9f2;
  --wood: #211b15;
  --body: "Segoe UI", Arial, "DejaVu Sans", sans-serif;
  --display: Georgia, "Times New Roman", "DejaVu Serif", serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 1rem/1.6 var(--body); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.16; text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 400; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.wrap { width: min(72rem, calc(100% - 4rem)); margin-inline: auto; }
.skip { position: absolute; inset: .5rem auto auto .5rem; padding: .6rem .9rem; background: white; transform: translateY(-150%); z-index: 5; }
.skip:focus { transform: none; }

.masthead { background: #171411; color: #f8f4e6; }
.topline { min-height: 2rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .78rem; }
.topline a { color: var(--gold); }
.menu-band { background: var(--paper); color: var(--forest); border-bottom: 1px solid var(--line); }
.menu { min-height: 4.55rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.identity { display: flex; align-items: center; gap: .7rem; }
.identity .custom-logo { display: block; width: 3.15rem; height: 3.15rem; object-fit: contain; }
.wordmark { display: grid; gap: .13rem; text-decoration: none; font: 700 1.12rem/1.2 var(--display); }
.wordmark small { color: #6b5542; font: .73rem/1.4 var(--body); }
.menu nav { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
.menu nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 650; text-decoration: none; }
.menu nav a:hover { color: #79512a; text-decoration: underline; }
.menu nav a[aria-current="page"] { text-decoration: underline; }

.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff9e9; background: linear-gradient(105deg, #292219, #171411 75%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: clamp(29rem, 44vw, 37rem); }
.hero-copy { align-self: center; width: 100%; padding: clamp(2rem, 6vw, 5.6rem) 2.3rem clamp(2rem, 6vw, 5.6rem) max(2rem, calc((100vw - 72rem) / 2)); }
.kicker { font-size: .76rem; font-weight: 750; letter-spacing: .105em; text-transform: uppercase; color: var(--green); }
.hero .kicker, .contact .kicker { color: var(--gold); }
.hero-copy .kicker::before { display: inline-block; content: ""; width: 1.75rem; height: 1px; background: currentColor; margin: 0 .6rem .25em 0; }
h1 { font-size: clamp(2.9rem, 7.6vw, 6.1rem); line-height: 1.03; margin-block: .65rem .85rem; max-width: 9.5em; letter-spacing: -.04em; }
.hero-copy h1 { max-width: none; }
h1 span { display: block; color: var(--gold); }
.hero-copy > p:not(.kicker) { max-width: 30rem; color: #f5efdb; }
.hero-copy .motto { margin: 0 0 .85rem; font: italic 1.32rem/1.4 var(--display); color: var(--gold); }
.hero-visual { display: grid; place-items: center; min-width: 0; min-height: 28rem; position: relative; isolation: isolate; background: radial-gradient(ellipse at center, #4b3a27, #211a13 74%); }
.hero-visual img { display: block; position: absolute; inset: 1.2rem; width: calc(100% - 2.4rem); height: calc(100% - 2.4rem); object-fit: contain; }
.hero-visual::after { content: ""; pointer-events: none; position: absolute; inset: .65rem; border: 1px solid #dfbf8366; }
.photo-label { position: absolute; z-index: 1; bottom: 1.2rem; right: 1.2rem; padding: .28rem .55rem; border-radius: .25rem; background: #282c23ee; color: #fff9e9; font-size: .75rem; }

.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--gold); border-radius: .25rem; font-weight: 700; text-decoration: none; }
.button.primary { background: var(--gold); color: #20291b; }
.button:hover { background: #fff0be; color: #20291b; }

.section { padding-block: clamp(3rem, 6.5vw, 5.1rem); scroll-margin-top: .75rem; }
.section.white { background: var(--paper); }
.section.pale { background: #eae1d1; }
.heading { text-align: center; margin: 0 auto 1.8rem; max-width: 37rem; }
.heading h2, .contact h2 { margin: .4rem 0 .7rem; font-size: clamp(2rem, 4.6vw, 3.35rem); }
.heading h2::after { content: ""; width: 3rem; height: 2px; background: #90693b; display: block; margin: .9rem auto 0; }
.heading > p:last-child, .card > p, .article > p { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card { min-width: 0; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: .2rem; overflow: hidden; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem 1.15rem; }
.card h3, .article h3 { font: 700 1.22rem/1.25 var(--display); margin-bottom: .45rem; }
.card-body p, .article p { color: var(--muted); }
.card a { align-self: flex-start; display: inline-flex; align-items: center; margin-top: auto; min-height: 44px; color: var(--green); font-weight: 700; }
.card-body p { margin-bottom: .35rem; }

.catalog { background: var(--cream); }
.catalog .card { box-shadow: 0 6px 20px #49382b0c; }
.catalog .card-body { padding: .9rem 1rem 1rem; border-top: 1px solid var(--line); }
.catalog .card h3 { margin-top: .3rem; }
.catalog .card-body > .kicker { color: var(--green); }
.catalog .card a { margin-top: auto; }
.empty-list { max-width: 38rem; margin-inline: auto; text-align: center; padding: 1.1rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--paper); }

.story { max-width: 49rem; }
.story > p + p { margin-top: 1rem; }
.article { min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: .42rem; padding: 1.05rem 1.15rem; }
.article .kicker { margin-bottom: .45rem; }
.latest-title { margin-block: 2rem 1rem; }

.contact { color: #fff8e6; background: var(--wood); }
.contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 1.25rem; padding-block: 2.6rem; }
.contact-inner p:not(.kicker) { max-width: 40rem; color: #f3edd9; }
.contact .actions { margin-top: 0; }
.footer { border-top: 1px solid #ffffff45; background: #171411; color: #f3edd9; }
.footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; padding-block: 1.2rem; font-size: .87rem; }

.entry { max-width: 52rem; padding-block: clamp(2.5rem, 7vw, 5rem); }
.entry h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.03em; max-width: none; }
.entry-content { overflow-wrap: anywhere; }
.entry-content > * + * { margin-top: 1.1rem; }
.entry-content img, .post-card img { max-width: 100%; height: auto; }
.entry-content figure { max-width: 100%; margin-inline: 0; }
.entry-content iframe { max-width: 100%; }
.post-card a { color: var(--forest); }
.post-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-list { display: grid; gap: 1.25rem; }
.post-list h2 { margin-bottom: .4rem; }
.pagination { margin-top: 1.5rem; }
.listing-photo { margin-block: 1rem 1.5rem; }
.listing-photo img { max-width: 100%; height: auto; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .menu { align-items: start; flex-direction: column; gap: .45rem; padding-top: .75rem; }
  .menu nav { gap: 0 .85rem; }
  .menu nav a { font-size: .82rem; }
  .grid, .contact-inner, .hero-layout { grid-template-columns: 1fr; }
  .contact-inner .button { justify-self: start; }
  .hero-copy { justify-self: start; padding: 2.5rem 1rem; }
  .hero-visual { min-height: 0; height: clamp(18rem, 92vw, 28rem); }
}

@media (max-width: 370px) {
  .topline { font-size: .72rem; }
}<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function qglb_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'wp-block-styles' );
    add_theme_support( 'custom-logo', array( 'flex-width' => true, 'flex-height' => true ) );
    add_theme_support( 'custom-header', array(
        'width' => 1200,
        'height' => 900,
        'flex-width' => true,
        'flex-height' => true,
        'header-text' => false,
    ) );
}
add_action( 'after_setup_theme', 'qglb_setup' );

function qglb_enqueue_assets() {
    wp_enqueue_style( 'qglb-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'qglb_enqueue_assets' );

function qglb_register_listing() {
    register_post_type(
        'qglb_ga',
        array(
            'labels' => array(
                'name' => 'Danh sách gà',
                'singular_name' => 'Gà',
                'add_new' => 'Thêm gà',
                'add_new_item' => 'Thêm gà hoặc cặp gà',
                'edit_item' => 'Chỉnh sửa thông tin gà',
                'featured_image' => 'Ảnh đại diện',
                'set_featured_image' => 'Chọn ảnh đại diện',
            ),
            'public' => true,
            'show_in_rest' => true,
            'menu_icon' => 'dashicons-camera',
            'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'revisions' ),
            'rewrite' => false,
        )
    );
}
add_action( 'init', 'qglb_register_listing' );
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> id="trang-chu">
<?php wp_body_open(); ?>
<a class="skip" href="#noi-dung">Đến nội dung chính</a>

<header>
  <div class="masthead">
    <div class="wrap topline">
      <span>Long Biên, Hà Nội</span>
      <a href="tel:+84971984444">097.198.4444</a>
    </div>
  </div>

  <div class="menu-band">
    <div class="wrap menu">
      <div class="identity">
        <?php if ( has_custom_logo() ) { the_custom_logo(); } ?>
        <a class="wordmark" href="<?php echo esc_url( home_url( '/' ) ); ?>">
          QUÂN GÀ LONG BIÊN
          <small>Vạn Sự Tùy Duyên</small>
        </a>
      </div>

      <nav aria-label="Điều hướng chính">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" <?php if ( is_front_page() ) { echo 'aria-current="page"'; } ?>>Trang chủ</a>
        <a href="<?php echo esc_url( home_url( '/#ga-dang-co' ) ); ?>">Gà đang có</a>
        <a href="<?php echo esc_url( home_url( '/#ve-quan-ga-long-bien' ) ); ?>">Về Quân Gà Long Biên</a>
        <a href="<?php echo esc_url( home_url( '/#kinh-nghiem' ) ); ?>">Kinh nghiệm chơi gà</a>
        <a href="<?php echo esc_url( home_url( '/#lien-he' ) ); ?>">Liên hệ</a>
      </nav>
    </div>
  </div>
</header>
<?php get_header(); ?>

<main id="noi-dung">
  <section class="hero" aria-labelledby="tieu-de">
    <div class="hero-layout">
      <div class="hero-copy">
        <p class="kicker">Gà tre Bắc · Long Biên, Hà Nội</p>
        <h1 id="tieu-de">Quân Gà <span>Long Biên</span></h1>
        <p class="motto">Vạn Sự Tùy Duyên</p>
        <p>Mình là Quân. Mình chơi gà tre Bắc từ năm 2020. Đây là nơi mình chia sẻ cách chọn gà và những chú gà anh em có thể hẹn qua xem trực tiếp.</p>
        <div class="actions">
          <a class="button primary" href="#ga-dang-co">Xem gà đang có</a>
          <a class="button" href="https://zalo.me/0971984444">Nhắn Quân qua Zalo</a>
        </div>
      </div>

      <div class="hero-visual">
        <?php if ( get_header_image() ) : ?>
          <img class="hero-photo" src="<?php echo esc_url( get_header_image() ); ?>" alt="">
        <?php elseif ( file_exists( get_theme_file_path( 'assets/ga-duoi-tan-tre.webp' ) ) ) : ?>
          <img class="hero-photo" src="<?php echo esc_url( get_theme_file_uri( 'assets/ga-duoi-tan-tre.webp' ) ); ?>" width="941" height="1672" alt="Gà tre dưới tán tre">
          <span class="photo-label">Ảnh minh họa</span>
        <?php endif; ?>
      </div>
    </div>
  </section>

  <section class="section catalog" id="ga-dang-co" aria-labelledby="tieu-de-danh-sach">
    <div class="wrap">
      <div class="heading">
        <p class="kicker">Danh sách tại trại</p>
        <h2 id="tieu-de-danh-sach">Gà đang có</h2>
        <p>Dành cho anh em mới chơi, tìm cặp làm giống hoặc sưu tầm gà mini tuyển.</p>
      </div>

      <?php
      $listings = new WP_Query( array(
          'post_type' => 'qglb_ga',
          'post_status' => 'publish',
          'posts_per_page' => -1,
      ) );
      ?>

      <?php if ( $listings->have_posts() ) : ?>
        <div class="grid">
          <?php while ( $listings->have_posts() ) : $listings->the_post(); ?>
            <article <?php post_class( 'card post-card' ); ?>>
              <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'medium_large' ); } ?>
              <div class="card-body">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <?php if ( has_excerpt() ) { the_excerpt(); } ?>
              </div>
            </article>
          <?php endwhile; ?>
        </div>
      <?php else : ?>
        <p class="empty-list">Danh sách gà sẽ được cập nhật tại đây. Anh em muốn hỏi trước có thể <a href="https://zalo.me/0971984444">nhắn Quân qua Zalo</a>.</p>
      <?php endif; ?>
      <?php wp_reset_postdata(); ?>
    </div>
  </section>

  <section class="section white" id="ve-quan-ga-long-bien" aria-labelledby="tieu-de-gioi-thieu">
    <div class="wrap story">
      <div class="heading">
        <p class="kicker">Từ năm 2020</p>
        <h2 id="tieu-de-gioi-thieu">Về Quân Gà Long Biên</h2>
      </div>
      <p>Mình bắt đầu chơi gà tre Bắc từ năm 2020. Điều khiến mình thích dòng gà này là vóc dáng nhỏ gọn. Anh em có sân vườn nhỏ hoặc diện tích nuôi hạn chế vẫn có thể cân nhắc nếu bố trí được chỗ nuôi phù hợp.</p>
      <p>Khi chọn gà, mình nhìn <strong>đầu và mặt</strong> trước để xem thần thái. Sau đó mình lùi ra nhìn <strong>phom tổng thể và dáng đứng</strong> để xem con gà có cân đối không. Cuối cùng, mình xem <strong>màu sắc, độ bóng và độ ôm của bộ lông</strong> dưới ánh sáng tự nhiên.</p>
    </div>
  </section>

  <section class="section" id="kinh-nghiem" aria-labelledby="tieu-de-kinh-nghiem">
    <div class="wrap">
      <div class="heading">
        <p class="kicker">Góc đam mê</p>
        <h2 id="tieu-de-kinh-nghiem">Kinh nghiệm chơi gà</h2>
      </div>

      <div class="grid">
        <article class="article">
          <p class="kicker">Mới chơi</p>
          <h3>Chọn cặp đầu tiên</h3>
          <p>Chốt mục đích nuôi, chỗ nuôi và khoảng giá trước. Khi xem gà, so vài cặp cùng tầm giá để nhận ra dáng và màu lông mình thích.</p>
        </article>
        <article class="article">
          <p class="kicker">Xem ảnh</p>
          <h3>Nhìn đầu mặt và phom dáng</h3>
          <p>Ảnh chính diện giúp nhìn đầu mặt. Ảnh nghiêng toàn thân giúp xem dáng đứng và tỷ lệ giữa thân, chân và đuôi.</p>
        </article>
        <article class="article">
          <p class="kicker">Xem video</p>
          <h3>Quan sát lúc gà đi lại</h3>
          <p>Xin một đoạn video quay đủ thân gà khi đứng và di chuyển dưới ánh sáng tự nhiên để xem dáng đi và sắc lông.</p>
        </article>
      </div>

      <?php $latest = new WP_Query( array( 'posts_per_page' => 6, 'ignore_sticky_posts' => true ) ); ?>

      <?php if ( $latest->have_posts() ) : ?>
        <h3 class="latest-title">Bài viết mới</h3>
        <div class="grid">
          <?php while ( $latest->have_posts() ) : $latest->the_post(); ?>
            <article <?php post_class( 'card post-card' ); ?>>
              <?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'medium_large' ); } ?>
              <div class="card-body">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <?php the_excerpt(); ?>
              </div>
            </article>
          <?php endwhile; ?>
        </div>
      <?php endif; ?>
      <?php wp_reset_postdata(); ?>
    </div>
  </section>

  <section class="contact" id="lien-he" aria-labelledby="tieu-de-lien-he">
    <div class="wrap contact-inner">
      <div>
        <p class="kicker">Long Biên, Hà Nội</p>
        <h2 id="tieu-de-lien-he">Hẹn xem gà trực tiếp</h2>
        <p>Giờ xem gà <strong>09:00–16:00</strong>. Ngoài khung giờ này, anh em nhắn hoặc gọi Quân hẹn trước khi đến.</p>
      </div>
      <div class="actions">
        <a class="button primary" href="https://zalo.me/0971984444">Nhắn Zalo</a>
        <a class="button" href="tel:+84971984444">Gọi 097.198.4444</a>
        <a class="button" href="https://www.facebook.com/quangalongbien">Facebook</a>
      </div>
    </div>
  </section>
</main>

<?php get_footer(); ?>
<?php get_header(); ?>

<main id="noi-dung" class="wrap entry">
  <?php if ( is_singular() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article <?php post_class(); ?>>
        <h1><?php the_title(); ?></h1>

        <?php if ( is_singular( 'qglb_ga' ) && has_post_thumbnail() ) : ?>
          <div class="listing-photo"><?php the_post_thumbnail( 'large' ); ?></div>
        <?php endif; ?>

        <div class="entry-content">
          <?php
          the_content();
          wp_link_pages();
          ?>
        </div>

        <?php if ( is_singular( 'qglb_ga' ) ) : ?>
          <p class="actions">
            <a class="button primary" href="https://zalo.me/0971984444">Hỏi Quân về chú gà này</a>
          </p>
        <?php endif; ?>
      </article>
    <?php endwhile; ?>

  <?php elseif ( is_404() ) : ?>
    <h1>Không tìm thấy trang</h1>
    <p><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Quay về trang chủ</a></p>

  <?php else : ?>
    <h1><?php echo is_archive() ? esc_html( wp_strip_all_tags( get_the_archive_title() ) ) : 'Bài viết'; ?></h1>
    <div class="post-list">
      <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
          <article <?php post_class(); ?>>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_excerpt(); ?>
          </article>
        <?php endwhile; ?>
      <?php else : ?>
        <p>Chưa có bài viết.</p>
      <?php endif; ?>
    </div>
    <?php the_posts_pagination(); ?>
  <?php endif; ?>
</main>

<?php get_footer(); ?>
<footer class="footer">
  <div class="wrap">
    <strong>QUÂN GÀ LONG BIÊN</strong>
    <span>Đam mê · Giao lưu · Kết nối · Truyền giống</span>
    <a href="#trang-chu">Về đầu trang</a>
  </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>