/* Nền tảng: reset tối thiểu + typography. CSS của component nằm ở file riêng. */

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

/* Bù chiều cao đầu trang dính khi nhảy neo (skip-link, #gpkm-form-tu-van...)
   — không có dòng này thì đích đến chui dưới lớp kính mờ (Task 4, vòng sửa 1). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--cao-dau-trang); }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-than);
  font-size: 1rem;
  line-height: var(--lh-than);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-family: var(--font-tieu-de);
  font-weight: 600;
  line-height: var(--lh-tieu-de);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--sp-3); }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--primary-dam); }

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

button, input, select, textarea { font: inherit; }

/* Vòng focus phải luôn thấy được — không bao giờ đặt outline:none trần. */
:focus-visible {
  outline: 2px solid var(--rose-red);
  outline-offset: 2px;
  border-radius: var(--bo-goc);
}

/* --- nút: thành phần dùng chung toàn site, đặt ở base.css vì có trang chỉ
   nạp base.css (ví dụ trang Liên hệ) mà vẫn cần nút có kiểu đầy đủ. --------- */

.gpkm-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 12px var(--sp-5);
  background: var(--rose-red);
  color: var(--surface);
  border: 2px solid var(--rose-red);
  border-radius: var(--bo-goc-vien-thuoc);
  font-family: var(--font-than);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(226, 45, 79, 0.2);
  transition: background var(--nhanh) var(--easing), transform var(--nhanh) var(--easing),
    box-shadow var(--nhanh) var(--easing), border-color var(--nhanh) var(--easing), color var(--nhanh) var(--easing);
}

.gpkm-nut:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
  transform: translateY(-2px);
  box-shadow: var(--bong-hong);
}

.gpkm-nut svg { width: 20px; height: 20px; }

.gpkm-nut--phu {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

.gpkm-nut--phu:hover {
  background: transparent;
  border-color: var(--rose-red);
  color: var(--rose-red);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .gpkm-nut:hover {
    transform: none;
    box-shadow: none;
  }
}

.gpkm-vo {
  width: 100%;
  max-width: var(--rong-toi-da);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

/* Chỉ ẩn với mắt, trình đọc màn hình vẫn đọc được. */
.gpkm-an-nhin {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gpkm-bo-qua-toi-noi-dung {
  position: absolute;
  left: var(--sp-3);
  top: -3rem;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: var(--vien);
  transition: top var(--nhanh) var(--easing);
}

.gpkm-bo-qua-toi-noi-dung:focus { top: var(--sp-3); }

/* --- đầu trang & chân trang ---------------------------------------------- */

/* Dính trên cùng + nền kính mờ (Luminous Vision). Cấu trúc hai tầng
   (__tren / __duoi / __giua) định nghĩa ở header.css, nạp sau file này —
   đừng khai báo lại .gpkm-dau-trang ở đó, sửa ngay tại đây (bài học Task 3). */
.gpkm-dau-trang {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kinh-nen);
  backdrop-filter: var(--kinh-mo);
  -webkit-backdrop-filter: var(--kinh-mo);
  box-shadow: var(--bong-hong);
}

/* Nút gọi ở đầu trang. Vùng chạm ≥44px vì đây là hành động chính trên mobile. */
.gpkm-hotline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 8px var(--sp-3);
  background: var(--accent-soft);
  border: 1px solid var(--rose-red);
  border-radius: var(--bo-goc);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.gpkm-hotline:hover { background: var(--surface); }
.gpkm-hotline__nhan { font-size: 0.8125rem; color: var(--ink-soft); }
.gpkm-hotline__so { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Khối liên hệ nhanh ở trang Liên hệ — style chính ở base.css .gpkm-trang. */

.gpkm-lien-he-nhanh__nhan {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gpkm-lien-he-nhanh__gt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
}

a.gpkm-lien-he-nhanh__gt { color: var(--primary); }

/* Logo + nav menu links: header.css (Luminous Vision redesign). */

.gpkm-noi-dung { min-height: 50vh; }

/* .gpkm-chan-trang chuyển hẳn sang footer.css (Task 5) — bài học Task 3/4:
   không khai cùng một lớp ở hai file, file nạp sau ghi đè thuộc tính rút gọn. */

/* --- nội dung trang & bài viết ------------------------------------------- */

.gpkm-trang {
  padding-block: var(--sp-7);
}

.gpkm-noi-dung-trang > h1,
.gpkm-trang > h1 {
  margin-bottom: var(--sp-5);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  font-weight: 700;
}

.gpkm-lien-he-nhanh {
  display: grid;
  gap: var(--sp-3);
  max-width: 640px;
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  list-style: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(226, 45, 79, 0.05);
}

.gpkm-prose > * { max-width: var(--do-rong-chu); }

/* Bảng, block WooCommerce và ảnh được trải rộng — bó chúng trong 54ch là vỡ. */
.gpkm-prose > table,
.gpkm-prose > figure,
.gpkm-prose > .wp-block-woocommerce-cart,
.gpkm-prose > .wp-block-woocommerce-checkout,
.gpkm-prose > .wp-block-group,
.gpkm-prose > .alignwide,
.gpkm-prose > .alignfull { max-width: none; }

.gpkm-meta-bai { color: var(--ink-soft); font-size: 0.875rem; }

/* --- dải 4 cam kết (Luminous Vision) ---------------------------------------
   Dựng lần đầu ở Task 7 cho trang chủ (khi đó khai ở home.css). Task 9 dùng
   lại nguyên khuôn "icon tròn + tiêu đề + mô tả" này cho trang chi tiết sản
   phẩm, nên chuyển hẳn sang đây — nơi cả hai trang cùng nạp (gpkm-base). Bài
   học Task 3: không khai cùng một lớp ở hai file CSS. */
.gpkm-cam-ket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .gpkm-cam-ket { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gpkm-cam-ket__muc {
  padding: var(--sp-5);
  background: var(--surface-2);
  border: 0;
  border-radius: var(--bo-goc-lon);
  text-align: center;
  transition: transform var(--vua) var(--easing);
}

.gpkm-cam-ket__muc:hover { transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .gpkm-cam-ket__muc:hover { transform: none; }
}

.gpkm-cam-ket__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--rose-red) 10%, transparent);
  border-radius: 50%;
  color: var(--rose-red);
}

.gpkm-cam-ket__icon svg { width: 24px; height: 24px; }

.gpkm-cam-ket__ten {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-tieu-de);
  font-size: 1rem;
}

.gpkm-cam-ket__mo-ta { margin: 0; color: var(--ink-soft); font-size: 0.875rem; }