:root{--pink:#ff5fa2;--pink2:#ffe6f1;--blue:#39aef5;--blue2:#e5f6ff;--solid:#ff5fa2;--solid-blue:#39aef5;--ink:#102033;--muted:#667085;--bg:#fbfdff;--card:#fff;--line:#edf1f6;--shadow:0 22px 60px rgba(16,32,51,.10);--radius:28px}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#fff 0%,#f7fbff 42%,#fff 100%);color:var(--ink);padding-bottom:86px}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.app{max-width:1180px;margin:auto;padding:16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}.logo{display:flex;align-items:center;gap:10px;font-weight:900}.logo img{height:46px}.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.nav a,.pill,.lang{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;box-shadow:0 8px 26px rgba(16,32,51,.05);cursor:pointer}.cta,.btn-primary{background:var(--solid);border:0;color:#fff;border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;box-shadow:0 12px 28px rgba(255,95,162,.22);transition:.22s ease}.cta:hover,.btn-primary:hover{filter:brightness(.96);transform:translateY(-1px)}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center;padding:26px 0}.hero-card{background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:38px;padding:34px;box-shadow:var(--shadow)}.eyebrow{color:var(--pink);font-weight:900}.hero h1{font-size:clamp(34px,5vw,64px);line-height:1.02;margin:12px 0}.hero p{font-size:18px;color:var(--muted);line-height:1.6}.hero-media{position:relative;min-height:460px;border-radius:42px;overflow:hidden;box-shadow:var(--shadow);background:url('https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?auto=format&fit=crop&w=1100&q=85') center/cover}.hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(57,174,245,.08),rgba(255,95,162,.25))}.floating{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;background:rgba(255,255,255,.92);border-radius:26px;padding:18px;box-shadow:var(--shadow)}.search{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 12px;margin-top:18px;box-shadow:0 14px 38px rgba(16,32,51,.08)}.search input{border:0;outline:0;flex:1;font-size:16px}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.action{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(16,32,51,.06)}.action b{display:block;margin-bottom:6px}.section-title{display:flex;align-items:end;justify-content:space-between;margin:30px 0 14px}.section-title h2{margin:0;font-size:30px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.banner{border-radius:30px;padding:24px;min-height:210px;position:relative;overflow:hidden;color:#fff;box-shadow:var(--shadow);background-size:cover;background-position:center}.banner:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,32,51,.75),rgba(16,32,51,.18))}.banner>*{position:relative}.banner h3{font-size:32px;margin:0 0 10px}.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 12px 38px rgba(16,32,51,.07)}.card-img{height:210px;background-size:cover;background-position:center;position:relative}.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);padding:8px 12px;border-radius:999px;font-weight:800}.video{position:absolute;right:12px;top:12px;background:rgba(16,32,51,.75);color:#fff;padding:8px 12px;border-radius:999px}.card-body{padding:16px}.card h3{margin:0 0 6px;cursor:pointer}.muted{color:var(--muted)}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chip{background:var(--blue2);color:#176b9c;border-radius:999px;padding:7px 10px;font-size:13px;font-weight:700}.chip.pink{background:var(--pink2);color:#bf2d6b}.card-actions{display:flex;gap:10px;margin-top:12px}.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 12px;cursor:pointer;flex:1}.bottom-nav{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:12px;width:min(680px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:28px;padding:8px;box-shadow:var(--shadow)}.bottom-nav a{text-align:center;border-radius:20px;padding:9px 6px;font-weight:800;font-size:13px}.bottom-nav a.active{background:var(--pink2);color:#bf2d6b}.modal,.toast-wrap{position:fixed;z-index:100}.modal{inset:0;background:rgba(16,32,51,.42);display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modal-box{background:#fff;border-radius:32px;max-width:760px;width:100%;max-height:92vh;overflow:auto;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-content{padding:20px}.close{border:0;background:#f4f7fb;border-radius:50%;width:38px;height:38px;cursor:pointer}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}.map{height:300px;border-radius:26px;background:linear-gradient(135deg,#e9f7ff,#ffeef6);position:relative;overflow:hidden;margin:14px 0}.road{position:absolute;height:12px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px #dce7f4}.r1{width:95%;left:2%;top:42%;transform:rotate(8deg)}.r2{width:85%;left:8%;top:62%;transform:rotate(-16deg)}.pin{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 10px rgba(255,95,162,.15)}.pin.k{background:var(--blue);animation:moveK 6s linear infinite}.pin.s{left:70%;top:36%}.pin.u{left:28%;top:58%}.pin.k{left:40%;top:48%}@keyframes moveK{0%{left:18%;top:50%}50%{left:58%;top:38%}100%{left:82%;top:56%}}.status{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.step{padding:12px;border-radius:18px;background:#f6f8fb;text-align:center;font-size:13px;font-weight:800}.step.on{background:var(--blue);color:#fff}.chat{display:flex;flex-direction:column;gap:10px}.msg{max-width:78%;padding:12px 14px;border-radius:18px;background:#f4f7fb}.msg.me{margin-left:auto;background:var(--solid);color:#fff}.toast-wrap{right:16px;top:82px;display:flex;flex-direction:column;gap:10px}.toast{background:#fff;border:1px solid var(--line);border-left:5px solid var(--pink);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);min-width:280px;animation:slide .35s ease}.toast b{display:block}@keyframes slide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}.page{max-width:940px;margin:18px auto;background:#fff;border:1px solid var(--line);border-radius:36px;box-shadow:var(--shadow);overflow:hidden}.article-hero{height:380px;background:url('https://images.unsplash.com/photo-1566004100631-35d015d6a491?auto=format&fit=crop&w=1300&q=85') center/cover}.article{padding:34px;font-size:18px;line-height:1.8}.article h1{font-size:46px;line-height:1.08}.quote{font-size:24px;font-weight:900;color:var(--pink);border-left:5px solid var(--pink);padding-left:18px}.profile-row,.order-row,.admin-row{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:22px;background:#fff;margin:10px 0}.avatar{width:64px;height:64px;border-radius:20px;background-size:cover;background-position:center}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 10px 30px rgba(16,32,51,.05)}.stat b{font-size:30px;color:var(--pink)}@media(max-width:900px){.hero{grid-template-columns:1fr}.feed{grid-template-columns:repeat(2,1fr)}.actions,.admin-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.app{padding:12px}.nav{display:none}.hero-card{padding:24px}.hero-media{min-height:330px}.grid,.feed,.form-grid{grid-template-columns:1fr}.actions{grid-template-columns:1fr 1fr}.status{grid-template-columns:1fr 1fr}.bottom-nav{bottom:8px}.article{padding:22px}.article h1{font-size:34px}}

.profile-cover{height:300px;background-size:cover;background-position:center;border-radius:0 0 30px 30px;position:relative;overflow:hidden}.profile-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,51,.05),rgba(16,32,51,.45))}.profile-namebox{margin-top:-48px;position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:18px;box-shadow:0 14px 42px rgba(16,32,51,.08)}.profile-namebox h2{margin:0 0 6px}.profile-section{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:24px;background:#fff}.profile-section h3{margin:0 0 10px}.profile-section p{line-height:1.75;color:#475467}.profile-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.profile-list div{background:#f7faff;border:1px solid var(--line);border-radius:18px;padding:12px}.solid-blue{background:var(--solid-blue)!important}.btn-danger{background:#ef4444!important;color:#fff;border:0}.btn-plain{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important}@media(max-width:640px){.profile-list{grid-template-columns:1fr}.profile-cover{height:240px}}

.logo img{height:58px;max-width:220px;object-fit:contain}.topbar .logo span{display:none}.activity-summary{display:flex;justify-content:space-between;align-items:center;padding:18px;border:1px solid var(--line);border-radius:24px;background:#f9fbff;margin-bottom:14px}.order-row.realistic{align-items:flex-start}.order-status{min-width:104px;text-align:center;background:#f4f7fb;border-radius:16px;padding:8px 10px;font-weight:900;font-size:13px}.order-status.live{background:var(--pink2);color:#bf2d6b}.mini-line{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:13px}.account-card{background:linear-gradient(135deg,#fff,#f6fbff);border:1px solid var(--line);border-radius:28px;padding:12px;margin-bottom:14px}.avatar.big{width:82px;height:82px;border-radius:26px}.nav a,.lang,.btn,.btn-primary,.cta,.action{white-space:nowrap}.btn-primary,.cta{background:#ff5fa2!important}.solid-blue,.step.on{background:#39aef5!important}@media(max-width:640px){.logo img{height:46px;max-width:170px}.activity-summary{display:block}.order-status{min-width:auto}.card-actions{flex-direction:column}}
.display-flex-ngang{
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}
/* =========================
   HERO PINK MAMOCARE, FIX RESPONSIVE
========================= */

.hero-pink {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
    gap: 24px;
    align-items: stretch;
    padding: 28px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 122, 178, .28), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(255, 220, 235, .9), transparent 34%),
        linear-gradient(135deg, #fff7fb 0%, #ffe2ef 48%, #fff 100%);
    box-shadow: 0 24px 70px rgba(255, 92, 160, .18);
    overflow: hidden;
}

.hero-card-pink {
    position: relative;
    min-width: 0;
    padding: 44px 38px;
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 54%, rgba(255,240,248,.68) 100%),
        url("https://images.unsplash.com/photo-1555252333-9f8e92e65df9?auto=format&fit=crop&w=1200&q=80");
    background-size: cover;
    background-position: right center;
    border: 1px solid rgba(255, 140, 188, .28);
    overflow: hidden;
}

.hero-card-pink .eyebrow {
    color: #ff4f98;
    font-weight: 900;
    margin-bottom: 16px;
}

.hero-card-pink h1 {
    max-width: 780px;
    font-size: clamp(40px, 4.7vw, 72px);
    line-height: 1.02;
    color: #142238;
    margin: 0 0 22px;
    letter-spacing: -1.8px;
}

.hero-card-pink h1 span {
    color: #f85297;
    text-shadow: 0 10px 26px rgba(248, 82, 151, .18);
}

.hero-card-pink p {
    max-width: 760px;
    font-size: 18px;
    line-height: 1.7;
    color: #59677d;
}

.search-pink {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255, 132, 181, .28);
    box-shadow: 0 16px 42px rgba(255, 92, 160, .16);
}

.search-pink input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
}

.search-pink .btn-primary {
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff4f98, #ff7eb6) !important;
    box-shadow: 0 10px 24px rgba(255, 79, 152, .28);
}

.actions-pink {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pink-action {
    min-height: 150px;
    min-width: 0;
    padding: 22px 14px;
    border-radius: 24px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255, 132, 181, .28);
    box-shadow: 0 14px 38px rgba(255, 92, 160, .12);
    text-align: center;
    white-space: normal !important;
    transition: .25s ease;
}

.pink-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(255, 92, 160, .22);
}

.pink-action .action-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6faa, #ff9ec7);
    color: #fff;
    font-size: 28px;
}

.pink-action b {
    display: block;
    color: #f53f8e;
    font-size: 16px;
    line-height: 1.28;
    margin-bottom: 8px;
    white-space: normal !important;
}

.pink-action .muted {
    display: block;
    line-height: 1.35;
    white-space: normal !important;
}

.hero-media-pink {
    position: relative;
    min-width: 300px;
    min-height: 520px;
    border-radius: 32px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,214,232,.9) 100%),
        url("https://images.unsplash.com/photo-1546015720-b8b30df5aa27?auto=format&fit=crop&w=900&q=80");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 132, 181, .32);
    box-shadow: 0 24px 60px rgba(255, 92, 160, .18);
}

.floating-pink {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 45px rgba(255, 92, 160, .18);
    word-break: normal;
    overflow-wrap: break-word;
}

.floating-pink b {
    display: block;
    color: #f53f8e;
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 14px;
}

.floating-pink p {
    font-size: 17px;
    line-height: 1.8;
    margin: 0;
}

.floating-pink b,
.floating-pink p {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
}

/* TABLET */
@media (max-width: 1100px) {
    .hero-pink {
        grid-template-columns: 1fr;
    }

    .hero-media-pink {
        min-width: 0;
        min-height: 420px;
    }
}

/* MOBILE */
@media (max-width: 900px) {
    .hero-pink {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .hero-card-pink {
        padding: 32px 22px;
        background-position: center right;
    }

    .hero-card-pink h1 {
        font-size: clamp(34px, 9vw, 54px);
        letter-spacing: -1px;
    }

    .actions-pink {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .hero-pink {
        padding: 12px;
        border-radius: 26px;
    }

    .hero-card-pink {
        padding: 26px 18px;
        border-radius: 24px;
    }

    .actions-pink {
        grid-template-columns: 1fr;
    }

    .search-pink {
        border-radius: 24px;
        flex-wrap: wrap;
    }

    .search-pink input {
        min-width: 160px;
    }

    .search-pink .btn-primary {
        width: 100%;
    }

    .hero-media-pink {
        min-height: 360px;
        border-radius: 26px;
    }

    .floating-pink {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 18px;
    }
}
