/*
Theme Name: PCCC Trang Hoàng
Version: 3.0.0
*/

/* ============================================================
   BỘ MÀU CHỦ ĐẠO: TRẮNG + CAM + ĐỎ
   Lấy từ logo PCCC Trang Hoàng (đỏ #C8281A → cam #E8620A → vàng cam #FF8C38)
   Tỉ lệ: Trắng 60% | Cam 30% | Đỏ 10%
============================================================ */
:root {
  /* === MÀU CAM - màu chủ đạo === */
  --cam:         #E8620A;
  --cam-dam:     #CC5508;
  --cam-nhat:    #FF8C38;
  --cam-sang:    #FFA255;
  --cam-bg:      #FFF5EE;
  --cam-bg2:     #FFEEDD;
  --cam-border:  #FFD0A8;

  /* === MÀU ĐỎ - điểm nhấn phụ === */
  --do:          #C8281A;
  --do-dam:      #A82015;
  --do-nhat:     #FBF0EE;

  /* === MÀU TRẮNG & XÁM ẤM === */
  --trang:       #FFFFFF;
  --nen-sang:    #FAFAF8;   /* sections xen kẽ - xám trắng ấm */
  --nen-am:      #F5F2EE;   /* sections xen kẽ - xám ấm */
  --nen-border:  #EDE8E2;
  --nen-border2: #E0D8D0;

  /* === MÀU CHỮ === */
  --text:        #1A1A1A;
  --text-mid:    #4A4A4A;
  --text-nhat:   #7A7A7A;
  --text-trang:  #FFFFFF;

  /* === HERO ĐEN NÂU ẤM === */
  --hero-bg:     #160600;

  /* === SHADOW === */
  --shadow-cam:  rgba(232,98,10,.15);
  --shadow-dark: rgba(0,0,0,.08);

  /* === FONT === */
  --font-head: 'Oswald', sans-serif;
  --font-body: 'Be Vietnam Pro', sans-serif;

  /* === RADIUS === */
  --r: 10px;
  --r-sm: 6px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--trang);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; transition:color .2s }
img { max-width:100%; height:auto; display:block }
ul, ol { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input, select, textarea { font-family:inherit }
h1,h2,h3,h4,h5 { font-family:var(--font-head); line-height:1.2; color:var(--text) }

/* ============================================================
   UTILITIES
============================================================ */
.container { max-width:1180px; margin:0 auto; padding:0 24px }
.text-center { text-align:center }
.text-center .section__sub { margin:0 auto }

/* SECTION PADDING */
.section { padding:88px 0 }

/* SECTION LABELS & TITLES */
.section__label {
  display:inline-block;
  font-family:var(--font-head);
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--cam);
  background:var(--cam-bg);
  padding:5px 14px;
  border-radius:20px;
  border:1px solid var(--cam-border);
  margin-bottom:14px;
}
.section__title {
  font-size:clamp(24px,3.5vw,38px);
  font-weight:700;
  margin-bottom:14px;
  color:var(--text);
}
.section__sub {
  color:var(--text-mid);
  font-size:16px;
  max-width:560px;
  line-height:1.75;
}
.section__header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:52px;
  flex-wrap:wrap;
  gap:16px;
}
.section__header .section__title { margin-bottom:6px }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:var(--r-sm);
  font-family:var(--font-head);
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
  transition:all .22s;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  border:2px solid transparent;
}
/* Nút cam - primary */
.btn--primary {
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff;
  border-color:var(--cam);
  box-shadow:0 4px 18px var(--shadow-cam);
}
.btn--primary:hover {
  background:linear-gradient(135deg, var(--cam-dam), var(--cam));
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(232,98,10,.35);
  color:#fff;
}
/* Nút outline trắng - trên nền tối */
.btn--outline {
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.btn--outline:hover {
  background:#fff;
  color:var(--cam);
  border-color:#fff;
}
/* Nút outline cam - trên nền trắng */
.btn--outline-cam {
  background:transparent;
  color:var(--cam);
  border:2px solid var(--cam);
}
.btn--outline-cam:hover {
  background:var(--cam);
  color:#fff;
}
.btn--lg { padding:15px 32px; font-size:16px }
.btn--full { width:100%; justify-content:center }

/* ============================================================
   TOPBAR - đỏ đậm
============================================================ */
.topbar {
  background:var(--do);
  color:#fff;
  font-size:13px;
  padding:9px 0;
}
.topbar__inner {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.topbar__item { display:flex; align-items:center; gap:6px }
.topbar__item a { color:rgba(255,255,255,.9) }
.topbar__item a:hover { color:#FFD4A0 }

/* ============================================================
   HEADER - trắng, viền cam dưới
============================================================ */
#site-header {
  background:#fff;
  border-bottom:3px solid var(--cam);
  position:sticky;
  top:0;
  z-index:999;
  box-shadow:0 2px 20px rgba(232,98,10,.12);
}
.header__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  gap:20px;
}

/* LOGO */
.site-logo {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  flex-shrink:0;
}
.site-logo__img {
  width:80px;
  height:80px;
  object-fit:contain;
  display:block;
}
.site-logo__name {
  font-family:var(--font-head);
  font-size:19px;
  font-weight:700;
  color:var(--cam);
  display:block;
  line-height:1.1;
}
.site-logo__tag {
  font-size:10px;
  color:var(--text-nhat);
  letter-spacing:.8px;
  text-transform:uppercase;
  display:block;
  margin-top:3px;
}

/* NAV */
.site-nav { display:flex; align-items:center; gap:2px }
.site-nav a {
  font-size:14px;
  font-weight:600;
  color:var(--text-mid);
  padding:8px 12px;
  border-radius:var(--r-sm);
  transition:all .2s;
  text-decoration:none;
}
.site-nav a:hover,
.site-nav a.active {
  color:var(--cam);
  background:var(--cam-bg);
}
.site-nav .nav-cta {
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff !important;
  margin-left:8px;
  border-radius:var(--r-sm);
  box-shadow:0 3px 14px var(--shadow-cam);
}
.site-nav .nav-cta:hover {
  background:linear-gradient(135deg, var(--cam-dam), var(--cam)) !important;
  box-shadow:0 6px 22px rgba(232,98,10,.4);
}
.menu-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  background:none;
  border:none;
  cursor:pointer;
}
.menu-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:all .2s;
}

/* ============================================================
   HERO - đen nâu ấm + accent cam
   Nhịp: HERO ĐEN | SERVICES TRẮNG | STATS CAM | WHY TRẮNG
         PROJECTS XÁM ẤM | PRICING XÁM SÁNG | CONTACT XÁM ẤM
============================================================ */
.hero {
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg, var(--hero-bg) 0%, #230A00 50%, #160600 100%);
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('https://pccctranghoang.com.vn/wp-content/uploads/2026/05/banner-trang-hoang.png') center/cover no-repeat;
  opacity:.08;
  z-index:0;
}
.hero__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(22,6,0,.97) 0%, rgba(35,10,0,.88) 55%, rgba(22,6,0,.80) 100%);
  z-index:1;
}
.hero .container { position:relative; z-index:2; padding-top:48px; padding-bottom:48px }
.hero__content { max-width:680px }

/* Badge */
.hero__badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(232,98,10,.18);
  border:1px solid rgba(232,98,10,.45);
  color:var(--cam-nhat);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:20px;
  margin-bottom:24px;
}

/* Tiêu đề hero */
.hero__title {
  font-family:var(--font-head);
  font-size:clamp(38px,5.5vw,64px);
  font-weight:700;
  color:#fff;
  line-height:1.05;
  margin-bottom:20px;
}
.hero__title-accent {
  display:block;
  background:linear-gradient(90deg, var(--cam-nhat), var(--cam-sang));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__sub {
  color:rgba(255,255,255,.78);
  font-size:17px;
  line-height:1.78;
  margin-bottom:36px;
  max-width:540px;
}
.hero__sub strong { color:var(--cam-nhat) }

/* Nút hero */
.hero__btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px }

/* Stats hero */
.hero__stats {
  display:flex;
  align-items:center;
}
.hero__stat { display:flex; flex-direction:column; padding:0 28px }
.hero__stat:first-child { padding-left:0 }
.hero__stat-num {
  font-family:var(--font-head);
  font-size:38px;
  font-weight:700;
  color:var(--cam-nhat);
  line-height:1;
}
.hero__stat-label {
  font-size:12px;
  color:rgba(255,255,255,.5);
  margin-top:4px;
}
.hero__stat-divider {
  width:1px;
  height:44px;
  background:rgba(232,98,10,.3);
  flex-shrink:0;
}
.hero__scroll-hint {
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  animation:bounce 2.2s infinite;
  z-index:2;
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0) }
  50% { transform:translateX(-50%) translateY(9px) }
}

/* ============================================================
   SERVICES - nền TRẮNG
============================================================ */
.services { background:var(--trang); padding:88px 0 }
.services .section__header { text-align:center; justify-content:center; flex-direction:column; align-items:center }
.services__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:52px;
}
.service-card {
  background:#fff;
  border-radius:var(--r);
  padding:32px 28px 28px;
  border:1.5px solid var(--nen-border);
  position:relative;
  overflow:hidden;
  transition:box-shadow .25s, transform .25s, border-color .25s;
  display:flex;
  flex-direction:column;
}
/* Thanh cam trên top khi hover */
.service-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--cam), var(--cam-nhat));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s;
}
.service-card:hover::before { transform:scaleX(1) }
.service-card:hover {
  box-shadow:0 16px 48px var(--shadow-cam);
  transform:translateY(-6px);
  border-color:var(--cam-border);
}
/* Icon cam gradient */
.service-card__icon {
  width:60px;
  height:60px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  border-radius:var(--r-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  flex-shrink:0;
  box-shadow:0 4px 16px var(--shadow-cam);
}
.service-card__title {
  font-family:var(--font-head);
  font-size:18px;
  font-weight:600;
  margin-bottom:12px;
  color:var(--text);
}
.service-card__desc {
  font-size:14px;
  color:var(--text-mid);
  line-height:1.72;
  flex:1;
}
.service-card__link {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:18px;
  color:var(--cam);
  font-weight:700;
  font-size:14px;
  transition:gap .2s, color .2s;
}
.service-card__link:hover { gap:10px; color:var(--cam-dam) }

/* ============================================================
   STATS BANNER - cam gradient sáng
============================================================ */
.stats-banner {
  background:linear-gradient(135deg, var(--cam) 0%, var(--cam-nhat) 60%, var(--cam-sang) 100%);
  padding:52px 0;
}
.stats-banner__grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  text-align:center;
}
.stats-banner__item {
  padding:8px 16px;
  border-right:1px solid rgba(255,255,255,.25);
}
.stats-banner__item:last-child { border-right:none }
.stats-banner__num {
  display:block;
  font-family:var(--font-head);
  font-size:44px;
  font-weight:700;
  color:#fff;
  line-height:1;
}
.stats-banner__label {
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.82);
  margin-top:6px;
}

/* ============================================================
   WHY US - nền XÁM ẤM
============================================================ */
.why { background:var(--nen-am) }
.why__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.why__img-wrap { position:relative; border-radius:var(--r); overflow:hidden }
.why__img {
  width:100%;
  height:480px;
  object-fit:cover;
  border-radius:var(--r);
}
.why__img-placeholder {
  width:100%;
  height:480px;
  background:linear-gradient(135deg, var(--cam-bg), var(--cam-bg2));
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:80px;
  border:2px dashed var(--cam-border);
}
.why__cert-badge {
  position:absolute;
  bottom:24px; right:-16px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff;
  border-radius:var(--r);
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 28px rgba(232,98,10,.45);
}
.why__cert-num { font-family:var(--font-head); font-size:20px; font-weight:700 }
.why__cert-label { font-size:11px; opacity:.85 }
.why__intro { color:var(--text-mid); line-height:1.78; margin-bottom:28px }
.why__features { display:flex; flex-direction:column; gap:18px; margin-bottom:32px }
.why__feat { display:flex; gap:16px; align-items:flex-start }
.why__feat-icon {
  width:46px; height:46px; min-width:46px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px var(--shadow-cam);
}
.why__feat-title { font-family:var(--font-head); font-size:15px; font-weight:600; margin-bottom:4px }
.why__feat-desc { font-size:14px; color:var(--text-mid); line-height:1.65 }

/* ============================================================
   PROJECTS - nền TRẮNG
============================================================ */
.projects { background:var(--trang) }
.projects__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.project-card {
  background:#fff;
  border-radius:var(--r);
  overflow:hidden;
  border:1.5px solid var(--nen-border);
  transition:box-shadow .25s, transform .25s;
}
.project-card:hover {
  box-shadow:0 16px 40px var(--shadow-cam);
  transform:translateY(-5px);
}
.project-card__thumb { overflow:hidden; height:220px }
.project-card__thumb img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.project-card:hover .project-card__thumb img { transform:scale(1.06) }
.project-card__info { padding:22px }
.project-card__tag {
  display:inline-block;
  font-size:11px; font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cam);
  background:var(--cam-bg);
  border:1px solid var(--cam-border);
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:8px;
}
.project-card__title { font-family:var(--font-head); font-size:17px; font-weight:600; margin-bottom:6px }
.project-card__meta { font-size:13px; color:var(--text-nhat) }

/* ============================================================
   PRICING - nền XÁM SÁNG
============================================================ */
.pricing { background:var(--nen-sang) }
.pricing__grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:52px;
  max-width:960px;
  margin-left:auto; margin-right:auto;
}
.pricing-card {
  background:#fff;
  border:1.5px solid var(--nen-border);
  border-radius:var(--r);
  padding:30px;
  transition:box-shadow .25s, transform .25s;
}
.pricing-card:hover {
  box-shadow:0 12px 36px var(--shadow-cam);
  transform:translateY(-4px);
}
/* Card nổi bật */
.pricing-card--featured {
  border:2px solid var(--cam) !important;
  position:relative;
  box-shadow:0 8px 32px rgba(232,98,10,.12);
}
.pricing-card--featured::before {
  content:'Phổ biến nhất';
  position:absolute; top:-12px; left:24px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff;
  font-size:11px; font-weight:700;
  padding:4px 14px;
  border-radius:20px;
  letter-spacing:.5px;
}
.pricing-card__head { display:flex; align-items:center; gap:14px; margin-bottom:22px }
.pricing-card__icon {
  width:52px; height:52px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px var(--shadow-cam);
}
.pricing-card__type { font-family:var(--font-head); font-size:19px; font-weight:600 }
.pricing-card__rows { display:flex; flex-direction:column }
.pricing-card__row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--nen-border);
  font-size:14px; color:var(--text-mid);
}
.pricing-card__row:last-child { border-bottom:none }
.pricing-card__row strong {
  font-family:var(--font-head);
  font-size:16px;
  color:var(--cam);
  font-weight:700;
}
.pricing__note {
  text-align:center;
  margin-top:28px;
  font-size:13px;
  color:var(--text-nhat);
  max-width:680px;
  margin-left:auto; margin-right:auto;
}
.pricing__cta { text-align:center; margin-top:36px }

/* ============================================================
   CONTACT - nền XÁM ẤM
============================================================ */
.contact { background:var(--nen-am) }
.contact__inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}
.contact__list { display:flex; flex-direction:column; gap:16px; margin:24px 0 28px }
.contact__item { display:flex; gap:14px; align-items:flex-start }
.contact__icon {
  width:46px; height:46px; min-width:46px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px var(--shadow-cam);
}
.contact__item strong { display:block; font-size:12px; color:var(--text-nhat); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px }
.contact__item span, .contact__item a { font-size:15px; color:var(--text-mid) }
.contact__item a:hover { color:var(--cam) }
.contact__map { margin-top:20px; border-radius:var(--r); overflow:hidden; box-shadow:0 4px 16px var(--shadow-dark) }

/* Form */
.contact__form-wrap {
  background:#fff;
  border-radius:var(--r);
  padding:40px;
  box-shadow:0 4px 24px var(--shadow-dark);
  border:1.5px solid var(--nen-border);
}
.contact__form-title {
  font-family:var(--font-head); font-size:22px; font-weight:600;
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:2px solid var(--cam-bg);
  color:var(--text);
}
.form-group { margin-bottom:18px }
.form-label { display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--text) }
.form-input {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--nen-border2);
  border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:15px;
  color:var(--text); background:#fff;
  transition:border-color .2s, box-shadow .2s;
  outline:none;
  -webkit-appearance:none;
}
.form-input:focus {
  border-color:var(--cam);
  box-shadow:0 0 0 3px rgba(232,98,10,.12);
}
.form-input::placeholder { color:#C0B8B0 }
.form-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
.form-textarea { resize:vertical; min-height:110px }

/* Submit button - CAM */
#pccc-submit {
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat)) !important;
  color:#fff !important;
  border:none !important;
  padding:15px 24px !important;
  border-radius:var(--r-sm) !important;
  font-family:var(--font-head) !important;
  font-size:16px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  box-shadow:0 4px 18px var(--shadow-cam) !important;
  transition:all .22s !important;
}
#pccc-submit:hover {
  background:linear-gradient(135deg, var(--cam-dam), var(--cam)) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 28px rgba(232,98,10,.4) !important;
}

/* ============================================================
   FOOTER - đen nâu ấm, accent cam
============================================================ */
.site-footer { background:#110500; color:rgba(255,255,255,.65) }
.footer__main { padding:64px 0 44px }
.footer__grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:48px;
}
.footer__logo-name {
  font-family:var(--font-head);
  font-size:22px; font-weight:700;
  color:var(--cam-nhat);
  display:block;
}
.footer__logo-tag { font-size:11px; color:var(--cam); letter-spacing:.5px; display:block; margin-top:4px }
.footer__brand p { font-size:14px; line-height:1.8; color:rgba(255,255,255,.45); margin:14px 0 22px }
.footer__socials { display:flex; gap:10px }
.footer__social {
  width:38px; height:38px;
  background:rgba(255,255,255,.08);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:700;
  transition:background .2s; text-decoration:none;
}
.footer__social:hover { background:linear-gradient(135deg, var(--cam), var(--cam-nhat)); color:#fff }
.footer__col h4 {
  font-family:var(--font-head);
  font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--cam-nhat);
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(232,98,10,.25);
}
.footer__col ul li { margin-bottom:10px }
.footer__col ul li a { font-size:14px; color:rgba(255,255,255,.5); transition:color .2s }
.footer__col ul li a:hover { color:var(--cam-nhat) }
.footer__contact-item { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:14px; color:rgba(255,255,255,.55) }
.footer__contact-item svg { flex-shrink:0; margin-top:2px }
.footer__contact-item a { color:rgba(255,255,255,.55) }
.footer__contact-item a:hover { color:var(--cam-nhat) }
.footer__bar {
  border-top:1px solid rgba(232,98,10,.15);
  padding:20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:rgba(255,255,255,.3);
  flex-wrap:wrap; gap:10px;
}
.footer__bar a { color:rgba(255,255,255,.4) }
.footer__bar a:hover { color:var(--cam-nhat) }

/* ============================================================
   FLOATING BUTTONS
============================================================ */
.float-btns {
  position:fixed; bottom:28px; right:28px;
  z-index:998;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.float-btn {
  display:flex; align-items:center; gap:10px;
  padding:13px 20px; border-radius:50px;
  font-family:var(--font-head); font-weight:700; font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  transition:transform .22s, box-shadow .22s;
  text-decoration:none; white-space:nowrap;
}
.float-btn:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 10px 32px rgba(0,0,0,.3) }
.float-btn--call {
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff;
  box-shadow:0 6px 22px rgba(232,98,10,.45);
}
.float-btn--zalo { background:#0068ff; color:#fff }
.float-btn__dot {
  width:10px; height:10px;
  background:#4ade80; border-radius:50%;
  animation:pulse 1.7s infinite; flex-shrink:0;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(74,222,128,.6) }
  50% { box-shadow:0 0 0 8px rgba(74,222,128,0) }
}

/* ============================================================
   BACK TO TOP
============================================================ */
.back-to-top {
  position:fixed; bottom:100px; right:28px; z-index:997;
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--cam), var(--cam-nhat));
  color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(232,98,10,.4);
  transition:all .22s;
  opacity:0; visibility:hidden;
}
.back-to-top:not([hidden]) { opacity:1; visibility:visible }
.back-to-top:hover { background:linear-gradient(135deg, var(--cam-dam), var(--cam)); transform:translateY(-3px) }

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--nen-am) }
::-webkit-scrollbar-thumb { background:var(--cam); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--cam-nhat) }

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1024px){
  .services__grid { grid-template-columns:repeat(2,1fr) }
  .why__inner { grid-template-columns:1fr; gap:40px }
  .why__img, .why__img-placeholder { height:320px }
  .why__cert-badge { right:20px }
  .stats-banner__grid { grid-template-columns:repeat(3,1fr) }
  .stats-banner__item:nth-child(3) { border-right:none }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px }
}
@media(max-width:768px){
  .topbar__inner { gap:12px; font-size:12px }
  .header__inner { height:68px; padding:0 16px }
  .site-logo__img { width:60px; height:60px }
  .site-logo__name { font-size:16px }
  .site-nav {
    display:none; position:absolute;
    top:68px; left:0; right:0;
    background:#fff; flex-direction:column;
    padding:12px; border-bottom:2px solid var(--cam);
    box-shadow:0 8px 24px rgba(232,98,10,.12);
  }
  .site-nav.open { display:flex }
  .site-nav a { padding:12px 16px; width:100%; border-radius:var(--r-sm) }
  .menu-toggle { display:flex }
  .hero { min-height:560px }
  .hero__stat { padding:0 16px }
  .hero__stat:first-child { padding-left:0 }
  .hero__stat-num { font-size:30px }
  .stats-banner__grid { grid-template-columns:repeat(2,1fr) }
  .stats-banner__item:nth-child(2) { border-right:none }
  .projects__grid { grid-template-columns:1fr }
  .pricing__grid { grid-template-columns:1fr }
  .contact__inner { grid-template-columns:1fr }
  .section__header { flex-direction:column; align-items:flex-start }
  .float-btn span:not(.float-btn__dot) { display:none }
  .float-btn { padding:14px }
  .back-to-top { right:16px; bottom:80px }
}
@media(max-width:480px){
  .container { padding:0 16px }
  .section { padding:60px 0 }
  .hero__btns { flex-direction:column; gap:12px }
  .hero__btns .btn { width:100%; justify-content:center }
  .services__grid { grid-template-columns:1fr }
  .hero__stats { flex-wrap:wrap; gap:16px }
  .hero__stat-divider { display:none }
  .hero__stat { padding:0 }
  .stats-banner__grid { grid-template-columns:1fr 1fr }
  .stats-banner__item:nth-child(5) { grid-column:1/-1; border-right:none; border-top:1px solid rgba(255,255,255,.2) }
  .contact__form-wrap { padding:24px 18px }
}

/* ============================================================
   ACCESSIBILITY
============================================================ */
:focus-visible { outline:2px solid var(--cam); outline-offset:3px }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ============================================================
   MOBILE RESPONSIVE - COMPREHENSIVE FIX
   Target: 390px (iPhone 14), 375px (iPhone SE), 414px (Android)
============================================================ */

/* FIX OVERFLOW TOÀN TRANG */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
* { max-width: 100%; }
img, iframe, video, canvas { max-width: 100%; }

/* ============================================================
   MOBILE <= 768px
============================================================ */
@media (max-width: 768px) {

  /* --- TOPBAR --- */
  .topbar { padding: 7px 0; font-size: 12px }
  .topbar__inner {
    flex-direction: column;
    gap: 5px;
    padding: 0 16px;
  }
  .topbar__item { justify-content: center }

  /* --- HEADER --- */
  #site-header { border-bottom-width: 2px }
  .header__inner {
    height: 64px !important;
    padding: 0 16px !important;
    gap: 12px;
  }
  .site-logo { gap: 8px }
  .site-logo__img { width: 52px !important; height: 52px !important }
  .site-logo__name { font-size: 15px !important }
  .site-logo__tag { font-size: 9px !important; letter-spacing: 0.4px }

  /* NAV MOBILE - dropdown */
  .site-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
  }
  .site-nav.open { display: flex }
  .site-nav::before {
    content: '';
    display: block;
    height: 64px;
    flex-shrink: 0;
  }
  .site-nav-inner-wrap {
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    border-bottom: 3px solid var(--cam);
  }
  .site-nav a {
    padding: 13px 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    width: 100% !important;
    color: var(--text) !important;
  }
  .site-nav a:hover, .site-nav a.active {
    background: var(--cam-bg) !important;
    color: var(--cam) !important;
  }
  .site-nav .nav-cta {
    margin-left: 0 !important;
    margin-top: 8px;
    text-align: center;
    justify-content: center;
  }

  /* Hamburger animation */
  .menu-toggle { display: flex; padding: 8px; z-index: 1001; position: relative }
  .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) }
  .menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-8px) }
  .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) }

  /* --- HERO --- */
  .hero { min-height: auto; padding: 40px 0 48px }
  .hero .container { padding: 0 18px }
  .hero__content { max-width: 100% }
  .hero__badge { font-size: 10px; padding: 6px 12px; margin-bottom: 16px }
  .hero__title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 14px }
  .hero__sub { font-size: 14px; line-height: 1.65; margin-bottom: 24px }
  .hero__btns { flex-direction: column; gap: 10px; margin-bottom: 36px }
  .hero__btns .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 15px;
  }
  .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 8px;
    width: 100%;
  }
  .hero__stat { padding: 0 !important }
  .hero__stat-divider { display: none }
  .hero__stat-num { font-size: 30px }
  .hero__stat-label { font-size: 11px }
  .hero__scroll-hint { display: none }

  /* --- SECTION CHUNG --- */
  .section { padding: 56px 0 }
  .container { padding: 0 18px }
  .section__title { font-size: clamp(22px, 6vw, 30px) }
  .section__sub { font-size: 14px }
  .section__header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px }

  /* --- SERVICES --- */
  .services__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-top: 32px;
  }
  .service-card { padding: 24px 20px 20px }
  .service-card__icon { width: 52px; height: 52px; margin-bottom: 14px }
  .service-card__title { font-size: 17px }
  .service-card__desc { font-size: 13px }

  /* --- STATS BANNER --- */
  .stats-banner { padding: 36px 0 }
  .stats-banner__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0;
  }
  .stats-banner__item {
    padding: 12px 8px;
    border-right: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
  }
  .stats-banner__item:nth-child(2n) { border-right: none }
  .stats-banner__item:nth-child(3),
  .stats-banner__item:nth-child(4) { border-bottom: none }
  .stats-banner__item:nth-child(5) {
    grid-column: 1 / -1;
    border-bottom: none;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .stats-banner__num { font-size: 34px }
  .stats-banner__label { font-size: 12px }

  /* --- WHY US --- */
  .why__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .why__img, .why__img-placeholder { height: 260px !important }
  .why__cert-badge { right: 12px !important; bottom: 16px; padding: 12px 16px }
  .why__cert-num { font-size: 16px }
  .why__features { gap: 14px }
  .why__feat-icon { width: 40px; height: 40px; min-width: 40px }
  .why__feat-title { font-size: 14px }
  .why__feat-desc { font-size: 13px }
  .why .btn { width: 100%; justify-content: center }

  /* --- PROJECTS --- */
  .projects__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .project-card__thumb { height: 200px }
  .project-card__info { padding: 18px }
  .project-card__title { font-size: 16px }

  /* --- PRICING --- */
  .pricing__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    margin-top: 32px;
  }
  .pricing-card { padding: 24px 20px }
  .pricing-card__type { font-size: 17px }
  .pricing__cta .btn { width: 100%; justify-content: center; font-size: 14px; padding: 14px 16px }

  /* --- CONTACT --- */
  .contact__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .contact__form-wrap { padding: 24px 18px }
  .contact__form-title { font-size: 18px; margin-bottom: 20px }
  .form-input { padding: 12px 14px; font-size: 14px }
  .contact__map iframe { height: 180px }
  .contact__list { gap: 12px }
  .contact__icon { width: 40px; height: 40px; min-width: 40px }

  /* --- FOOTER --- */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .footer__main { padding: 44px 0 28px }
  .footer__logo-name { font-size: 18px }
  .footer__col h4 { font-size: 11px; margin-bottom: 12px }
  .footer__col ul li { margin-bottom: 8px }
  .footer__col ul li a { font-size: 13px }
  .footer__contact-item { font-size: 13px }
  .footer__bar {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 14px 0;
    font-size: 12px;
  }

  /* --- FLOAT BUTTONS --- */
  .float-btns { bottom: 20px; right: 16px; gap: 10px }
  .float-btn { padding: 13px 16px; font-size: 13px; border-radius: 40px }
  .float-btn span:not(.float-btn__dot) { display: none }
  .float-btn { padding: 14px !important; border-radius: 50% !important; width: 52px; height: 52px; justify-content: center }
  .float-btn svg { flex-shrink: 0 }

  /* --- BACK TO TOP --- */
  .back-to-top { right: 14px; bottom: 80px; width: 40px; height: 40px }

  /* --- COOKIE BANNER --- */
  .ca-notice { max-width: calc(100vw - 32px) !important; font-size: 13px !important }
}

/* ============================================================
   MOBILE <= 480px (nhỏ hơn)
============================================================ */
@media (max-width: 480px) {
  .topbar { display: none } /* Ẩn topbar trên màn nhỏ - tiết kiệm space */
  .header__inner { height: 60px !important }
  .site-logo__img { width: 48px !important; height: 48px !important }
  .site-logo__name { font-size: 14px !important }
  .hero { padding: 32px 0 40px }
  .hero__title { font-size: clamp(26px, 7.5vw, 36px) }
  .section { padding: 48px 0 }
  .container { padding: 0 14px }
  .why__img, .why__img-placeholder { height: 220px !important }
}

/* ============================================================
   TABLET 769px - 1024px
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .header__inner { height: 76px }
  .site-logo__img { width: 64px !important; height: 64px !important }
  .site-logo__name { font-size: 17px }
  .hero__title { font-size: clamp(32px, 4.5vw, 48px) }
  .services__grid { grid-template-columns: repeat(2, 1fr) !important }
  .why__inner { grid-template-columns: 1fr 1fr; gap: 40px }
  .why__img, .why__img-placeholder { height: 360px !important }
  .projects__grid { grid-template-columns: repeat(2, 1fr) }
  .pricing__grid { grid-template-columns: repeat(2, 1fr) }
  .contact__inner { grid-template-columns: 1fr 1fr; gap: 40px }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px }
  .stats-banner__grid { grid-template-columns: repeat(3, 1fr) }
  .stats-banner__item:nth-child(3) { border-right: none }
  .stats-banner__item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.2) }
  .stats-banner__item:nth-child(5) { border-top: 1px solid rgba(255,255,255,.2); grid-column: auto }
}