/* ============================================================================
   PetID247 — TRANG GIỚI THIỆU CÔNG KHAI (petid247.com apex)

   HỆ THIẾT KẾ "PREMIUM PET-TECH" — navy đậm + cyan, chốt 29/08/2026.
   Lý do chọn navy: CHIẾC THẺ THẬT là đĩa navy đen chữ vàng. Bản xanh lá #0e9f6e
   trước đó lệch khỏi màu sản phẩm. (Bản cũ giữ ở landing.css.bak-xanhla-*.)

   🔴 `theme-color` navy CHỈ đặt ở trang này. KHÔNG đổi icon PWA / manifest:
      khu `app.` đang chạy dùng icon xanh lá, mà PWA nướng icon lúc CÀI —
      đổi thì người đã cài phải gỡ ra cài lại mới thấy.

   🔴 Sửa tệp này xong PHẢI chắc `css/landing.css` còn trong _tinh_asset_ver()
      ở config.py — không thì ASSET_VER không đổi và Cloudflare giữ bản cũ.

   🔴 Khối ẩn chờ cuộn dùng `.js .hien` — tiền tố `.js` là CỐ Ý. Xem mục 14.
   ============================================================================ */

/* ═══════════ 1. HỆ THIẾT KẾ ═══════════════════════════════════════════════ */
:root{
  /* Nền tối — ba tầng sâu */
  --den:      #04080f;   /* sâu nhất: mục sản phẩm, chân trang */
  --navy:     #070f1d;   /* nền chính */
  --navy-2:   #0c1729;   /* thẻ, khung nổi trên nền chính */
  --navy-3:   #142239;   /* viền sáng, ô nhấn */

  /* Nhấn */
  --cyan:     #22d3ee;
  --cyan-dam: #06b6d4;
  --cyan-mo:  rgba(34,211,238,.13);
  --vang:     #e8b93f;   /* màu chữ trên chiếc thẻ thật — dùng RẤT tiết chế */

  /* Chữ trên nền tối */
  --sang:     #eef4fb;
  --sang-2:   #9fb2c9;
  --sang-3:   #6f8299;
  --vien-toi: rgba(255,255,255,.09);

  /* Nền sáng — hai dải xen kẽ cho đỡ nặng mắt */
  --trang:    #ffffff;
  --kem:      #f4f7fb;
  --muc:      #08121f;
  --muc-2:    #46586e;
  --muc-3:    #7b8ca1;
  --vien-sang:#e2e9f1;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px; --r-tron:999px;

  --bong-toi: 0 30px 70px -34px rgba(0,0,0,.9);
  --bong-sang:0 2px 4px rgba(8,18,31,.04), 0 22px 48px -26px rgba(8,18,31,.28);
  --sang-cyan:0 0 0 1px rgba(34,211,238,.22), 0 18px 46px -20px rgba(34,211,238,.45);

  --rong:1160px;
  --chuyen:260ms cubic-bezier(.4,0,.2,1);
}

/* ═══════════ 2. NỀN CHUNG ════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--navy)}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',
              Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--navy);color:var(--sang);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--cyan);color:#04121a}

.wrap{max-width:var(--rong);margin:0 auto;padding:0 22px}
.sec{padding:clamp(60px,8.5vw,118px) 0;position:relative}

/* Dải nền sáng — xen kẽ để mắt được nghỉ, không tối lì cả trang */
.sang{background:var(--trang);color:var(--muc)}
.sang .dan{color:var(--muc-2)}
.kem{background:var(--kem);color:var(--muc)}
.kem .dan{color:var(--muc-2)}
.den-sau{background:var(--den)}

/* ═══════════ 3. CHỮ ══════════════════════════════════════════════════════ */
h1,h2,h3{line-height:1.14;letter-spacing:-.028em;font-weight:800}
h1{font-size:clamp(2.25rem,1.1rem + 4.6vw,4.15rem);font-weight:850;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,1.05rem + 2.9vw,3.05rem)}
h3{font-size:1.06rem;letter-spacing:-.015em}

.dan{color:var(--sang-2);font-size:clamp(1rem,.96rem + .2vw,1.11rem);max-width:58ch}
.giua{text-align:center}
.giua .dan{margin-left:auto;margin-right:auto}

.nhan{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cyan);background:var(--cyan-mo);
  border:1px solid rgba(34,211,238,.22);
  padding:7px 15px;border-radius:var(--r-tron);
}
.nhan:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);
             box-shadow:0 0 8px var(--cyan)}
.sang .nhan,.kem .nhan{color:var(--cyan-dam);background:rgba(6,182,212,.09);
                       border-color:rgba(6,182,212,.2)}

.dau-muc{margin-bottom:clamp(36px,5.5vw,64px)}
.dau-muc h2{margin-top:16px}
.dau-muc .dan{margin-top:16px}

/* ═══════════ 4. NÚT ══════════════════════════════════════════════════════ */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:650;font-size:.97rem;text-decoration:none;white-space:nowrap;
  padding:15px 28px;border-radius:var(--r-tron);border:1px solid transparent;
  transition:transform var(--chuyen),box-shadow var(--chuyen),
             background var(--chuyen),border-color var(--chuyen),color var(--chuyen);
}
.nut-chinh{background:linear-gradient(135deg,var(--cyan),var(--cyan-dam));color:#04121a;
           font-weight:750;box-shadow:0 12px 30px -14px rgba(34,211,238,.9)}
.nut-chinh:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(34,211,238,1)}
.nut-vien{border-color:var(--vien-toi);color:var(--sang);background:rgba(255,255,255,.03)}
.nut-vien:hover{border-color:rgba(34,211,238,.5);color:var(--cyan);transform:translateY(-2px)}
.sang .nut-vien,.kem .nut-vien{border-color:var(--vien-sang);color:var(--muc);background:#fff}
.sang .nut-vien:hover,.kem .nut-vien:hover{border-color:var(--cyan-dam);color:var(--cyan-dam)}
.nhom-nut{display:flex;flex-wrap:wrap;gap:13px}

/* ═══════════ 5. THANH ĐẦU TRANG ══════════════════════════════════════════ */
.dau{
  position:sticky;top:0;z-index:80;
  background:rgba(7,15,29,.72);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color var(--chuyen),background var(--chuyen);
}
.dau.dinh{border-bottom-color:var(--vien-toi);background:rgba(7,15,29,.92)}
.dau .wrap{display:flex;align-items:center;gap:14px;height:70px}
.hieu{display:flex;align-items:center;gap:10px;text-decoration:none;
      font-weight:850;letter-spacing:-.03em;font-size:1.1rem;color:var(--sang)}
.hieu img{height:30px;width:auto}
.dau nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.dau nav .lk{text-decoration:none;font-size:.92rem;font-weight:550;color:var(--sang-2);
             padding:9px 14px;border-radius:var(--r-tron);
             transition:color var(--chuyen),background var(--chuyen)}
.dau nav .lk:hover{color:var(--sang);background:rgba(255,255,255,.06)}
.dau nav .nut{padding:11px 22px;font-size:.9rem}
@media(max-width:880px){ .dau nav .lk{display:none} }

/* ═══════════ 6. HERO ═════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;padding:clamp(52px,7vw,96px) 0 clamp(64px,9vw,116px)}
.hero:before{                        /* quầng sáng cyan sau chiếc thẻ */
  content:'';position:absolute;z-index:0;top:-18%;right:-8%;width:min(760px,92vw);
  height:min(760px,92vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.20),rgba(34,211,238,.05) 42%,transparent 68%);
  filter:blur(18px);
}
.hero:after{                         /* lưới mảnh — chiều sâu, tan dần xuống dưới */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(820px 560px at 50% 0%,#000,transparent 76%);
          mask-image:radial-gradient(820px 560px at 50% 0%,#000,transparent 76%);
}
.hero .wrap{position:relative;z-index:2;display:grid;gap:clamp(38px,5vw,64px);
            grid-template-columns:1.04fr .96fr;align-items:center}
.hero h1{margin:20px 0 0}
.hero h1 span{display:block;background:linear-gradient(100deg,#fff 18%,var(--cyan) 96%);
              -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .dan{margin-top:20px}
.hero .nhom-nut{margin-top:32px}

/* Ba điểm tin cậy — CHỦ Ý không dùng con số: chưa mở đăng ký, mọi số đều là bịa */
.tin-cay{display:grid;gap:12px;margin-top:36px;padding-top:28px;border-top:1px solid var(--vien-toi)}
.tin-cay div{position:relative;padding-left:30px;font-size:.93rem;color:var(--sang-2)}
.tin-cay div:before{
  content:'';position:absolute;left:0;top:.3em;width:19px;height:19px;border-radius:50%;
  background:var(--cyan-mo) center/10px 8px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%2322d3ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ═══════════ 7. CHIẾC THẺ (khối ảnh dùng lại nhiều nơi) ══════════════════ */
.the-khung{position:relative}
.the-khung .khung{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--vien-toi);
  box-shadow:var(--bong-toi);background:var(--navy-2);
  transform:rotate(-1.4deg);transition:transform 700ms cubic-bezier(.4,0,.2,1);
}
.the-khung:hover .khung{transform:rotate(0) translateY(-5px)}
.the-khung .khung img{width:100%;aspect-ratio:4/3;object-fit:cover}
.the-khung .khung:after{               /* vệt quét QR chạy qua ảnh, rất nhẹ */
  content:'';position:absolute;left:0;right:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.16),transparent);
  animation:quet 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes quet{0%,100%{top:-34%}50%{top:100%}}

.the-noi{
  position:absolute;left:-16px;bottom:-20px;z-index:3;display:flex;align-items:center;gap:12px;
  background:rgba(12,23,41,.94);border:1px solid var(--vien-toi);border-radius:var(--r-m);
  padding:14px 18px;box-shadow:var(--bong-toi);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.the-noi .cham{width:9px;height:9px;border-radius:50%;background:var(--cyan);
               box-shadow:0 0 0 4px rgba(34,211,238,.18);animation:tho 2.4s ease-in-out infinite}
@keyframes tho{0%,100%{box-shadow:0 0 0 4px rgba(34,211,238,.18)}
               50%{box-shadow:0 0 0 9px rgba(34,211,238,.04)}}
.the-noi span{display:block;font-size:.76rem;color:var(--sang-3);line-height:1.35}
.the-noi b{font-size:.93rem;letter-spacing:-.015em;color:var(--sang)}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .the-khung{order:-1}
  .the-khung .khung{transform:none}
  .the-noi{left:auto;right:12px;bottom:-18px}
}

/* ═══════════ 8. HAI CỘT ẢNH + CHỮ ═══════════════════════════════════════ */
.doi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:center}
.doi > img,.doi .anh-lon{border-radius:var(--r-xl);box-shadow:var(--bong-toi);
                         border:1px solid var(--vien-toi)}
.sang .doi > img,.kem .doi > img{box-shadow:var(--bong-sang);border-color:var(--vien-sang)}
.doi.dao > *:first-child{order:2}
@media(max-width:880px){ .doi{grid-template-columns:1fr} .doi.dao > *:first-child{order:0} }

.gach{list-style:none;margin-top:26px;display:grid;gap:14px}
.gach li{display:flex;gap:13px;align-items:flex-start;color:var(--sang-2);font-size:1rem}
.sang .gach li,.kem .gach li{color:var(--muc-2)}
.gach li:before{
  content:'';flex:0 0 22px;height:22px;margin-top:3px;border-radius:50%;
  background:var(--cyan-mo) center/11px 9px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%2322d3ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sang .gach li:before,.kem .gach li:before{
  background-color:rgba(6,182,212,.11);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%230891b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ═══════════ 9. BỐN BƯỚC ════════════════════════════════════════════════ */
.buoc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,22px);counter-reset:b}
.buoc article{position:relative;background:var(--navy-2);border:1px solid var(--vien-toi);
              border-radius:var(--r-l);padding:30px 24px 28px;
              transition:border-color var(--chuyen),transform var(--chuyen)}
.buoc article:hover{border-color:rgba(34,211,238,.34);transform:translateY(-4px)}
.buoc article:before{
  counter-increment:b;content:'0' counter(b);
  display:block;margin-bottom:18px;font-size:.82rem;font-weight:850;letter-spacing:.14em;
  color:var(--cyan);
}
.buoc h3{color:var(--sang)}
.buoc p{color:var(--sang-2);font-size:.94rem;margin-top:9px}
/* Đường nối giữa các bước — chỉ vẽ khi còn xếp 4 cột */
@media(min-width:961px){
  .buoc article:not(:last-child):after{
    content:'';position:absolute;top:44px;right:calc(-1 * clamp(16px,2.2vw,22px) / 2 - 4px);
    width:9px;height:9px;border-top:1.5px solid var(--navy-3);
    border-right:1.5px solid var(--navy-3);transform:rotate(45deg);
  }
}
@media(max-width:960px){ .buoc{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .buoc{grid-template-columns:1fr} }

/* ═══════════ 10. MOCKUP ĐIỆN THOẠI ═════════════════════════════════════ */
.dt{width:min(310px,84vw);margin:0 auto;position:relative}
.dt .vo{
  background:linear-gradient(160deg,#1b2740,#0a1220);border-radius:44px;padding:11px;
  box-shadow:var(--bong-toi),0 0 0 1px rgba(255,255,255,.07);
}
.dt .man{background:#fff;border-radius:34px;overflow:hidden;color:var(--muc);position:relative}
.dt .tai{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:22px;
         background:#0a1220;border-radius:0 0 14px 14px;z-index:4}
.dt .bia{height:132px;background:linear-gradient(135deg,#0c1729,#16324a);position:relative}
.dt .bia:after{content:'';position:absolute;inset:0;
  background:radial-gradient(180px 90px at 76% 22%,rgba(34,211,238,.35),transparent 70%)}
.dt .avt{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);z-index:3;
  width:82px;height:82px;border-radius:50%;background:#e8eef6;border:4px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.dt .noi{padding:50px 22px 24px;text-align:center}
.dt .ten{font-weight:850;font-size:1.24rem;letter-spacing:-.03em}
.dt .giong{color:var(--muc-3);font-size:.86rem;margin-top:3px}
.dt .cd{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.73rem;
        font-weight:750;color:#0e7490;background:rgba(6,182,212,.11);padding:5px 12px;
        border-radius:var(--r-tron)}
.dt .cd:before{content:'';width:5px;height:5px;border-radius:50%;background:#06b6d4}
.dt .hang{display:grid;gap:9px;margin-top:20px;text-align:left}
.dt .hang div{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;
              padding:10px 13px;background:var(--kem);border-radius:var(--r-s)}
.dt .hang span{color:var(--muc-3)}
.dt .hang b{font-weight:650;letter-spacing:-.01em}
.dt .nut-dt{margin-top:18px;display:block;background:linear-gradient(135deg,#22d3ee,#06b6d4);
            color:#04121a;font-weight:800;font-size:.87rem;padding:13px;border-radius:var(--r-m)}
.dt-ghi{text-align:center;margin-top:18px;font-size:.79rem;color:var(--muc-3)}

/* ═══════════ 11. SÁU CHỨC NĂNG ═════════════════════════════════════════ */
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px)}
.cn{background:#fff;border:1px solid var(--vien-sang);border-radius:var(--r-l);overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform var(--chuyen),box-shadow var(--chuyen),border-color var(--chuyen)}
.cn:hover{transform:translateY(-5px);box-shadow:var(--bong-sang);border-color:rgba(6,182,212,.34)}
.cn .anh{overflow:hidden;background:var(--kem)}
.cn .anh img{width:100%;aspect-ratio:16/10;object-fit:cover;
             transition:transform 720ms cubic-bezier(.4,0,.2,1)}
.cn:hover .anh img{transform:scale(1.05)}
.cn .noi{padding:22px 24px 26px}
.cn h3{color:var(--muc)}
.cn p{margin-top:9px;color:var(--muc-2);font-size:.93rem}
@media(max-width:960px){ .luoi{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .luoi{grid-template-columns:1fr} }

/* ═══════════ 12. MỤC SẢN PHẨM (thẻ là nhân vật chính) ══════════════════ */
.sp{position:relative;overflow:hidden;text-align:center}
.sp:before{content:'';position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:min(880px,120vw);height:min(880px,120vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.16),transparent 62%);filter:blur(28px)}
.sp .wrap{position:relative;z-index:2}
.sp-anh{margin:clamp(34px,5vw,54px) auto 0;max-width:620px;position:relative}
.sp-anh img{border-radius:var(--r-xl);border:1px solid var(--vien-toi);box-shadow:var(--bong-toi);
            animation:troi 7s ease-in-out infinite}
@keyframes troi{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.sp-thongso{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:34px}
.sp-thongso span{font-size:.85rem;color:var(--sang-2);border:1px solid var(--vien-toi);
                 background:rgba(255,255,255,.03);padding:9px 17px;border-radius:var(--r-tron)}

/* ═══════════ 13. CẢM XÚC · FAQ · CTA · CHÂN TRANG ══════════════════════ */
.cx h2{max-width:20ch}
.cx .lon{font-size:clamp(1.5rem,.9rem + 2.5vw,2.5rem);font-weight:750;line-height:1.28;
         letter-spacing:-.03em;max-width:24ch}

.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--vien-sang);border-radius:var(--r-m);
             overflow:hidden;transition:border-color var(--chuyen)}
.faq details[open]{border-color:rgba(6,182,212,.36)}
.faq summary{cursor:pointer;list-style:none;padding:19px 56px 19px 22px;position:relative;
             font-weight:700;letter-spacing:-.015em;font-size:1.01rem;color:var(--muc)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'';position:absolute;right:22px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--muc-3);border-bottom:2px solid var(--muc-3);
  transform:rotate(45deg);transition:transform var(--chuyen)}
.faq details[open] summary:after{transform:rotate(-135deg);border-color:var(--cyan-dam)}
.faq .tl{padding:0 22px 21px;color:var(--muc-2);font-size:.97rem}

.chot{background:linear-gradient(150deg,#0a1729 0%,#0f2b3f 52%,#0a1729 100%);
      border-top:1px solid var(--vien-toi);border-bottom:1px solid var(--vien-toi);
      text-align:center;position:relative;overflow:hidden}
.chot:before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(760px,110vw);height:340px;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.2),transparent 66%)}
.chot .wrap{position:relative;z-index:2}
.chot .nhom-nut{justify-content:center;margin-top:32px}

.cua{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,24px)}
.cua a{text-decoration:none;background:var(--navy-2);border:1px solid var(--vien-toi);
       border-radius:var(--r-l);padding:clamp(28px,4vw,38px);display:flex;flex-direction:column;
       text-align:left;transition:transform var(--chuyen),border-color var(--chuyen)}
.cua a:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.42)}
.cua .bieu{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;
           justify-content:center;background:var(--cyan-mo);margin-bottom:20px;
           border:1px solid rgba(34,211,238,.2)}
.cua .bieu svg{width:23px;height:23px;stroke:var(--cyan);fill:none;stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round}
.cua h3{font-size:1.2rem;color:var(--sang)}
.cua p{margin-top:11px;color:var(--sang-2);font-size:.95rem}
.cua .di{margin-top:22px;font-weight:700;color:var(--cyan);font-size:.93rem;
         display:inline-flex;align-items:center;gap:7px}
.cua .di:after{content:'→';transition:transform var(--chuyen)}
.cua a:hover .di:after{transform:translateX(4px)}
@media(max-width:760px){ .cua{grid-template-columns:1fr} }

.tins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,24px)}
.tin{background:#fff;border:1px solid var(--vien-sang);border-radius:var(--r-l);overflow:hidden;
     text-decoration:none;color:inherit;display:flex;flex-direction:column;
     transition:transform var(--chuyen),box-shadow var(--chuyen)}
.tin:hover{transform:translateY(-5px);box-shadow:var(--bong-sang)}
.tin img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tin .noi{padding:20px 22px 24px}
.tin .tt{font-weight:750;letter-spacing:-.02em;line-height:1.35;color:var(--muc)}
.tin p{margin-top:8px;color:var(--muc-3);font-size:.89rem}
@media(max-width:960px){ .tins{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .tins{grid-template-columns:1fr} }

footer{background:var(--den);color:var(--sang-3);padding:clamp(48px,6vw,70px) 0 30px;
       font-size:.92rem;border-top:1px solid var(--vien-toi)}
footer .cot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;
            padding-bottom:34px;border-bottom:1px solid var(--vien-toi)}
footer p{margin-top:14px;max-width:38ch;color:var(--sang-3);font-size:.9rem}
footer h4{color:var(--sang);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
          font-weight:800;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:11px}
footer a{color:var(--sang-2);text-decoration:none;transition:color var(--chuyen)}
footer a:hover{color:var(--cyan)}
footer .day{padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 18px;
            justify-content:space-between;font-size:.84rem}
@media(max-width:760px){ footer .cot{grid-template-columns:1fr;gap:28px} }

/* ═══════════ 14. CHUYỂN ĐỘNG ═══════════════════════════════════════════ */
/* 🔴 CHỈ ẩn khi <html class="js"> — class do script nội tuyến trong <head> gắn.
   Không có JS (bot Google, JS lỗi) thì .hien KHÔNG bao giờ trong suốt ⇒ nội dung
   luôn hiện. Bản đầu 29/08 ẩn vô điều kiện: ảnh + các bước + CẢ 6 thẻ chức năng
   biến mất trong ảnh chụp. ĐỪNG bỏ tiền tố `.js` này. */
.js .hien{opacity:0;transform:translateY(20px);
          transition:opacity 640ms cubic-bezier(.4,0,.2,1),transform 640ms cubic-bezier(.4,0,.2,1)}
.js .hien.vao{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none !important;transition-duration:.01ms !important}
  .js .hien{opacity:1;transform:none}
}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;border-radius:var(--r-s)}