/*============================================================
  ORDER-QRCODE.VN — Landing Page
  Design: White bg + Green solid + Minimal radius + No gradient
  ============================================================*/

:root {
  --g: #1f7a43;
  --gd: #155a31;
  --gp: #edf7ee;
  --gb: #f7fbf6;
  --ink: #142018;
  --mu: #647168;
  --ln: #e4ebe2;
  --w: #fff;
  --r: 18px;
  --sh: 0 16px 40px rgba(13,59,31,.08);
}

.qr-landing,.qr-landing *{box-sizing:border-box}
.qr-landing{min-height:100vh;background:var(--w);color:var(--ink);font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
.qr-landing a{color:inherit;text-decoration:none}
.qr-landing img,.qr-landing video{display:block;max-width:100%}

.qr-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* ---- BUTTONS ---- */
.qr-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:var(--r);border:1.5px solid transparent;font-family:inherit;font-weight:700;font-size:.88rem;line-height:1.2;text-align:center;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.qr-btn:hover{opacity:.9;transform:translateY(-1px)}
.qr-btn--fill{color:#fff;border-color:var(--g);background:var(--g)}
.qr-btn--fill:hover{background:var(--gd);border-color:var(--gd);color:#fff}
.qr-btn--outline{color:var(--g);border-color:var(--g);background:transparent}
.qr-btn--outline:hover{background:var(--gp);color:var(--g)}
.qr-btn--ghost{color:var(--ink);border-color:rgba(13,59,31,.14);background:transparent}
.qr-btn--ghost:hover{background:var(--gb);border-color:var(--g);color:var(--g)}
.qr-btn--wht{color:var(--g);border-color:#fff;background:#fff}
.qr-btn--wht:hover{background:rgba(255,255,255,.9);color:var(--g)}
.qr-btn--ol{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.qr-btn--ol:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.qr-btn--lg{min-height:52px;padding-inline:28px;font-size:.95rem}
.qr-btn--fw{width:100%}

/* ---- TAGS ---- */
.qr-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--g);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.qr-tag::before{content:"";width:30px;height:2px;background:var(--g);border-radius:1px}

/* ============================================================
   HERO - FULLSCREEN VIDEO
   ============================================================ */
.qr-hero{position:relative;width:100%;height:100vh;min-height:620px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr-hero__bg{position:absolute;inset:0;z-index:0}
.qr-hero__bg video{width:100%;height:100%;object-fit:cover;object-position:center}
.qr-hero__ovl{position:absolute;inset:0;background:rgba(8,32,16,.64);z-index:1}
.qr-hero__ct{position:relative;z-index:2;text-align:center;padding:100px 24px 60px;width:100%}
.qr-hero__h1{margin:0 auto;max-width:860px;color:#fff;font-size:clamp(2.2rem,5vw,4.2rem);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.qr-hero__sub{margin:20px auto 0;max-width:600px;color:rgba(255,255,255,.85);font-size:clamp(.85rem,1.2vw,1rem);font-weight:500;line-height:1.6}
.qr-hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}

/* ============================================================
   SECTIONS
   ============================================================ */
.qr-sec{padding:clamp(56px,9vw,100px)0;background:var(--w)}
.qr-sec--soft{background:var(--gb)}
.qr-sec__hd{max-width:700px}
.qr-sec__hd--c{margin-inline:auto;text-align:center}
.qr-sec__hd--c .qr-tag{justify-content:center}
.qr-sec__hd h2{margin:0;color:var(--g);font-size:clamp(1.75rem,3.2vw,2.8rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.qr-sec__hd p{margin:14px 0 0;color:var(--mu);font-size:.96rem;line-height:1.7}

/* ---- NUMBERS ---- */
.qr-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;background:var(--ln);border-radius:var(--r);overflow:hidden}
.qr-num{text-align:center;padding:32px 18px;background:var(--w)}
.qr-num strong{display:block;color:var(--g);font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:900;line-height:1}
.qr-num span{display:block;margin-top:8px;color:var(--mu);font-size:.88rem;line-height:1.45}

/* ---- EXTRA WOW EFFECTS ---- */
@property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin {
  0% { --a: 0deg; }
  100% { --a: 360deg; }
}
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ---- STEPS (Quy trình) WOW REDESIGN ---- */
.qr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:60px;position:relative;z-index:2}
.qr-step{position:relative;padding:4px;border-radius:28px;background:transparent;transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);z-index:1}
.qr-step::before{content:"";position:absolute;inset:0;border-radius:28px;background:conic-gradient(from var(--a), transparent 60%, rgba(31,122,67,0.6), #2b9f58, transparent);opacity:0;transition:opacity 0.5s ease;z-index:-1}
.qr-step:hover{transform:translateY(-15px) scale(1.02)}
.qr-step:hover::before{opacity:1;animation:spin 3s linear infinite}
.qr-step-content{position:relative;background:#fff;border-radius:24px;padding:40px 24px 30px;height:100%;text-align:center;box-shadow:0 15px 35px rgba(13,59,31,0.06);overflow:hidden;z-index:2;border:1px solid rgba(31,122,67,0.08)}
.qr-step-content::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle, rgba(43,159,88,0.08) 0%, transparent 60%);opacity:0;transition:opacity 0.5s ease;pointer-events:none}
.qr-step:hover .qr-step-content::after{opacity:1}
.qr-step__no{position:relative;width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg, #f0fdf4, #dcfce7);font-size:1.7rem;font-weight:900;color:var(--g);box-shadow:inset 0 0 0 4px #fff, 0 10px 20px rgba(31,122,67,0.1);transition:all 0.6s cubic-bezier(0.34,1.56,0.64,1);z-index:3}
.qr-step:hover .qr-step__no{transform:rotateY(360deg) scale(1.15);background:linear-gradient(135deg, var(--g), var(--gd));color:#fff;box-shadow:inset 0 0 0 4px rgba(255,255,255,0.2), 0 15px 30px rgba(31,122,67,0.3)}
.qr-step h3{margin:0;font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.4;transition:color 0.3s ease;position:relative;z-index:3}
.qr-step:hover h3{color:var(--g)}
.qr-step p{margin:12px 0 0;font-size:0.95rem;line-height:1.6;color:var(--mu);position:relative;z-index:3}

/* ---- FEATURES (Tính năng) WOW REDESIGN ---- */
#features{position:relative;background:#fafdfb;overflow:hidden}
#features::before{content:"";position:absolute;top:30%;left:50%;width:80vw;height:80vw;max-width:800px;max-height:800px;background:radial-gradient(circle, rgba(43,159,88,0.06) 0%, transparent 70%);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;animation:floatY 10s ease-in-out infinite}
.qr-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px;position:relative;z-index:2}
.qr-feat{position:relative;padding:2px;border-radius:28px;background:transparent;transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1);z-index:1}
.qr-feat::before{content:"";position:absolute;inset:0;border-radius:28px;background:conic-gradient(from var(--a), transparent 70%, rgba(43,159,88,0.8), var(--g), transparent);opacity:0;transition:opacity 0.5s ease;z-index:-1}
.qr-feat:hover{transform:translateY(-12px) scale(1.03);z-index:10}
.qr-feat:hover::before{opacity:1;animation:spin 2.5s linear infinite}
.qr-feat-content{position:relative;background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:26px;padding:40px 30px;height:100%;border:1px solid rgba(255,255,255,0.6);box-shadow:0 10px 30px rgba(13,59,31,0.05);overflow:hidden;z-index:2}
.qr-feat-watermark{position:absolute;top:-15px;right:-10px;font-size:120px;font-weight:900;color:rgba(31,122,67,0.03);line-height:1;transition:all 0.6s cubic-bezier(0.175,0.885,0.32,1.275);z-index:0;pointer-events:none}
.qr-feat:hover .qr-feat-watermark{color:rgba(31,122,67,0.08);transform:scale(1.2) translate(-10px, 10px) rotate(-10deg)}
.qr-feat__no{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:20px;border-radius:16px;background:var(--gp);font-size:1.1rem;font-weight:900;color:var(--g);position:relative;z-index:2;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);box-shadow:0 5px 15px rgba(31,122,67,0.08)}
.qr-feat:hover .qr-feat__no{background:var(--g);color:#fff;transform:translateY(-5px) scale(1.15) rotate(5deg);box-shadow:0 12px 25px rgba(31,122,67,0.3)}
.qr-feat h3{margin:0;font-size:1.2rem;font-weight:800;color:var(--ink);position:relative;z-index:2;transition:color 0.3s ease}
.qr-feat:hover h3{color:var(--g)}
.qr-feat p{margin:12px 0 0;font-size:0.95rem;line-height:1.65;color:var(--mu);position:relative;z-index:2}

/* ---- TEMPLATES ---- */
.qr-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.qr-tpl{overflow:hidden;display:block;border-radius:var(--r);border:1px solid rgba(31,122,67,.08);transition:all .4s cubic-bezier(.165,.84,.44,1)}
.qr-tpl:hover{box-shadow:var(--sh);transform:translateY(-10px);border-color:rgba(31,122,67,.2)}
.qr-tpl__img{aspect-ratio:16/10;overflow:hidden;background:var(--gb);position:relative}
.qr-tpl__img::after{content:"";position:absolute;inset:0;background:rgba(31,122,67,.1);opacity:0;transition:opacity .3s ease}
.qr-tpl:hover .qr-tpl__img::after{opacity:1}
.qr-tpl__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.165,.84,.44,1)}
.qr-tpl:hover .qr-tpl__img img{transform:scale(1.05)}
.qr-tpl__body{padding:20px 22px}
.qr-tpl__body h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--ink);transition:color .3s ease}
.qr-tpl:hover .qr-tpl__body h3{color:var(--g)}
.qr-tpl__body span{display:inline-block;margin-top:6px;font-size:.85rem;font-weight:700;color:var(--g)}

/* ---- PRICING CARDS ---- */
.qr-price-cards{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:20px;margin-top:50px;align-items:stretch}
.qr-price-card{display:flex;flex-direction:column;grid-column:span 2;border:1px solid rgba(31,122,67,.1);border-radius:24px;background:linear-gradient(145deg,#ffffff,#fafdfb);padding:36px 20px;text-align:center;position:relative;transition:all .4s cubic-bezier(.165,.84,.44,1)}
.qr-price-card:nth-child(4){grid-column:2/span 2}
.qr-price-card:nth-child(5){grid-column:4/span 2}
.qr-price-card:hover{box-shadow:0 25px 50px rgba(13,59,31,.12);transform:translateY(-12px);border-color:var(--g)}
.qr-price-card--feat{border-color:var(--g);border-width:2px;background:linear-gradient(180deg,#f7fbf6 0%,#ffffff 100%);z-index:2;box-shadow:0 15px 35px rgba(13,59,31,.08)}
.qr-price-card--feat:hover{transform:translateY(-12px)}
@media(max-width:991.98px){ .qr-price-card--feat:hover{transform:translateY(-12px)} }
.qr-price-card__no{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--gp);color:var(--g);font-size:.9rem;font-weight:800;margin-bottom:16px;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.qr-price-card:hover .qr-price-card__no{background:var(--g);color:#fff;transform:rotate(12deg) scale(1.1);box-shadow:0 8px 16px rgba(31,122,67,.25)}
.qr-price-card--feat .qr-price-card__no{background:linear-gradient(135deg,var(--g),var(--gd));color:#fff}
.qr-price-card__badge{align-self:center;display:block;margin-bottom:12px;padding:6px 14px;border-radius:50px;background:linear-gradient(90deg,var(--g),#2b9f58);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;box-shadow:0 4px 10px rgba(31,122,67,.3)}
.qr-price-card h3{margin:8px 0;font-size:1.15rem;font-weight:900;color:var(--ink);letter-spacing:-0.02em}
.qr-price-card__desc{font-size:.85rem;color:var(--mu);line-height:1.5;margin:0 0 24px;min-height:38px}
.qr-price-card__pricing{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.qr-price-card__year{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(31,122,67,.04);font-size:.8rem;transition:background .3s ease}
.qr-price-card:hover .qr-price-card__year{background:rgba(31,122,67,.08)}
.qr-price-card__year span{color:var(--mu);font-weight:600}
.qr-price-card__year strong{font-size:1.1rem;color:var(--g);font-weight:800}
.qr-price-card__year strong small{font-size:.75rem;font-weight:700}
.qr-price-card__year--full{justify-content:center;flex-direction:column;gap:4px;padding:24px 10px}
.qr-price-card__year--full strong{font-size:.95rem}
.qr-price-card__year--full span{font-size:.75rem}
.qr-price-card__actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:22px;border-top:1px dashed rgba(31,122,67,.22)}
.qr-price-card__actions a{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:12px 16px;border-radius:16px;font-size:.9rem;font-weight:800;line-height:1.3;text-align:center;transition:all .18s ease}
.qr-price-card__demo{color:#fff;background:var(--g);border:1px solid var(--g);box-shadow:0 12px 22px rgba(31,122,67,.18)}
.qr-price-card__demo:hover{color:#fff;background:var(--gd);border-color:var(--gd);transform:translateY(-1px)}
.qr-price-card__trial{color:var(--ink);background:#fff;border:1.5px solid rgba(31,122,67,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}
.qr-price-card__trial:hover{color:var(--g);border-color:var(--g);background:var(--gb);transform:translateY(-1px)}
.qr-price-card__actions p{margin:6px 0 0;color:var(--mu);font-size:.82rem;font-weight:500;line-height:1.45}
.qr-price-card__actions small{display:block;margin-top:-4px;padding-top:10px;border-top:1px dotted rgba(20,32,24,.22);color:var(--mu);font-size:.76rem;line-height:1.4}
.qr-price-card--feat .qr-price-card__demo{background:#2b9f58;border-color:#2b9f58;box-shadow:0 12px 24px rgba(43,159,88,.24)}
.qr-price-card--feat .qr-price-card__trial{border-color:rgba(31,122,67,.36)}
.qr-price-cards__note{text-align:center;margin-top:24px;font-size:.85rem;color:var(--mu);font-style:italic}
.qr-price-cards__cta{text-align:center;margin-top:30px}

/* ---- BLOG ---- */
.qr-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.qr-blog{padding:28px 24px;transition:box-shadow .2s}
.qr-blog:hover{box-shadow:var(--sh)}
.qr-blog h3{margin:0;font-size:1rem;font-weight:700;color:var(--ink)}
.qr-blog p{margin:8px 0 0;font-size:.86rem;line-height:1.6;color:var(--mu)}
.qr-blog a{display:inline-block;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--g)}

/* ---- CTA BOTTOM ---- */
.qr-cta-bot{padding:clamp(48px,8vw,90px)0;background:var(--g)}
.qr-cta-bot__in{text-align:center}
.qr-cta-bot__in h2{margin:0;font-size:clamp(1.65rem,3vw,2.4rem);font-weight:800;line-height:1.2;color:#fff}
.qr-cta-bot__in>p{margin:12px auto 0;max-width:500px;font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.82)}
.qr-cta-bot__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:24px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:991.98px){
  .qr-wrap{width:min(100%,calc(100% - 32px))}
  .qr-hero__h1{font-size:clamp(1.7rem,7vw,2.8rem)}
  .qr-nums{grid-template-columns:repeat(2,1fr)}
  .qr-steps{grid-template-columns:repeat(2,1fr)}
  .qr-feat-grid{grid-template-columns:repeat(2,1fr)}
  .qr-tpl-grid,.qr-blog-grid{grid-template-columns:repeat(2,1fr)}
  .qr-price-cards{grid-template-columns:repeat(6,1fr)}
}

@media(max-width:575.98px){
  .qr-wrap{width:min(100%,calc(100% - 24px))}
  .qr-hero{min-height:540px}
  .qr-hero__ct{padding:90px 16px 48px}
  .qr-hero__h1{font-size:clamp(1.5rem,10vw,2.1rem)}
  .qr-hero__sub{font-size:.78rem}
  .qr-hero__btns{flex-direction:column;align-items:center}
  .qr-hero__btns .qr-btn{width:100%;max-width:280px}
  .qr-nums{grid-template-columns:1fr}
  .qr-steps,.qr-feat-grid,.qr-tpl-grid,.qr-blog-grid{grid-template-columns:1fr}
  .qr-price-cards{grid-template-columns:1fr}
  .qr-price-card,.qr-price-card:nth-child(4),.qr-price-card:nth-child(5){grid-column:auto}
  .qr-sec{padding:48px 0}
  .qr-sec__hd h2{font-size:clamp(1.45rem,8vw,1.9rem)}
  .qr-cta-bot__btns{flex-direction:column;align-items:center}
  .qr-cta-bot__btns .qr-btn{width:100%;max-width:280px}
}