@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  --ink:#171717;
  --muted:#62666f;
  --line:#e8e8ec;
  --orange:#ff8a00;
  --blue-bg:#eef3ff;
  --pink-bg:#fff0ef;
  --green-bg:#eaf8f1;
  --purple-bg:#f5edff;
  --white:#fff;
  --shadow:0 24px 70px rgba(23,23,23,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.section-shell{
  width:min(1380px,calc(100% - 64px));
  margin:0 auto;
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  color:#70737b;
  margin-bottom:20px;
}

.landing-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:76px;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:18px;
}

.brand-mark,.footer-mark{
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#ff9f1a,#ff7900);
  font-weight:800;
  box-shadow:0 8px 18px rgba(255,138,0,.24);
}

.landing-nav{
  display:flex;
  align-items:center;
  gap:36px;
  color:#45474d;
  font-size:14px;
  font-weight:700;
}

.landing-nav a:hover,.header-link:hover{color:var(--orange)}
.header-link{font-size:14px;font-weight:800}

.hero{
  min-height:calc(100vh - 76px);
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  gap:70px;
  padding-top:60px;
  padding-bottom:90px;
}

.hero-copy h1{
  font-size:clamp(52px,6.6vw,94px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:800;
  max-width:800px;
}

.hero-copy h1 span{color:var(--orange)}

.hero-copy>p{
  max-width:650px;
  margin-top:28px;
  font-size:19px;
  line-height:1.8;
  color:var(--muted);
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:30px;
  font-size:13px;
  font-weight:700;
  color:#44474d;
}

.hero-visual{
  position:relative;
  min-height:600px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-glow{
  position:absolute;
  width:480px;
  height:480px;
  border-radius:50%;
  background:radial-gradient(circle,#ffe0bd 0%,#fff3e5 48%,transparent 70%);
}

.phone-mockup{
  position:relative;
  z-index:2;
  width:310px;
  height:590px;
  padding:12px;
  border:8px solid #171717;
  border-radius:42px;
  background:#171717;
  box-shadow:0 35px 80px rgba(0,0,0,.22);
  transform:rotate(2deg);
}

.phone-top{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:100px;
  height:24px;
  border-radius:20px;
  background:#171717;
  z-index:4;
}

.phone-screen{
  height:100%;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  text-align:center;
  padding-bottom:24px;
}

.mock-cover{
  height:160px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#242426,#55565a);
}

.mock-logo{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  font-weight:800;
  background:#ff8a00;
}

.mock-avatar{
  position:relative;
  width:84px;
  height:84px;
  margin:-42px auto 12px;
  border:6px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:23px;
  font-weight:800;
  background:linear-gradient(135deg,#5b6c82,#263142);
}

.phone-screen h3{font-size:24px;letter-spacing:-.03em}
.mock-role{margin-top:4px;color:#73767d;font-size:12px}

.mock-items{
  margin:22px 18px 0;
  display:grid;
  gap:9px;
}

.mock-items div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid #ededee;
  border-radius:12px;
  text-align:left;
  font-size:10px;
  color:#444;
}

.mock-items b{
  width:26px;
  height:26px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#ff8a00;
  font-size:10px;
}

.nfc-chip{
  position:absolute;
  z-index:5;
  left:-90px;
  bottom:70px;
  width:225px;
  padding:22px;
  border-radius:20px;
  background:linear-gradient(135deg,#202124,#3a3b3e);
  color:#fff;
  box-shadow:0 25px 50px rgba(0,0,0,.20);
  transform:rotate(-8deg);
}

.nfc-chip .chip-symbol{
  font-size:32px;
  letter-spacing:-7px;
  color:#ff9b18;
  margin-bottom:20px;
}

.nfc-chip strong{display:block;font-size:13px;letter-spacing:.14em}
.nfc-chip span{display:block;margin-top:5px;font-size:11px;color:#bfc0c4}

.feature{
  min-height:720px;
  margin-top:30px;
  border-radius:38px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding:85px clamp(40px,7vw,100px);
  overflow:hidden;
}

.feature-copy h2,.occasion-copy h2{
  max-width:650px;
  font-size:clamp(42px,5vw,72px);
  line-height:1.02;
  letter-spacing:-.05em;
}

.feature-copy>p,.occasion-copy>p{
  max-width:610px;
  margin-top:24px;
  font-size:18px;
  line-height:1.8;
  color:#62666f;
}

.feature-blue{background:var(--blue-bg)}
.feature-pink{background:var(--pink-bg)}
.feature-green{background:var(--green-bg)}
.feature-purple{background:var(--purple-bg)}

.card-stage{
  position:relative;
  height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.business-card{
  position:absolute;
  width:min(390px,90%);
  aspect-ratio:1.62;
  border-radius:25px;
  box-shadow:0 30px 70px rgba(24,34,65,.18);
}

.card-back{
  transform:rotate(11deg) translate(35px,20px);
  background:linear-gradient(135deg,#202b45,#536d9e);
  color:#fff;
  padding:32px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.card-back .card-brand-dot{
  position:absolute;
  top:28px;
  right:28px;
  width:48px;
  height:48px;
  border-radius:15px;
  background:#ff8a00;
}

.card-back span{font-size:11px;font-weight:800;letter-spacing:.16em}

.card-front{
  z-index:2;
  background:#fff;
  overflow:hidden;
  padding-bottom:25px;
}

.card-cover{
  height:105px;
  background:linear-gradient(135deg,#ff8a00,#ffbd6c);
}

.card-mark{
  position:absolute;
  top:26px;
  right:25px;
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(0,0,0,.18);
  font-weight:800;
}

.card-avatar{
  width:82px;
  height:82px;
  margin:-38px 0 12px 28px;
  border:5px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#303b4d;
  color:#fff;
  font-size:22px;
  font-weight:800;
}

.card-front h3{margin:0 28px;font-size:28px;letter-spacing:-.04em}
.card-front p{margin:5px 28px 18px;color:#777b83;font-size:13px}
.card-line{height:1px;margin:0 28px 16px;background:#ededed}
.card-front small{margin:0 28px;color:#555960;font-weight:700}

.connection-visual{
  position:relative;
  height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.connection-phone{
  width:285px;
  height:540px;
  border:8px solid #202124;
  border-radius:40px;
  background:#202124;
  padding:9px;
  transform:rotate(-5deg);
  box-shadow:0 30px 70px rgba(0,0,0,.18);
  z-index:2;
}

.connection-screen{
  height:100%;
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  text-align:center;
  padding-bottom:20px;
}

.screen-cover{height:160px;background:linear-gradient(135deg,#ff9a72,#ffc2a9)}
.screen-avatar{
  width:75px;
  height:75px;
  margin:-34px auto 12px;
  border:5px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#2c3544;
  color:#fff;
  font-weight:800;
  font-size:23px;
}

.connection-screen strong{display:block;font-size:20px}
.connection-screen>span{display:block;margin-top:5px;color:#888;font-size:11px}
.screen-row{height:44px;margin:13px 20px 0;border-radius:11px;background:#f2f2f3}
.screen-row.short{width:60%;margin-left:auto;margin-right:auto}

.float-icon{
  position:absolute;
  z-index:4;
  width:65px;
  height:65px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#fff;
  box-shadow:0 16px 35px rgba(0,0,0,.13);
  font-weight:800;
  font-size:23px;
}

.icon-linkedin{top:70px;left:10%}
.icon-facebook{top:160px;right:4%}
.icon-mail{bottom:85px;left:8%}
.icon-zalo{bottom:35px;right:10%;color:#1683ff}

.mini-list{
  margin-top:30px;
  display:grid;
  gap:10px;
  max-width:560px;
}

.mini-list div{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:15px;
  background:rgba(255,255,255,.58);
}

.mini-list b{min-width:55px;font-size:11px;letter-spacing:.08em;color:#f47732}
.mini-list span{font-size:13px;font-weight:600;color:#4c4f56}

.feature-green{grid-template-columns:1.25fr .75fr}

.dashboard-mini{
  width:min(650px,100%);
  margin-top:35px;
  display:flex;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}

.dash-sidebar{width:75px;flex:none;padding:18px 12px;background:#1f2523}
.dash-logo{
  width:35px;height:35px;display:grid;place-items:center;border-radius:10px;
  color:#fff;background:#ff8a00;font-weight:800;margin:0 auto 25px;
}
.dash-sidebar i{display:block;height:8px;margin:13px 10px;border-radius:99px;background:#555d59}
.dash-main{flex:1;padding:22px}
.dash-top{display:flex;justify-content:space-between;font-size:12px}
.dash-top span{color:#1a9f63;font-weight:800}
.dash-profile{
  margin-top:25px;display:flex;align-items:center;gap:12px;padding:14px;
  border:1px solid #eceeed;border-radius:15px;
}
.dash-avatar{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#303b4d;color:#fff;font-weight:800;
}
.dash-profile b{display:block;font-size:13px}
.dash-profile small{display:block;color:#8a8d91;font-size:10px;margin-top:4px}
.dash-profile button{
  margin-left:auto;border:0;padding:8px 10px;border-radius:9px;
  background:#e8f8ef;color:#168655;font-size:10px;font-weight:800;
}
.dash-lines{display:grid;gap:9px;margin-top:20px}
.dash-lines i{height:9px;border-radius:99px;background:#f0f1f1}
.dash-lines i:nth-child(2){width:75%}
.dash-lines i:nth-child(3){width:50%}

.update-card{
  padding:40px;border-radius:28px;background:#fff;box-shadow:var(--shadow);transform:rotate(4deg);
}
.update-badge{
  display:inline-block;padding:7px 10px;border-radius:99px;
  background:#e8f8ef;color:#15905c;font-size:10px;font-weight:800;letter-spacing:.1em;
}
.update-icon{
  width:82px;height:82px;margin:30px 0;display:grid;place-items:center;
  border-radius:24px;background:#1f2523;color:#ff8a00;font-size:42px;
}
.update-card h3{font-size:30px;line-height:1.08;letter-spacing:-.04em}
.update-card p{margin-top:18px;color:#72767c;line-height:1.7;font-size:14px}

.feature-purple{min-height:650px}
.occasion-copy{align-self:start;padding-top:25px}

.profile-stack{
  position:relative;height:450px;display:flex;align-items:center;justify-content:center;
}
.stack-card{
  position:absolute;width:330px;height:430px;border-radius:25px;padding:28px;
  color:#fff;box-shadow:0 25px 60px rgba(55,32,90,.20);
}
.stack-card span{font-size:11px;letter-spacing:.14em;font-weight:800}
.stack-card b{display:block;margin-top:230px;font-size:29px;letter-spacing:-.04em}
.stack-one{background:linear-gradient(145deg,#b995ff,#6c3bc8);transform:rotate(-13deg) translate(-35px,15px)}
.stack-two{background:linear-gradient(145deg,#e4a1ff,#8d4ac6);transform:rotate(8deg) translate(35px,15px)}
.stack-three{z-index:3;background:linear-gradient(145deg,#7d54e8,#41248c)}
.stack-three small{display:block;margin-top:8px;opacity:.75;font-size:11px}

.reviews{padding-top:125px;padding-bottom:125px}
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.reviews-head h2{font-size:clamp(42px,5vw,66px);letter-spacing:-.05em;line-height:1}
.rating{text-align:right;flex:none}
.rating strong{font-size:54px;letter-spacing:-.05em}
.rating span{font-size:22px;color:#888}
.rating div{color:#ffb000;letter-spacing:4px;font-size:20px;margin-top:2px}

.review-grid{margin-top:55px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review-card{
  padding:32px;border:1px solid #e9e9ec;border-radius:24px;background:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.05);
}
.stars{color:#ffb000;letter-spacing:3px}
.review-card h3{margin-top:24px;font-size:22px}
.review-card p{margin-top:14px;color:#676b72;line-height:1.75;font-size:14px}
.review-card>span{display:block;margin-top:28px;color:#92959a;font-size:13px;font-weight:700}

.landing-footer{padding:70px max(32px,calc((100vw - 1380px)/2));background:#202122;color:#fff}
.footer-brand{display:flex;align-items:center;gap:13px}
.footer-brand p{color:#9da0a5;margin-top:4px;font-size:12px}
.footer-columns{
  margin-top:65px;display:grid;grid-template-columns:repeat(3,180px);
  justify-content:end;gap:55px;
}
.footer-columns div{display:grid;gap:13px}
.footer-columns strong{font-size:14px}
.footer-columns a{font-size:13px;color:#c6c7ca}
.footer-columns a:hover{color:#fff}
.footer-bottom{
  margin-top:60px;padding-top:22px;border-top:1px solid #38393b;
  display:flex;justify-content:space-between;gap:20px;color:#8d9095;font-size:11px;
}

.floating-zalo{
  position:fixed;z-index:2000;right:24px;bottom:24px;width:62px;height:62px;
  border-radius:50%;display:grid;place-items:center;color:#fff;background:#1683ff;
  border:5px solid #fff;box-shadow:0 12px 30px rgba(22,131,255,.35);
  font-size:22px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease;
}
.floating-zalo:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 18px 38px rgba(22,131,255,.42)}

/* Giữ nguyên các class .nfc-* của app.js cho trang profile. */

@media (max-width:1050px){
  .landing-nav{display:none}
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-copy{text-align:center}
  .hero-copy>p{margin-left:auto;margin-right:auto}
  .hero-points{justify-content:center}
  .hero-visual{min-height:590px}
  .feature,.feature-green{grid-template-columns:1fr;gap:30px}
  .feature-copy{text-align:center}
  .feature-copy>p{margin-left:auto;margin-right:auto}
  .mini-list{margin-left:auto;margin-right:auto;text-align:left}
  .card-stage,.connection-visual{order:2}
  .dashboard-mini{margin-left:auto;margin-right:auto;text-align:left}
  .update-card{max-width:420px;margin:0 auto}
  .occasion-copy{text-align:center}
  .occasion-copy>p{margin-left:auto;margin-right:auto}
  .profile-stack{order:2}
  .review-grid{grid-template-columns:1fr}
  .review-card{max-width:650px;margin:0 auto;width:100%}
}

@media (max-width:700px){
  .landing-header{height:66px;padding:0 20px}
  .header-link{display:none}
  .section-shell{width:min(100% - 28px,1380px)}
  .hero{padding-top:55px;padding-bottom:60px}
  .hero-copy h1{font-size:48px}
  .hero-copy>p{font-size:16px}
  .hero-points{display:grid;gap:8px;font-size:12px}
  .hero-visual{min-height:520px}
  .phone-mockup{width:275px;height:525px}
  .nfc-chip{left:0;bottom:35px;width:190px;padding:17px}
  .feature{margin-top:18px;border-radius:28px;padding:55px 25px;min-height:auto}
  .feature-copy h2,.occasion-copy h2{font-size:42px}
  .feature-copy>p,.occasion-copy>p{font-size:15px}
  .card-stage{height:420px}
  .business-card{width:315px}
  .connection-visual{height:470px}
  .connection-phone{width:250px;height:470px}
  .float-icon{width:54px;height:54px;border-radius:15px}
  .icon-linkedin{left:0}.icon-facebook{right:0}.icon-mail{left:0}.icon-zalo{right:0}
  .dashboard-mini{min-height:230px}
  .dash-sidebar{width:55px}
  .dash-main{padding:15px}
  .dash-profile button{display:none}
  .update-card{transform:none}
  .profile-stack{height:400px}
  .stack-card{width:275px;height:365px}
  .stack-card b{margin-top:200px}
  .reviews{padding-top:80px;padding-bottom:80px}
  .reviews-head{display:block}
  .rating{text-align:left;margin-top:20px}
  .footer-columns{grid-template-columns:1fr 1fr;justify-content:start;gap:30px;margin-top:45px}
  .footer-bottom{display:grid}
  .floating-zalo{width:56px;height:56px;right:16px;bottom:16px}
}


/* ============================================================
   LANDING PAGE V2 — HEADER / CTA
   ============================================================ */

/* =========================================
   HEADER - CENTER MENU
   ========================================= */

.landing-header{
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 86px;
    padding: 0 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(255,255,255,.90);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}


/* LOGO */
.landing-header .brand{
    position: relative;
    z-index: 2;
}


/* MENU Ở GIỮA MÀN HÌNH */
.landing-header .landing-nav{
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    gap: 30px;

    color: #45474d;
    font-size: 16px;
    font-weight: 700;

    white-space: nowrap;
}


/* MENU ITEM */
.landing-header .landing-nav a{
    white-space: nowrap;
    transition: color .2s ease, transform .2s ease;
}

.landing-header .landing-nav a:hover{
    color: var(--orange);
    transform: translateY(-1px);
}


/* PHẦN BÊN PHẢI */
.landing-header .header-actions{
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 25px;

    position: relative;
    z-index: 2;
}

.brand{
  font-size:20px;
  gap:12px;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  font-size:17px;
}

.landing-nav a{
  white-space:nowrap;
  transition:color .2s ease, transform .2s ease;
}

.landing-nav a:hover{
  transform:translateY(-1px);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:25px;
}

.header-login{
  font-size:16px;
  font-weight:700;
}

.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:128px;
  height:50px;
  padding:0 24px;
  border:2px solid var(--orange);
  border-radius:999px;
  font-size:16px;
  font-weight:800;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.header-cta:hover{
  color:#fff;
  background:var(--orange);
  transform:translateY(-2px);
}

.hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.primary-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 30px;
  border-radius:999px;
  font-size:16px;
  font-weight:800;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.primary-btn{
  color:#fff;
  background:var(--orange);
  box-shadow:0 12px 25px rgba(255,138,0,.22);
}

.primary-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 17px 32px rgba(255,138,0,.28);
}

.secondary-btn{
  background:#fff;
  border:2px solid #d8d8da;
}

.secondary-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* ============================================================
   PRICING — 4 CARD + 3D FLIP
   ============================================================ */

.pricing-section{
  margin-top:110px;
  padding:100px 0 110px;
  background:#f7f7f8;
}

.pricing-shell{
  width:min(1500px,calc(100% - 50px));
  margin:0 auto;
}

.pricing-heading{
  text-align:center;
  max-width:850px;
  margin:0 auto 55px;
}

.pricing-heading h2{
  font-size:clamp(44px,5vw,68px);
  line-height:1.04;
  letter-spacing:-.055em;
}

.pricing-heading p{
  max-width:700px;
  margin:22px auto 0;
  color:#696d74;
  font-size:17px;
  line-height:1.7;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.price-card{
  position:relative;
  min-height:720px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 38px rgba(0,0,0,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}

.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 55px rgba(0,0,0,.13);
}

.price-card.featured{
  outline:2px solid rgba(255,138,0,.35);
}

.popular-badge{
  position:absolute;
  z-index:10;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  padding:7px 12px;
  border-radius:999px;
  background:#171717;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
}

.price-top{
  min-height:108px;
  padding:34px 15px 10px;
  text-align:center;
}

.old-price{
  color:#999;
  font-size:15px;
  text-decoration:line-through;
}

.current-price{
  margin-top:4px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
}

.card-flip{
  width:100%;
  height:265px;
  border:0;
  background:transparent;
  padding:15px 25px;
  cursor:pointer;
  perspective:1200px;
}

.card-flip-inner{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.75,.25,1);
}

.card-flip:hover .card-flip-inner{
  transform:rotateY(180deg);
}

.card-flip.is-flipped .card-flip-inner{
  transform:rotateY(180deg);
}

.card-face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.card-face img{
  width:100%;
  max-width:320px;
  max-height:225px;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.14));
}

.card-back-face{
  transform:rotateY(180deg);
}

.price-info{
  flex:1;
  padding:22px 32px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.price-info h3{
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.05em;
}

.price-tagline{
  margin-top:10px;
  color:#72757c;
  font-size:14px;
  font-weight:700;
  font-style:italic;
}

.price-info>p:not(.price-tagline){
  margin-top:14px;
  max-width:280px;
  color:#676b72;
  font-size:13px;
  line-height:1.7;
}

.price-btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  min-width:150px;
  padding:0 20px;
  border-radius:999px;
  color:#fff;
  background:#171717;
  font-size:13px;
  font-weight:800;
  transition:background .2s ease,transform .2s ease;
}

.price-btn:hover{
  background:var(--orange);
  transform:translateY(-2px);
}

.pricing-note{
  margin-top:24px;
  text-align:center;
  color:#999da3;
  font-size:11px;
}

/* ============================================================
   BENEFITS — INTERACTIVE 3D CARD
   ============================================================ */

.benefits-section{
  padding-top:125px;
  padding-bottom:125px;
}

.benefits-heading{
  text-align:center;
  margin-bottom:70px;
}

.benefits-heading h2{
  font-size:clamp(44px,5vw,68px);
  line-height:1.03;
  letter-spacing:-.055em;
}

.benefits-layout{
  display:grid;
  grid-template-columns:42% 58%;
  gap:60px;
  align-items:center;
}

.benefits-card-column{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.tilt-card-wrap{
  --rx:0deg;
  --ry:0deg;
  position:relative;
  width:min(520px,100%);
  aspect-ratio:1.18;
  display:grid;
  place-items:center;
  perspective:1000px;
}

.tilt-glow{
  position:absolute;
  width:72%;
  height:72%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,0,.28),rgba(255,138,0,0) 70%);
  filter:blur(12px);
  animation:benefitPulse 4s ease-in-out infinite;
}

.benefit-product-card{
  position:relative;
  width:88%;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-3deg);
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.18));
}

.benefit-product-card img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:18px;
}

.card-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:18px;
  background:linear-gradient(
    120deg,
    transparent 20%,
    rgba(255,255,255,.32) 45%,
    transparent 68%
  );
  background-size:220% 100%;
  animation:shineMove 4.5s ease-in-out infinite;
  mix-blend-mode:screen;
}

@keyframes benefitPulse{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1.06);opacity:.9}
}

@keyframes shineMove{
  0%,35%{background-position:180% 0}
  65%,100%{background-position:-80% 0}
}

.benefits-cta{
  margin-top:28px;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:65px 55px;
}

.benefits-grid article{
  position:relative;
  padding-left:2px;
}

.benefit-number{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#171717;
  font-size:11px;
  font-weight:800;
  margin-bottom:18px;
}

.benefits-grid h3{
  font-size:26px;
  line-height:1.2;
  letter-spacing:-.035em;
}

.benefits-grid p{
  margin-top:13px;
  color:#666a71;
  font-size:15px;
  line-height:1.75;
}

/* ============================================================
   FOOTER / TEXT SIZE
   ============================================================ */

.landing-footer{
    padding: 80px max(46px, calc((100vw - 1380px) / 2)) 36px;

    background: #202122;
    color: #fff;

    display: grid;

    /*
       Cột trái = logo
       Cột phải = các nhóm menu
    */
    grid-template-columns: minmax(280px, 1fr) minmax(650px, 2fr);

    column-gap: 80px;
    row-gap: 0;
}


/* =========================
   LOGO BÊN TRÁI
   ========================= */

.landing-footer .footer-brand{
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 0;
}


/* =========================
   FOOTER COLUMNS BÊN PHẢI
   ========================= */

.landing-footer .footer-columns{
    margin-top: 0;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(150px, 1fr));

    justify-content: stretch;

    gap: 55px;

    align-items: start;
}


/* từng nhóm */
.landing-footer .footer-columns div{
    display: grid;
    gap: 13px;

    align-content: start;
}


/* tiêu đề */
.landing-footer .footer-columns strong{
    font-size: 15px;
    font-weight: 800;

    color: #fff;
}


/* link */
.landing-footer .footer-columns a{
    font-size: 14px;
    line-height: 1.6;

    color: #c6c7ca;

    transition: color .2s ease;
}

.landing-footer .footer-columns a:hover{
    color: #fff;
}


/* =========================
   FOOTER BOTTOM
   ========================= */

.landing-footer .footer-bottom{
    grid-column: 1 / -1;

    width: 100%;

    margin-top: 70px;

    padding-top: 25px;

    border-top: 1px solid #38393b;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #8d9095;
    font-size: 13px;
}

/* ============================================================
   RESPONSIVE V2
   ============================================================ */

@media (max-width:1250px){
  .landing-nav{gap:20px;font-size:14px}
  .header-actions{gap:15px}
  .header-login{font-size:14px}
  .header-cta{min-width:110px;height:46px;font-size:14px}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .price-card{min-height:680px}
}

@media (max-width:900px){
  .landing-header{padding:0 24px}
  .landing-nav{display:none}
  .header-actions{margin-left:auto}
  .benefits-layout{grid-template-columns:1fr;gap:65px}
  .benefits-grid{max-width:760px;margin:0 auto}
}

@media (max-width:700px){
  .landing-header{height:70px;padding:0 16px}
  .brand{font-size:17px}
  .brand-mark{width:38px;height:38px}
  .header-login{display:none}
  .header-cta{height:42px;min-width:92px;padding:0 18px;font-size:13px}

  .hero-actions{
    justify-content:center;
  }

  .primary-btn,.secondary-btn{
    width:100%;
    min-height:54px;
  }

  .pricing-section{
    margin-top:65px;
    padding:75px 0 80px;
  }

  .pricing-shell{
    width:min(100% - 28px,1500px);
  }

  .pricing-heading{
    margin-bottom:38px;
  }

  .pricing-heading h2{
    font-size:40px;
  }

  .pricing-heading p{
    font-size:14px;
  }

  .pricing-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .price-card{
    min-height:650px;
  }

  .card-flip{
    height:250px;
  }

  .benefits-section{
    padding-top:80px;
    padding-bottom:80px;
  }

  .benefits-heading{
    margin-bottom:45px;
  }

  .benefits-heading h2{
    font-size:40px;
  }

  .benefits-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .benefits-grid h3{
    font-size:23px;
  }

  .benefits-grid p{
    font-size:14px;
  }

  .benefit-product-card{
    width:94%;
  }

  .landing-footer{
    padding-top:65px;
  }

  .footer-columns{
    margin-top:45px;
  }

  .footer-bottom{
    margin-top:50px;
    gap:10px;
  }
}


/* ============================================================
   CUSTOMIZE CARD SAMPLE IMAGES
   - Remove Tapla text from Basic
   - Replace Trần Đức Anh -> Trần Quốc Phong on Plus
   ============================================================ */

.card-image-wrap{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}

.card-image-wrap > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
}

.card-overlay{
  position:absolute;
  z-index:2;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial, Helvetica, sans-serif;
}

/* Basic — black card, cover the original Tapla logo/text */
.basic-overlay{
  left:14%;
  top:27%;
  width:72%;
  height:48%;
  border-radius:3px;
  background:#000;
}

.basic-overlay span{
  color:#fff;
  font-size:clamp(14px,2.1vw,25px);
  font-weight:700;
  letter-spacing:-.02em;
}

/* Plus — cover only the original name and write the requested name */
.plus-overlay{
  left:8%;
  top:57%;
  width:58%;
  height:18%;
  justify-content:flex-start;
  padding-left:2%;
  background:#fff;
  border-radius:2px;
}

.plus-overlay span{
  color:#111;
  font-size:clamp(10px,1.45vw,18px);
  font-weight:500;
  white-space:nowrap;
}

/* Keep the overlays aligned when the cards become narrower */
@media (max-width:700px){
  .basic-overlay span{
    font-size:18px;
  }

  .plus-overlay span{
    font-size:13px;
  }
}




/* ============================================================
   NFC PROFILE
============================================================ */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}


body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #f3f4f6;
}


.nfc-page {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    position: relative;
    padding-bottom: 110px;
}


/* ============================================================
   COVER
============================================================ */

.nfc-cover {
    width: 100%;
    height: 270px;
    position: relative;
    overflow: visible;
    background: #f1f1f1;
}


.nfc-cover > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* ============================================================
   SHARE BUTTON
============================================================ */

.nfc-share-top-button {
    position: absolute;

    top: 24px;
    right: 24px;

    z-index: 20;

    border: none;

    background: #ff8a00;

    color: white;

    padding: 14px 24px;

    border-radius: 12px;

    font-size: 16px;
    font-weight: 700;

    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .18);

    transition:
        transform .15s ease,
        opacity .15s ease;
}


.nfc-share-top-button:hover {
    transform: translateY(-2px);
}


.nfc-share-top-button:active {
    transform: scale(.97);
}


/* ============================================================
   CONTAINER
============================================================ */

.nfc-container {
    width: min(
        100%,
        520px
    );

    margin: 0 auto;

    padding:
        0
        28px
        40px;

    position: relative;
}


/* ============================================================
   AVATAR
============================================================ */

.nfc-avatar {
    width: 120px;
    height: 120px;

    object-fit: cover;

    border-radius: 50%;

    border: 5px solid white;

    position: relative;

    margin-top: -60px;

    display: block;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .22);

    background: white;

    z-index: 5;
}


/* ============================================================
   LOGO
============================================================ */

.nfc-logo {
    max-width: 120px;
    max-height: 70px;

    object-fit: contain;

    margin-top: 18px;

    display: block;
}


/* ============================================================
   NAME
============================================================ */

.nfc-name {
    margin:
        18px
        0
        8px;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 800;

    color: #111827;
}


/* ============================================================
   POSITION
============================================================ */

.nfc-position {
    font-size: 18px;

    font-weight: 600;

    color: #111827;

    margin-top: 4px;
}


/* ============================================================
   COMPANY
============================================================ */

.nfc-company {
    font-size: 17px;

    font-weight: 600;

    color: #111827;

    margin-top: 6px;
}


/* ============================================================
   DEPARTMENT
============================================================ */

.nfc-department {
    font-size: 15px;

    color: #6b7280;

    margin-top: 5px;
}


/* ============================================================
   INTRO
============================================================ */

.nfc-intro {
    margin-top: 20px;

    padding: 16px;

    background: #f7f7f7;

    border-radius: 12px;

    color: #444;

    font-size: 15px;

    line-height: 1.6;
}


/* ============================================================
   ITEMS
============================================================ */

.nfc-items {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 26px;
}


/* ============================================================
   ITEM
============================================================ */

.nfc-item {
    width: 100%;

    min-height: 70px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        12px
        14px;

    border-radius: 14px;

    text-decoration: none;

    color: inherit;

    background: #ffffff;

    border: 1px solid #eeeeee;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .06);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.nfc-item:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .10);
}


.nfc-item:active {
    transform: scale(.985);
}


/* ============================================================
   ITEM ICON
============================================================ */

.nfc-item-icon {
    width: 46px;
    height: 46px;

    min-width: 46px;

    border-radius: 50%;

    background: #ff8a00;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 19px;

    font-weight: 700;
}


.nfc-item-icon-image {
    width: 22px;
    height: 22px;

    object-fit: contain;

    display: block;
}


/* ============================================================
   ITEM CONTENT
============================================================ */

.nfc-item-content {
    flex: 1;

    min-width: 0;
}


.nfc-item-title {
    font-size: 14px;

    color: #777;

    margin-bottom: 3px;
}

.nfc-item-title-strong {
    font-size: 17px;
    color: #111111;
    font-weight: 600;
}

.nfc-item-value {
    font-size: 17px;

    font-weight: 600;

    color: #111827;

    word-break: break-word;

    overflow-wrap: anywhere;

    line-height: 1.4;
}


/* ============================================================
   ITEM ARROW
============================================================ */

.nfc-item-arrow {
    font-size: 26px;

    color: #999;

    flex-shrink: 0;
}


/* ============================================================
   EMPTY
============================================================ */

.nfc-empty-items {
    margin-top: 30px;

    padding: 25px;

    text-align: center;

    color: #777;

    background: #f7f7f7;

    border-radius: 14px;
}


/* ============================================================
   BOTTOM BAR
============================================================ */

.nfc-bottom-bar {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 100;

    display: flex;

    justify-content: center;

    padding:
        14px
        20px
        calc(
            14px + env(safe-area-inset-bottom)
        );

    background:
        rgba(
            255,
            255,
            255,
            .92
        );

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-top:
        1px solid #eeeeee;
}


/* ============================================================
   SAVE CONTACT BUTTON
============================================================ */

.nfc-save-contact-button {
    width: min(
        100%,
        390px
    );

    border: none;

    background: #ff8a00;

    color: white;

    border-radius: 40px;

    padding:
        16px
        28px;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(
            255,
            138,
            0,
            .30
        );

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}


.nfc-save-contact-button:active {
    transform: scale(.98);
}


/* ============================================================
   SHARE OVERLAY
============================================================ */

.nfc-share-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    background:
        rgba(
            20,
            25,
            35,
            .48
        );

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* ============================================================
   SHARE MODAL
============================================================ */

.nfc-share-modal {
    width: min(
        100%,
        550px
    );

    background: white;

    border-radius: 18px;

    padding: 24px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .25);

    animation:
        nfcModalIn .18s ease;
}


@keyframes nfcModalIn {

    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* ============================================================
   SHARE HEADER
============================================================ */

.nfc-share-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;
}


.nfc-share-header h2 {
    margin: 0;

    font-size: 22px;

    color: #111827;
}


.nfc-share-close {
    width: 38px;
    height: 38px;

    border: none;

    background: transparent;

    font-size: 30px;

    cursor: pointer;

    color: #111827;
}


/* ============================================================
   SHARE LINK
============================================================ */

.nfc-share-link-box {
    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid #e5e7eb;

    border-radius: 12px;

    padding:
        12px
        14px;

    margin-bottom: 14px;
}


.nfc-share-link-icon {
    font-size: 20px;
}


.nfc-share-link-text {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 14px;

    color: #374151;
}


.nfc-copy-button {
    width: 38px;
    height: 38px;

    border: none;

    background: transparent;

    font-size: 21px;

    cursor: pointer;
}


/* ============================================================
   QR
============================================================ */

.nfc-qr-box {
    min-height: 100px;

    border:
        1px solid #e5e7eb;

    border-radius: 12px;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 18px;
}


.nfc-qr-image {
    width: 82px;
    height: 82px;

    object-fit: contain;

    flex-shrink: 0;
}


.nfc-qr-text {
    display: flex;

    flex-direction: column;

    gap: 5px;

    flex: 1;
}


.nfc-qr-text strong {
    font-size: 16px;
}


.nfc-qr-text span {
    color: #8b8b8b;

    font-size: 14px;
}


.nfc-qr-download {
    color: #111827;

    text-decoration: none;

    font-size: 28px;

    padding: 10px;
}


.nfc-qr-missing {
    color: #888;

    padding: 20px;
}


/* ============================================================
   NATIVE SHARE
============================================================ */

.nfc-native-share {
    display: block;

    margin:
        25px
        auto
        0;

    border: none;

    background: transparent;

    font-size: 28px;

    cursor: pointer;
}

/* =========================================
   TAPORA LOGO - HEADER
   ========================================= */

.landing-header .brand {
    width: 400px;
    height: 120px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.landing-header .brand-logo {
    width: 400px !important;
    height: 120px !important;

    max-width: 400px !important;
    max-height: 120px !important;

    object-fit: contain;
    object-position: left center;

    display: block;
    flex-shrink: 0;
}


/* =========================================
   TAPORA LOGO - FOOTER
   ========================================= */

.landing-footer .footer-brand{
    width: 260px;
    height: 100px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Bỏ logo N màu cam cũ */
.landing-footer .footer-mark {
    display: none !important;
}

.landing-footer .brand-logo {
    width: 400px !important;
    height: 120px !important;

    max-width: 400px !important;
    max-height: 120px !important;

    object-fit: contain;
    object-position: left center;

    display: block;
    flex-shrink: 0;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .landing-header .brand {
        width: 180px;
        height: 60px;
    }

    .landing-header .brand-logo {
        width: 170px !important;
        height: 55px !important;

        max-width: 170px !important;
        max-height: 55px !important;
    }

    .landing-footer .footer-brand {
        width: 190px;
        height: 60px;
    }

    .landing-footer .brand-logo {
        width: 180px !important;
        height: 55px !important;

        max-width: 180px !important;
        max-height: 55px !important;
    }
}

/* ============================================================
   ERROR
============================================================ */

.nfc-error-page {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5f5f5;

    padding: 20px;
}


.nfc-error-box {
    background: white;

    padding: 40px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .1);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .nfc-cover {
        height: 235px;
    }


    .nfc-share-top-button {

        top: 18px;

        right: 16px;

        padding:
            11px
            17px;

        font-size: 14px;

        border-radius: 10px;
    }


    .nfc-container {

        padding:
            0
            18px
            35px;
    }


    .nfc-avatar {

        width: 105px;

        height: 105px;

        margin-top: -52px;
    }


    .nfc-name {

        font-size: 27px;

        margin-top: 16px;
    }


    .nfc-position {

        font-size: 16px;
    }


    .nfc-company {

        font-size: 15px;
    }


    .nfc-item {

        min-height: 66px;

        padding:
            10px
            12px;
    }


    .nfc-item-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;
    }


    .nfc-item-value {

        font-size: 15px;
    }


    .nfc-share-modal {

        padding: 20px;

        border-radius: 16px;
    }

}


/* ============================================================
   VERY SMALL PHONE
============================================================ */

@media (max-width: 380px) {

    .nfc-cover {
        height: 210px;
    }


    .nfc-name {
        font-size: 24px;
    }


    .nfc-item-value {
        font-size: 14px;
    }


    .nfc-share-top-button {
        padding:
            9px
            13px;
    }

}


/* ============================================================
   BODY MODAL LOCK
============================================================ */

body.nfc-modal-open {
    overflow: hidden;
}

/* ============================================================
   TAPLA STYLE SHARE MODAL
============================================================ */


/* OVERLAY */

.nfc-share-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px;

    background: rgba(17, 24, 39, 0.48);

    backdrop-filter: blur(2px);

}


/* MODAL */

.nfc-share-modal {

    width: 100%;

    max-width: 495px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.18);

    overflow: hidden;

    animation:
        nfcModalIn
        0.18s
        ease-out;

}


/* ============================================================
   HEADER
============================================================ */

.nfc-share-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

    padding:
        20px 24px 0 24px;

}


.nfc-share-header h2 {

    margin: 0;

    font-size: 20px;

    font-weight: 500;

    color: #111827;

}


.nfc-share-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    padding: 0;

    border: none;

    background: transparent;

    color: #111827;

    cursor: pointer;

    border-radius: 6px;

    transition:
        background 0.15s ease,
        color 0.15s ease;

}


.nfc-share-close:hover {

    background: #f3f4f6;

    color: #4b5563;

}


/* ============================================================
   LINK BOX
============================================================ */

.nfc-share-link-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin:
        0 24px 16px 24px;

    padding: 14px 14px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

}


.nfc-share-link-left {

    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

    min-width: 0;

}


.nfc-share-link-icon-svg {

    flex-shrink: 0;

    color: #4b5563;

}


.nfc-share-link-text {

    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 500;

    color: #111827;

}


.nfc-copy-button {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    padding: 0;

    border: none;

    background: transparent;

    color: #111827;

    cursor: pointer;

    border-radius: 6px;

    transition:
        color 0.15s ease,
        background 0.15s ease;

}


.nfc-copy-button:hover {

    color: #2563eb;

    background: #f3f4f6;

}


/* ============================================================
   QR AREA
============================================================ */

.nfc-qr-area {

    padding:
        0 24px 16px 24px;

}


.nfc-qr-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 112px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    padding: 10px 14px 10px 10px;

}


.nfc-qr-left {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

}


.nfc-qr-container {

    width: 80px;

    height: 80px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f3f4f6;

    border-radius: 8px;

    overflow: hidden;

}


.nfc-qr-image {

    display: block;

    width: 80px;

    height: 80px;

    object-fit: contain;

}


.nfc-qr-missing {

    font-size: 12px;

    color: #6b7280;

}


.nfc-qr-info {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.nfc-qr-title {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 16px;

    font-weight: 500;

    color: #111827;

}


.nfc-qr-subtitle {

    margin-top: 3px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 500;

    color: #727987;

}


/* ============================================================
   DOWNLOAD
============================================================ */

.nfc-qr-download {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    padding: 0;

    border: none;

    background: transparent;

    color: #111827;

    cursor: pointer;

    border-radius: 6px;

    transition:
        color 0.15s ease,
        background 0.15s ease;

}


.nfc-qr-download:hover {

    color: #2563eb;

    background: #f3f4f6;

}


/* ============================================================
   SHARE
============================================================ */

.nfc-native-share-area {

    display: flex;

    justify-content: center;

    padding:
        4px 0 18px 0;

}


.nfc-native-share {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 48px;

    padding: 0;

    border: none;

    background: transparent;

    color: #111827;

    cursor: pointer;

    border-radius: 8px;

    transition:
        background 0.15s ease,
        color 0.15s ease;

}


.nfc-native-share:hover {

    background: #f3f4f6;

    color: #2563eb;

}


/* ============================================================
   ANIMATION
============================================================ */

@keyframes nfcModalIn {

    from {

        opacity: 0;

        transform:
            translateY(8px)
            scale(0.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 520px) {

    .nfc-share-overlay {

        align-items: center;

        padding: 16px;

    }


    .nfc-share-modal {

        max-width: 100%;

        border-radius: 12px;

    }


    .nfc-share-header {

        padding:
            18px 16px 0 16px;

    }


    .nfc-share-link-box {

        margin-left: 16px;

        margin-right: 16px;

    }


    .nfc-qr-area {

        padding-left: 16px;

        padding-right: 16px;

    }

}

/* ============================================================
   MOBILE HEADER — TAPLA STYLE
   ============================================================ */

.mobile-menu-btn{
    display:none;

    width:44px;
    height:44px;

    padding:0;
    border:0;
    background:transparent;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;

    cursor:pointer;

    position:relative;
    z-index:1100;
}

.mobile-menu-btn span{
    display:block;

    width:23px;
    height:2px;

    border-radius:99px;

    background:#171717;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


/* MOBILE MENU */
.mobile-menu{
    display:none;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px){

    .landing-header{
        height:70px;

        padding:
            0 18px;

        display:flex;
        align-items:center;
        justify-content:space-between;

        overflow:visible;
    }


    /* Logo */
    .landing-header .brand{
        position:relative;
        z-index:1100;
    }

    .landing-header .brand-logo{
        width:105px;
        height:auto;
        max-width:105px;
    }


    /* QUAN TRỌNG:
       selector này phải mạnh hơn
       .landing-header .landing-nav
    */
    .landing-header .landing-nav{
        display:none !important;
    }


    /* Ẩn CTA desktop */
    .landing-header .header-actions{
        display:none;
    }


    /* Hiện hamburger */
    .mobile-menu-btn{
        display:flex;
    }


    /* Mobile menu */
    .mobile-menu{
        position:fixed;

        top:70px;
        left:0;
        right:0;

        z-index:999;

        display:flex;
        flex-direction:column;

        padding:20px 20px 25px;

        background:#fff;

        border-top:1px solid #eee;

        box-shadow:
            0 18px 40px rgba(0,0,0,.10);

        transform:
            translateY(-15px);

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }


    .mobile-menu a{
        display:block;

        padding:15px 5px;

        color:#222;

        font-size:16px;
        font-weight:700;

        border-bottom:1px solid #eee;
    }


    .mobile-menu a:last-child{
        border-bottom:0;
    }


    .mobile-menu-cta{
        margin-top:15px;

        text-align:center;

        color:#fff !important;

        background:var(--orange);

        border-radius:999px;

        border:0 !important;
    }


    /* MENU OPEN */
    .mobile-menu.is-open{
        transform:translateY(0);

        opacity:1;
        visibility:visible;

        pointer-events:auto;
    }


    /* hamburger -> X */
    .mobile-menu-btn.is-open span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-menu-btn.is-open span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-btn.is-open span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg);
    }
}

/* ============================================================
   REVIEW CAROUSEL
   Chạy liên tục từ TRÁI → PHẢI
   ============================================================ */

.reviews {
    overflow: hidden;
}

.review-grid {
    display: flex !important;
    grid-template-columns: none !important;

    width: max-content;
    max-width: none;

    gap: 24px;
    margin-top: 55px;

    animation: reviewSlideRight 24s linear infinite;

    will-change: transform;
}

/* Kích thước từng card */
.review-card {
    flex: 0 0 clamp(
        300px,
        calc((100vw - 140px) / 3),
        430px
    );

    width: clamp(
        300px,
        calc((100vw - 140px) / 3),
        430px
    );

    max-width: none !important;
    margin: 0 !important;

    box-sizing: border-box;
}

/* Hover thì tạm dừng */
.review-grid:hover {
    animation-play-state: paused;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .review-grid {
        gap: 16px;
        margin-top: 38px;

        animation-duration: 20s;
    }

    .review-card {
        flex: 0 0 calc(100vw - 32px);
        width: calc(100vw - 32px);
    }
}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 375px) {

    .review-grid {
        gap: 12px;
    }

    .review-card {
        flex: 0 0 calc(100vw - 24px);
        width: calc(100vw - 24px);
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .review-grid {
        animation: none;
        transform: none;
    }
}

@keyframes reviewSlideRight {
    from {
        transform: translateX(calc(-1 * var(--review-shift)));
    }

    to {
        transform: translateX(0);
    }
}

/* ============================================================
   FINAL MOBILE FIX — NFC CARD
   Desktop không bị thay đổi.
   ============================================================ */

#landingPage{width:100%;max-width:100%;overflow-x:clip}

@media (max-width:900px){
  .landing-header{width:100%;height:70px;padding:0 18px;box-sizing:border-box;overflow:visible}
  .landing-header .brand{min-width:0;max-width:calc(100% - 60px)}
  .landing-header .brand-logo{width:105px;max-width:105px;height:auto}
  .landing-header .landing-nav{display:none !important}
  .landing-header .header-actions{display:none !important}
  .mobile-menu-btn{display:flex !important;flex:0 0 44px}

  .section-shell{width:calc(100% - 32px);max-width:none;min-width:0;margin-left:auto;margin-right:auto}
  main{width:100%;max-width:100%;min-width:0;overflow:visible}

  .hero{width:calc(100% - 32px);max-width:none;min-width:0;margin-left:auto;margin-right:auto;min-height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:35px;padding-top:55px;padding-bottom:65px;overflow:visible}
  .hero-copy{width:100%;min-width:0;max-width:100%;text-align:center;overflow:visible}
  .hero-copy .eyebrow{max-width:100%;font-size:10px;line-height:1.4;letter-spacing:.13em;margin-bottom:18px;white-space:normal}
  .hero-copy h1{width:100%;max-width:100%;min-width:0;margin:0 auto;font-size:clamp(36px,10.5vw,43px);line-height:1.03;letter-spacing:-.055em;overflow-wrap:normal;word-break:normal}
  .hero-copy h1 span{display:inline}
  .hero-copy > p{width:100%;max-width:330px;margin:22px auto 0;font-size:15px;line-height:1.7;overflow-wrap:break-word}
  .hero-actions{width:100%;max-width:340px;margin:26px auto 0;display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .primary-btn,.secondary-btn{width:100%;min-width:0;min-height:54px;padding:0 18px;font-size:15px;box-sizing:border-box}
  .hero-points{width:100%;max-width:330px;margin:24px auto 0;display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;font-size:11px;line-height:1.5;text-align:center}

  .hero-visual{width:100%;min-width:0;min-height:475px;overflow:visible;display:flex;align-items:center;justify-content:center}
  .hero-glow{width:320px;height:320px}
  .phone-mockup{width:235px;height:450px;padding:9px;border-width:7px;border-radius:34px;transform:rotate(2deg)}
  .phone-top{width:78px;height:19px;top:7px}
  .phone-screen{border-radius:26px}
  .mock-cover{height:120px}
  .mock-avatar{width:64px;height:64px;margin:-32px auto 10px;font-size:19px}
  .phone-screen h3{font-size:20px}
  .mock-items{margin:17px 12px 0;gap:7px}
  .mock-items div{padding:8px 9px;font-size:9px}
  .mock-items b{width:23px;height:23px}
  .nfc-chip{left:50%;bottom:12px;width:175px;padding:15px;transform:translateX(-50%) rotate(-4deg)}
  .nfc-chip .chip-symbol{font-size:25px;margin-bottom:12px}
  .nfc-chip strong{font-size:11px}
  .nfc-chip span{font-size:10px}

  .feature,.feature-green{width:calc(100% - 32px);min-width:0;min-height:auto;margin:18px auto 0;grid-template-columns:minmax(0,1fr);gap:35px;padding:55px 20px;border-radius:28px;overflow:hidden}
  .feature-copy,.occasion-copy{width:100%;min-width:0;text-align:center}
  .feature-copy h2,.occasion-copy h2{width:100%;max-width:100%;font-size:clamp(34px,9.5vw,42px);line-height:1.06;overflow-wrap:break-word}
  .feature-copy > p,.occasion-copy > p{width:100%;max-width:330px;margin:20px auto 0;font-size:14px;line-height:1.7}
  .card-stage{width:100%;min-width:0;height:350px;order:2}
  .business-card{width:min(300px,88vw);max-width:100%}
  .connection-visual{width:100%;min-width:0;height:400px;order:2}
  .connection-phone{width:220px;height:410px}
  .mini-list{width:100%;max-width:330px;margin:25px auto 0;text-align:left}
  .dashboard-mini{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .update-card{width:100%;max-width:340px;margin:0 auto;transform:none}
  .profile-stack{width:100%;min-width:0;height:350px;order:2}
  .stack-card{width:min(250px,78vw);height:330px}
  .stack-card b{margin-top:175px}

  .pricing-section{width:100%;margin-top:55px;padding:70px 0 75px;overflow:hidden}
  .pricing-shell{width:calc(100% - 32px);max-width:none;min-width:0;margin:0 auto}
  .pricing-heading{width:100%;max-width:340px;margin:0 auto 38px}
  .pricing-heading h2{width:100%;font-size:36px;line-height:1.08;overflow-wrap:break-word}
  .pricing-heading p{width:100%;font-size:14px;line-height:1.65}
  .pricing-grid{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
  .price-card{width:100%;min-width:0;min-height:610px;border-radius:22px}
  .price-top{min-height:96px;padding:30px 15px 8px}
  .current-price{font-size:24px}
  .card-flip{width:100%;height:225px;padding:10px 18px;flex:0 0 auto}
  .card-face img{width:100%;max-width:300px;max-height:205px}
  .price-info{min-width:0;padding:18px 22px 28px}
  .price-info h3{font-size:32px}
  .price-info > p:not(.price-tagline){max-width:290px;font-size:13px;line-height:1.65}

  .benefits-section{width:100%;min-width:0;padding-top:75px;padding-bottom:75px}
  .benefits-heading{width:calc(100% - 32px);margin:0 auto 42px}
  .benefits-heading h2{font-size:36px;line-height:1.08}
  .benefits-layout{width:calc(100% - 32px);margin:0 auto;grid-template-columns:minmax(0,1fr);gap:50px}
  .benefits-grid{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:35px}
  .benefit-product-card{width:90%;max-width:340px}

  .reviews{width:calc(100% - 32px);min-width:0;padding-top:75px;padding-bottom:75px}
  .reviews-head{width:100%;min-width:0;display:block;text-align:center}
  .reviews-head h2{font-size:36px;line-height:1.08}
  .rating{margin-top:20px;text-align:center}
  .review-grid{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:38px}
  .review-card{width:100%;min-width:0;padding:26px}

  .landing-footer{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0;padding:60px 22px 30px;overflow:hidden}
  .landing-footer .footer-brand{width:100%;min-width:0;display:flex;align-items:flex-start}
  .landing-footer .footer-brand .brand-logo{width:170px !important;max-width:170px !important;height:auto !important}
  .landing-footer .footer-columns{width:100%;min-width:0;margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 24px;justify-content:stretch}
  .landing-footer .footer-columns div{min-width:0}
  .landing-footer .footer-columns a{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
  .landing-footer .footer-bottom{grid-column:1;width:100%;min-width:0;margin-top:45px;padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:11px;line-height:1.5}
  .floating-zalo{width:56px;height:56px;right:15px;bottom:15px}
}

@media (max-width:375px){
  .section-shell,.hero,.feature,.reviews,.benefits-layout,.benefits-heading{width:calc(100% - 24px)}
  .hero{padding-top:45px;padding-bottom:55px}
  .hero-copy h1{font-size:36px}
  .hero-copy > p{max-width:300px;font-size:14px}
  .hero-actions{max-width:310px}
  .hero-visual{min-height:450px}
  .phone-mockup{width:220px;height:425px}
  .nfc-chip{width:160px}
  .feature,.feature-green{padding:48px 17px}
  .feature-copy h2,.occasion-copy h2,.pricing-heading h2,.benefits-heading h2,.reviews-head h2{font-size:34px}
  .pricing-shell{width:calc(100% - 24px)}
  .price-card{min-height:595px}
  .card-flip{height:215px}
  .landing-footer{padding-left:18px;padding-right:18px}
}