/* ==========================================================================
   MODERN CSS RESET 2026 - STANDARD VERSION
   ========================================================================== */

/* 1. Thiết lập Box-sizing chuẩn cho toàn bộ trang */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 1. Xử lý lỗi giật ngang do thanh cuộn */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  overflow-y: scroll; 
  scrollbar-gutter: stable; 
}

/* 2. Hiệu ứng Fade-in (Chỉ thay đổi độ mờ, không thay đổi vị trí để tránh giật layout) */
@keyframes fadeInPage {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  background-color: #fff;
  animation: fadeInPage 0.3s ease-out forwards;
}

/* 3. Class này dùng để làm mờ trang trước khi thoát (được JS gọi) */
body.is-transitioning {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

#top-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  background-color: var(--brand-color-2);
  z-index: 99999;
  width: 0%;
  transition: width 0.05s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(33, 103, 221, 0.5), 0 0 5px rgba(33, 103, 221, 0.5);
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* 3. Reset Typography & Links */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

ul,
ol {
  list-style: none;
}

/* 4. Reset Media Elements (Ảnh, Video, SVG) */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 5. Reset Form Elements (Rất quan trọng cho UX) */
input,
button,
textarea,
select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   BASE STYLES (Dành riêng cho dự án của bạn)
   ========================================================================== */

body {
  font-family: "Google Sans", sans-serif;
  color: var(--gray-900, #20283d);
  background-color: #fff;
}

h1,
h2,
h3,
h4,
.section-title,
.nav__link,
.stats-value,
.btn {
  font-weight: 700;
}

p,
span,
a,
label,
input,
textarea {
  font-weight: 400;
}

/* Variable font cho các con số hoặc tiêu đề cực đậm */
.stats-value,
.fs-timer-val {
  font-variation-settings: "weight" 800;
}

/* Khai báo Font Google Sans Nội bộ */

/* Cỡ chữ Thường */
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Cỡ chữ Đậm */
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cỡ chữ Cực đậm (Dùng cho Flash Sale) */
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. CUSTOM GRID SYSTEM & VARIABLES (Hệ thống lưới tùy chỉnh và biến màu sắc)
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Helper class để dàn hàng ngang nhanh */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Define varible (Khai báo biến) */
:root {
  --text-primary: #000000;
  --brand-color-1: #2167dd;
  --brand-color-2: #fc8405;
  --brand-color-3: #047857;
  --brand-color-3-light: #17a87f;
  --brand-color-3-tint: #ecfdf5; 
  --brand-color-1-dark: #054a76;
  --brand-color-1-light: #c4e5f9;
  --blue-50: #f0fbff;
  --blue-100: #eaeffa;
  --blue-150: #c1d0f6;
  --blue-200: #acc0f3;
  --blue-300: #769dea;
  --blue-400: #306de4;
  --blue-500: #1250dc;
  --blue-600: #0037c1;
  --blue-700: #002c9a;
  --blue-800: #002174;
  --blue-900: #00164d;
  --blue-1000: #000b27;
  --black: #000;
  --white: #fff;
  --white-200: #fcfcfc;
  --gray-100: #f6f7f9;
  --gray-150: #edf0f3;
  --gray-200: #e4e8ed;
  --gray-300: #d9dfe5;
  --gray-400: #c1c8d1;
  --gray-500: #a9b2be;
  --gray-600: #657384;
  --gray-700: #4a4f63;
  --gray-800: #2f364a;
  --gray-800-80: rgba(47, 54, 74, 0.8);
  --gray-900: #20283d;
  --gray-1000: #020b27;
  --red-100: var(--white) bfa;
  --red-200: #fef3f2;
  --red-300: #fee4e2;
  --red-400: #ffcdca;
  --red-500: #fda29b;
  --red-600: #fa7066;
  --red-700: #f04438;
  --red-800: #d92d20;
  --red-900: #b42318;
  --red-1000: #912018;

  --border-radius-none: 0px; /* Cạnh vuông góc (không bo) */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;

  --border-radius-pill: 9999px; /* Bo dạng viên thuốc: Hai đầu tròn xoe, thân dài (như nút "Xem thêm") */
  --border-radius-circle: 50%;
}
/* END VARIABLES */

/* ==========================================================================
   TỐI ƯU RESPONSIVE
   ========================================================================== */

/* ÉP KÍCH THƯỚC CHỮ CHO MÀN HÌNH DI ĐỘNG */
@media screen and (max-width: 576px) {
  html {
    /* Sử dụng 10px làm nền tảng, nhưng tăng dần theo độ rộng màn hình */
    font-size: calc(10px + 0.5vw) !important;
  }
}

/* Với các thiết bị siêu nét như S22 Ultra, ép thêm một lần nữa nếu cần */
@media screen and (min-device-width: 360px) and (max-device-width: 450px) and (-webkit-min-device-pixel-ratio: 3) {
  html {
    font-size: 13px !important; /* Ép cứng base font lên 13px cho các máy này */
  }
}

/* END RESPONSIVE */

/* ==========================================================================
   TỐI ƯU SVG ICONS
   ========================================================================== */

/* 1. Cấu hình chung cho khung chứa */
.js-svg-inject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* 2. ICON DẠNG NÉT (Dùng cho: Map-pin, File-text, Quy trình, Stats...) */
.js-svg-inject:not(.footer__social-link .js-svg-inject):not(
    [data-icon="star"]
  ):not([data-icon="zalo"])
  svg
  path,
.js-svg-inject:not(.footer__social-link .js-svg-inject):not(
    [data-icon="star"]
  ):not([data-icon="zalo"])
  svg
  circle,
.js-svg-inject:not(.footer__social-link .js-svg-inject):not(
    [data-icon="star"]
  ):not([data-icon="zalo"])
  svg
  line,
.js-svg-inject:not(.footer__social-link .js-svg-inject):not(
    [data-icon="star"]
  ):not([data-icon="zalo"])
  svg
  rect {
  stroke-width: 1.5 !important;
  vector-effect: non-scaling-stroke !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* 3. ICON MẠNG XÃ HỘI (Facebook, Instagram, Youtube, Tiktok...) */
.footer__social-link .js-svg-inject svg path,
.footer__social-link .js-svg-inject svg circle,
.footer__social-link .js-svg-inject svg polygon {
  fill: #ffffff !important;
  stroke: none !important;
  transition: all 0.3s ease;
}

/* Hiệu ứng hover cho các icon mạng xã hội */
.footer__social-link:hover {
  transform: translateY(-3px);
  background: var(--brand-color-1); /* Hoặc màu xanh bạn thích */
}

/* 4. CÁC TRƯỜNG HỢP ĐẶC BIỆT */

/* Icon Zalo - Thường cần giữ màu trắng đặc hoặc màu thương hiệu */
[data-icon="zalo"] svg path {
  fill: #ffffff !important;
  stroke: none !important;
}

/* Icon Ngôi sao - Luôn tô màu vàng/cam */
[data-icon="star"] svg path,
[data-icon="star"] svg polygon {
  fill: #ff9f43 !important; /* Màu cam vàng chuẩn */
  stroke: none !important;
}

[data-icon="circle-check-big"] svg path,
[data-icon="circle-check-big"] svg circle {
  stroke: #22c55e !important;
  fill: none !important;
}

[data-icon="quote"] svg {
  width: 100%;
  height: 100%;
  width: 100px;
  color: rgba(33, 103, 221, 0.1);
  margin: 0 0 60px 0;
}
/* END SVG ICONS */

/* ==========================================================================
   3. CUSTOM COMPONENTS (Các thành phần tùy chỉnh riêng cho dự án)
   ========================================================================== */
.section-header {
  margin-bottom: 30px;
}

.section-title {
  font-size: 3rem !important;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.section-desc {
  text-align: center;
  max-width: 650px;
  color: var(--gray-600);
  font-size: 1.6rem;
  line-height: 1.6;
}

/* ======================================================================
   4. UTILITY CLASSES (Các lớp tiện ích nhanh) - Có thể dùng lại ở bất kỳ đâu
   ========================================================================== */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}
.text-normal-case {
  text-transform: none;
}
/* END UTILITY CLASSES */

/* MESSAGE THÔNG BÁO / RECAPTCHA*/
#js-review-message-container .alert {
  position: relative;
  padding: 15px;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.alert-success {
  background-color: #d1edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

#js-review-message-container .alert-danger {
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 700;
}

.captcha-wrapper {
  margin: 15px 0;
  transform: scale(0.9);
  transform-origin: 0 0;
}

/* Style cho Ô Checkbox hiện đại */
.custom-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 1.4rem;
  color: #4b5563;
  line-height: 1.4;
  user-select: none;
}

.custom-checkbox-label input {
  display: none;
}

.checkbox-box {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
  transition: 0.2s;
  background: #fff;
  margin-top: 2px;
}

.custom-checkbox-label input:checked + .checkbox-box {
  background-color: #2563eb;
  border-color: #2563eb;
}

.checkbox-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: 0.2s;
}

.custom-checkbox-label input:checked + .checkbox-box::after {
  transform: rotate(45deg) scale(1);
}
/* END MESSAGE THÔNG BÁO / RECAPTCHA */

.product-description-content,
.product-description-content p,
.product-description-content span {
  font-size: 1.8rem !important;
  font-family: inherit !important;
  line-height: 2 !important;
  color: var(--gray-800) !important;
}

/* Ép các tiêu đề to rõ đúng chuẩn */
.product-description-content h2 {
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  margin-top: 30px !important;
}

.product-description-content h3 {
  font-size: 2.2rem !important;
  font-weight: 600 !important;
}

/* Đảm bảo hình ảnh luôn vừa khung bài viết */
.product-description-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 20px auto;
}

/* Nhắm chính xác vào khung nội dung của In Ấn Trần Gia */
.rich-text-inner,
.rich-text-inner *,
.rich-text-inner p,
.rich-text-inner span,
.rich-text-inner li,
.rich-text-inner strong,
.rich-text-inner a {
  font-family: "Google Sans", sans-serif !important;
  font-size: 1.8rem !important;
  line-height: 2 !important;
  color: var(--gray-700) !important;
}

/* Ép các tiêu đề trong bài viết to rõ, đúng nhận diện thương hiệu */
.rich-text-inner h2 {
  display: flex;
  align-items: center;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  margin: 30px 0 15px 0 !important;
  scroll-margin-top: 110px;
  scroll-behavior: smooth;
  color: var(--gray-900) !important;
}

/* Style cho dấu # thật (bấm được) */
.rich-text-inner h2 .anchor-hash {
  color: var(--brand-color-1);
  text-decoration: none !important;
  margin-right: 10px;
  font-weight: 800;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* Hiện rõ dấu # khi rà chuột vào tiêu đề */
.rich-text-inner h2:hover .anchor-hash {
  opacity: 1;
}

.rich-text-inner h2 a{
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  margin: 0 0.6rem;
}

.rich-text-inner h3 {
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  margin: 20px 0 10px 0 !important;
  color: var(--gray-900) !important;
}

/* Tối ưu danh sách (bullet points) cho đẹp hơn */
.rich-text-inner ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.rich-text-inner li {
  list-style-type: disc;
  margin-bottom: 8px;
}

/* 2. Tô màu thương hiệu cho các liên kết (Link/Email/Website) */
.rich-text-inner a {
  color: var(--brand-color-1) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.rich-text-inner img {
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin: 20px 0;
}

/* Hiệu ứng khi khách hàng rà chuột vào link */
.rich-text-inner a:hover {
  color: var(--brand-color-2) !important;
  text-decoration-thickness: 2px;
}

/* Nhắm vào mọi thẻ bên trong khung nội dung bài viết tin tức */
.article-body-content,
.article-body-content *,
.article-body-content p,
.article-body-content span,
.article-body-content a,
.article-body-content strong,
.article-body-content li,
.article-body-content td,
.article-body-content th {
  font-family: "Google Sans", sans-serif !important;
  color: var(--gray-800) !important;
}

/* Đảm bảo các thẻ Heading (H1-H6) bên trong bài viết cũng dùng đúng font */
.article-body-content h1,
.article-body-content h2,
.article-body-content h3,
.article-body-content h4,
.article-body-content h5,
.article-body-content h6,
.article-body-content h1 span,
.article-body-content h2 span,
.article-body-content h3 span,
.article-body-content h4 span,
.article-body-content h5 span,
.article-body-content h6 span {
  font-family: "Google Sans", sans-serif !important;
  font-size: 1.5em !important;
  line-height: 1.5 !important;
}

.article-body-content ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.article-body-content li {
  list-style-type: disc;
  margin-bottom: 8px;
}

/* 2. Tô màu thương hiệu cho các liên kết (Link/Email/Website) */
.article-body-content a {
  color: var(--brand-color-1) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

.article-body-content img {
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin: 20px 0;
}

/* Hiệu ứng khi khách hàng rà chuột vào link */
.article-body-content a:hover {
  color: var(--brand-color-2) !important;
  text-decoration-thickness: 2px;
}

/* --- TYPOGRAPHY & SEO --- */
.article-body-content {
  --article-font-size: 1.7rem;
  font-size: var(--article-font-size) !important;
  line-height: 2.5em !important;
  color: #334155;
}
.article-featured-img{
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin: 20px 0;
}

#article-content-wrapper p,
#article-content-wrapper span,
#article-content-wrapper li,
#article-content-wrapper ul{
  font-size: 1.05em !important;
  line-height: inherit !important;
}