/* ==========================================================================
   Memo Pic – kiểu "Sáng & gọn"
   Nền trắng, màu pastel (xanh – đào – xanh lá), nhiều khoảng trắng.
   Chỉ phần đầu trang (hero) có bố cục cách điệu: thẻ ảnh nghiêng trên
   đường sóng, vòng tròn mảnh và vài chấm màu. Phần còn lại tối giản.
   Nạp khi Cài đặt › Giao diện › Kiểu nền = "Sáng & gọn" (body.mem).
   ========================================================================== */
.mem {
  --peach-a: #f6c38b; --green-a: #6dbf73; --pink-a: #f2a49a; --blue-a: color-mix(in srgb, var(--coral) 55%, #fff);
  --soft: #f6f8fd; --line: #eceff6; --muted: #737b8c; --ink2: #3c4354;
  --card-shadow: 0 24px 48px -30px rgba(52, 72, 130, .32), 0 2px 6px rgba(52, 72, 130, .05);
  --r: 20px;
  --script: "Pacifico", "Brush Script MT", cursive;
}
body.mem { background: var(--bg); color: var(--ink2); }
.mem .blob-tr, .mem .diamond, .mem .dots { display: none; }
.mem h1, .mem h2, .mem h3 { letter-spacing: -.02em; }
.mem h1, .mem h2 { font-weight: 700; }

/* ---------- nút: bo tròn, chữ thường ---------- */
.mem .btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font: 600 15px/1 inherit; font-family: inherit; padding: 14px 26px; }
.mem .btn.lg { padding: 16px 30px; font-size: 15.5px; }
.mem .btn.sm { padding: 10px 18px; font-size: 14px; }
.mem .btn.pri { background: var(--coral); box-shadow: 0 12px 24px -14px rgb(var(--coral-rgb) / .9); }
.mem .btn.pri:hover { background: color-mix(in srgb, var(--coral) 88%, #000); }
.mem .btn.line { background: #fff; border-color: #dfe5f2; color: var(--coral); }
.mem .btn.line:hover { background: var(--peach); color: var(--coral); border-color: var(--blue-a); }
.mem .more { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.mem .price .go, .mem .back { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ---------- header ---------- */
.mem .hd { background: rgba(255, 255, 255, .9); }
.mem .brand b { font: 400 26px/1.15 var(--script); letter-spacing: 0; }
.mem .brand small { letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
.mem .brand-mark { width: 46px; height: 46px; }
.mem .nav a { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--ink2); }
.mem .nav a.on { color: var(--coral); font-weight: 600; }
.mem .nav a::after { height: 2.5px; border-radius: 2px; bottom: 0; }
.mem .nav .nav-cta { color: #fff; font-weight: 600; }
.mem .menu-btn { background: var(--coral); }
@media (max-width: 960px) { .mem .brand b { font-size: 22px; } .mem .brand-mark { width: 40px; height: 40px; } }
@media (min-width: 961px) and (max-width: 1280px) { .mem .nav a { font-size: 14px; padding: 8px 9px; } }

/* ---------- tiêu đề khu vực ---------- */
.mem .kicker { text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.mem .sec-h h2 { font-size: clamp(28px, 3.3vw, 40px); }
.mem .sec { padding: 84px 0; }
.mem .sec.alt { background: var(--soft); }

/* ======================= HERO cách điệu ======================= */
.mem .hero-mem { padding: 64px 0 30px; overflow: hidden; text-align: center; }
.hm-head { position: relative; z-index: 2; }
.hm-kick { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; color: #4b5263; margin: 0 0 12px; }
.mem .hero-mem h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.12; margin: 0 auto 18px; max-width: 900px; }
.hm-head .hl { position: relative; display: inline-block; white-space: nowrap; }
.hm-head .hl::after { content: ''; position: absolute; left: 2%; right: 0; bottom: -.12em; height: .16em; min-height: 6px; border-radius: 99px; background: var(--peach-a); transform: rotate(-1deg); }
.mem .hero-mem .lead { margin: 0 auto; max-width: 600px; font-size: 17px; color: var(--muted); }

.hm-stage { position: relative; height: 520px; margin-top: 10px; }
.hm-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hm-orbit .o1, .hm-orbit .o2 { position: absolute; border-radius: 50%; border: 1.5px solid #eef1f8; transform: translate(-50%, -50%); }
.hm-orbit .o1 { width: 720px; height: 720px; }
.hm-orbit .o2 { width: 500px; height: 500px; background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--coral) 9%, #fff) 0, rgba(255, 255, 255, 0) 62%); }
.hm-orbit .dt { position: absolute; border-radius: 50%; }
.hm-orbit .d1 { width: 30px; height: 30px; background: var(--peach-a); left: -200px; top: -250px; }
.hm-orbit .d2 { width: 36px; height: 36px; background: var(--blue-a); left: 300px; top: -230px; }
.hm-orbit .d3 { width: 46px; height: 46px; background: var(--green-a); left: -250px; top: 250px; }
.hm-orbit .d4 { width: 18px; height: 18px; background: var(--pink-a); left: 80px; top: 238px; }
.hm-wave { position: absolute; left: 0; width: 100%; top: 140px; height: 240px; fill: none; stroke: var(--blue-a); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.hm-wave path { vector-effect: non-scaling-stroke; }

.hm-cards { position: relative; z-index: 2; height: 100%; display: flex; justify-content: center; align-items: center; gap: 30px; }
.hm-card { width: 250px; flex: 0 0 auto; background: #fff; border-radius: 22px; padding: 26px 22px 24px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; color: var(--ink); }
.hm-card.c1 { transform: rotate(-11deg) translateY(16px); }
.hm-card.c2 { transform: rotate(5deg) translateY(-6px); }
.hm-card.c3 { transform: rotate(7deg) translateY(4px); }
.hm-card.c4 { transform: rotate(-3deg) translateY(-4px); }
.hm-card:hover { transform: rotate(0) translateY(-10px); box-shadow: 0 34px 60px -30px rgba(52, 72, 130, .45); z-index: 3; }
.hm-ph { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; margin-bottom: 10px; color: var(--coral); }
.hm-ph img { width: 100%; height: 100%; object-fit: cover; }
.hm-ph svg.ic { width: 54px; height: 54px; stroke-width: 1.3; }
.hm-card b { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.hm-chip { font-size: 13px; color: #555d6e; background: #f3f5fa; border-radius: 999px; padding: 3px 12px; }
.hm-brand { align-items: flex-start; text-align: left; padding: 30px 26px 24px; gap: 0; }
.hm-brand small { font-size: 15px; font-weight: 600; color: var(--peach-a); filter: saturate(1.4) brightness(.9); }
.hm-brand b { font-size: 27px; line-height: 1.15; margin-top: 2px; }
.hm-brand em { font-style: normal; font-weight: 600; color: var(--coral); font-size: 17px; margin-top: 2px; }
.hm-mark { width: 74px; height: 74px; margin: 14px auto 10px; opacity: .9; display: block; align-self: center; }
.hm-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hm-brand p { margin: 0 auto; align-self: center; font-size: 14px; font-weight: 600; color: var(--ink2); }
.hm-brand p span { color: var(--peach-a); filter: saturate(1.4) brightness(.9); }
.hm-soc { display: flex; gap: 8px; align-self: center; margin-top: 8px; }
.hm-soc a { width: 30px; height: 30px; border-radius: 50%; background: var(--peach); color: var(--coral); display: grid; place-items: center; }
.hm-soc svg.ic { width: 15px; height: 15px; }

.hm-foot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 6px; position: relative; z-index: 2; }
.hm-foot .btn { order: 2; }
.hm-link { display: inline-flex; align-items: center; gap: 14px; font-size: 24px; font-weight: 600; color: #3c4354; letter-spacing: -.01em; }
.hm-link svg.ic { width: 28px; height: 28px; stroke-width: 1.8; transition: transform .2s; }
.hm-link:hover { color: var(--coral); } .hm-link:hover svg.ic { transform: translate(3px, -3px); }
.hm-foot .trust { order: 3; justify-content: center; color: var(--muted); font-size: 14px; }
.hm-foot .trust svg.ic { color: var(--green-a); }

@media (max-width: 1180px) { .hm-card { width: 220px; } .hm-cards { gap: 18px; } .hm-ph { width: 128px; height: 128px; } }
@media (max-width: 960px) {
  .hm-stage { height: auto; padding: 50px 0 40px; }
  .hm-cards { flex-wrap: wrap; gap: 26px 14px; padding: 0 16px; max-width: 560px; margin: 0 auto; }
  .hm-card { width: calc(50% - 7px); padding: 20px 12px 18px; }
  .hm-card.c1 { transform: rotate(-6deg); } .hm-card.c2 { transform: rotate(4deg) translateY(14px); }
  .hm-card.c3 { transform: rotate(3deg); } .hm-card.c4 { transform: rotate(-3deg) translateY(14px); }
  .hm-ph { width: 104px; height: 104px; margin-bottom: 6px; }
  .hm-card b { font-size: 16px; } .hm-chip { font-size: 12px; }
  .hm-brand { padding: 20px 16px 18px; } .hm-brand b { font-size: 21px; } .hm-brand em { font-size: 14px; }
  .hm-mark { width: 54px; height: 54px; margin: 10px auto 6px; }
  .hm-brand p span { display: none; }
  .hm-orbit .o1 { width: 520px; height: 520px; } .hm-orbit .o2 { width: 360px; height: 360px; }
  .hm-orbit .d1 { left: -150px; top: -270px; } .hm-orbit .d2 { left: 140px; top: -280px; } .hm-orbit .d3 { left: -170px; top: 250px; width: 34px; height: 34px; } .hm-orbit .d4 { left: 120px; top: 270px; }
  .hm-wave { top: 50%; height: 160px; transform: translateY(-50%); }
  .mem .hero-mem { padding-top: 40px; }
  .hm-link { font-size: 20px; }
}

/* ---------- trang con: đầu trang nhẹ nhàng ---------- */
.mem .page-h, .mem .post-h { background: linear-gradient(180deg, #fff, var(--soft)); }
.mem .mem-deco { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mem .mem-deco .dot { position: absolute; border-radius: 50%; }
.mem .mem-deco .a { width: 26px; height: 26px; background: var(--peach-a); right: 16%; top: 28%; }
.mem .mem-deco .b { width: 16px; height: 16px; background: var(--blue-a); right: 9%; top: 58%; }
.mem .mem-deco .c { width: 34px; height: 34px; background: color-mix(in srgb, var(--green-a) 75%, #fff); right: 24%; bottom: 14%; }
@media (max-width: 760px) { .mem .mem-deco .a { right: 6%; top: 18%; } .mem .mem-deco .c, .mem .mem-deco .b { display: none; } }

/* ---------- thẻ: trắng, bo tròn, bóng mềm ---------- */
.mem .pcard, .mem .ccard, .mem .bcard, .mem .bhero, .mem .card, .mem .ocard, .mem .spec, .mem .step { border-radius: var(--r); box-shadow: var(--card-shadow); border: 1px solid #f0f2f8; }
.mem .pcard:hover, .mem .ccard:hover, .mem .bcard:hover { box-shadow: 0 30px 56px -30px rgba(52, 72, 130, .45); }
.mem .pgrid, .mem .bgrid { gap: 28px; }
.mem .pbody h3, .mem .cbody h3, .mem .bbody h3 { font-weight: 700; }
.mem .price { border-top: 1px solid var(--line); }
.mem .price b, .mem .pprice b { font-family: inherit; font-weight: 700; }
.mem .pprice b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--coral); }
.mem .sale { border-radius: 999px; padding: 4px 10px; }
.mem .hot { border-radius: 999px; }
.mem .noimg { background: linear-gradient(135deg, var(--peach), color-mix(in srgb, var(--coral) 30%, #fff)); color: var(--coral); }
.mem .gmain { border-radius: 24px; box-shadow: var(--card-shadow); }
.mem .tagbar a { border-color: #e3e8f3; }
.mem .tagbar a.on { background: var(--coral); }

/* dịch vụ & quy trình: icon tròn pastel */
.mem .si { border-radius: 50%; box-shadow: none; }
.mem .sgrid .svc:nth-child(4n+1) .si, .mem .flow .step:nth-child(4n+1) .si { background: #ece5ff; color: #7b61d9; }
.mem .sgrid .svc:nth-child(4n+2) .si, .mem .flow .step:nth-child(4n+2) .si { background: #ffe1ec; color: #d85b8a; }
.mem .sgrid .svc:nth-child(4n+3) .si, .mem .flow .step:nth-child(4n+3) .si { background: var(--peach); color: var(--coral); }
.mem .sgrid .svc:nth-child(4n) .si, .mem .flow .step:nth-child(4n) .si { background: #fff0dd; color: #d98a2b; }
.mem .flow::before { border: 1.5px solid #e6eaf4; }
.mem .step { background: #fff; }
.mem .step .sn { font-family: inherit; font-weight: 700; color: #e3e8f3; }
.mem .exp-img::before { background: var(--peach-a); width: 90px; height: 90px; }
.mem .exp-img .ph { border-radius: 24px; }
.mem .showcase::before { background: color-mix(in srgb, var(--coral) 14%, #fff); }
.mem .showcase .s { border-radius: 18px; }

/* bài viết */
.mem .article blockquote { background: var(--soft); border-left-color: var(--coral); border-radius: 0 14px 14px 0; font-family: inherit; font-size: 18px; }
.mem .post-cta { background: var(--coral); }

/* ---------- CTA cuối trang: khối xanh nhạt bo tròn ---------- */
.mem .talk { background: none; padding: 20px 0 70px; overflow: visible; }
.mem .talk-in { background: var(--peach); border-radius: 28px; padding: 54px 50px; max-width: 1116px; }
.mem .talk h2 { font-size: clamp(26px, 3vw, 36px); }
.mem .talk p { color: var(--muted); }
@media (max-width: 640px) { .mem .talk-in { margin: 0 16px; padding: 36px 24px; } }

/* ---------- form, footer ---------- */
.mem .mbox { border-radius: 24px; }
.mem .mbox::before { opacity: .08; }
.mem .ft { background: #fff; border-top: 1px solid var(--line); }
.mem .ft h4 { font-family: inherit; font-weight: 700; font-size: 16px; }
.mem .fgrid .feat:nth-child(4n+1) .si { background: #ece5ff; color: #7b61d9; } .mem .fgrid .feat:nth-child(4n+2) .si { background: #ffe1ec; color: #d85b8a; }
.mem .fgrid .feat:nth-child(4n+3) .si { background: var(--peach); color: var(--coral); } .mem .fgrid .feat:nth-child(4n) .si { background: #fff0dd; color: #d98a2b; }
.mem .feat, .mem .tcard, .mem .plan, .mem .faq-it { border-radius: var(--r); box-shadow: var(--card-shadow); border: 1px solid #f0f2f8; }
.mem .stat b, .mem .plan-price b { font-family: inherit; }