/* 365HappyFlower — giao diện website. Thiết kế cho điện thoại trước (đa số khách đặt hoa
   bằng điện thoại), màn lớn thì nới ra. */
:root{
  /* Tên biến còn chữ "tim" vì mã bê từ rosahub (logo tím); bên mình là XANH LÁ của
     logo 365HappyFlower (#448844), vàng và hồng cũng lấy từ cánh hoa trên logo. */
  --tim:#2e7d3b; --tim-dam:#1f5a29; --tim-nhat:#eef6ef; --tim-vua:#d6ead9;
  --tim-sang:#2e7d3b;
  --vang:#e8b21c; --hong:#e58f93;
  --chu:#2b2230; --chu-phu:#6f6676; --vien:#ece6ef; --nen:#fbf9fc; --trang:#fff;
  --bo:14px; --bo-nho:10px; --bong:0 6px 24px rgba(31,90,41,.08); --bong-dam:0 14px 40px rgba(31,90,41,.16);
  --chu-chinh:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --chu-tieu-de:'Playfair Display',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--chu-chinh);font-size:15px;line-height:1.6;color:var(--chu);background:var(--nen)}
img{max-width:100%;height:auto;display:block}
a{color:var(--tim);text-decoration:none}
a:hover{color:var(--tim-dam)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
h1,h2{font-family:var(--chu-tieu-de);font-weight:700;color:var(--tim-dam)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--vang);outline-offset:2px}
.khung{width:100%;max-width:1240px;margin:0 auto;padding:0 16px}
.bo-qua{position:absolute;left:-999px;top:0;background:var(--tim);color:#fff;padding:8px 14px;z-index:99}
.bo-qua:focus{left:8px}
.an-dt{display:none}

/* ── Đầu trang ── */
.thanh-tren{background:var(--tim-sang);color:#efe6f4;font-size:12.5px}
.thanh-tren .khung{display:flex;justify-content:space-between;gap:12px;padding-top:6px;padding-bottom:6px}
.thanh-tren a{color:#fff;font-weight:600}
.dau-trang{background:var(--trang);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--vien)}
.dau-trang-trong{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu logo goi" "tim tim tim";align-items:center;gap:10px 12px;padding-top:10px;padding-bottom:10px}
.logo{grid-area:logo;justify-self:center}
.logo img{height:46px;width:auto}
.nut-menu{grid-area:menu;width:40px;height:40px;border:0;background:var(--tim-nhat);border-radius:10px;display:grid;place-content:center;gap:5px;cursor:pointer}
.nut-menu span{display:block;width:18px;height:2px;background:var(--tim-dam);border-radius:2px}
.tim{grid-area:tim;display:flex;background:var(--nen);border:1px solid var(--vien);border-radius:999px;overflow:hidden}
.tim input{flex:1;min-width:0;border:0;background:transparent;padding:10px 16px;outline:0}
.tim button{border:0;background:var(--tim);color:#fff;padding:0 18px;cursor:pointer}
.goi-ngay{grid-area:goi;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:12px;color:var(--chu-phu)}
.goi-ngay b{color:var(--hong);font-size:15px}
.menu{background:var(--trang);border-top:1px solid var(--vien);display:none}
.menu.mo{display:block;max-height:calc(100vh - 120px);overflow:auto}
.menu ul{list-style:none;margin:0;padding:0}
.menu>.khung>ul>li>a{display:block;padding:12px 4px;font-weight:600;color:var(--chu);border-bottom:1px solid var(--vien)}
.menu li ul a{display:block;padding:8px 4px 8px 18px;color:var(--chu-phu);font-size:14px}

/* ── Nút ── */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s}
.nut:active{transform:scale(.97)}
.nut-chinh{background:var(--tim);color:#fff;box-shadow:0 6px 16px rgba(46,125,59,.28)}
.nut-chinh:hover{background:var(--tim-dam);color:#fff}
.nut-vien{background:var(--trang);color:var(--tim);border:1.5px solid var(--tim)}
.nut-to{width:100%;padding:14px 20px;font-size:16px}

/* ── Khối trang ── */
.muc{padding:28px 0}
.muc-tieu-de{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.muc-tieu-de h2{font-size:24px;margin:0}
.muc-tieu-de a{font-weight:600;font-size:14px;white-space:nowrap}
.phan-cap ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:14px 0;padding:0;font-size:13px;color:var(--chu-phu)}
.phan-cap li+li::before{content:"›";margin-right:4px;color:#b8aec0}

/* ── Banner trang chủ ── */
.banner{background:linear-gradient(120deg,var(--tim-dam),#2e7d3b 55%,#4c9a58);color:#fff;border-radius:0 0 28px 28px;overflow:hidden;position:relative}
.banner::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(201,163,92,.35),transparent 70%)}
.banner .khung{padding-top:34px;padding-bottom:38px;position:relative;z-index:1}
.banner h1{color:#fff;font-size:30px;margin-bottom:10px}
.banner p{color:#efe6f4;max-width:560px;margin:0 0 20px}
.banner .nut-vien{border-color:#fff;color:#fff;background:transparent}
.banner-nut{display:flex;flex-wrap:wrap;gap:10px}
.cam-ket{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:-18px;position:relative;z-index:2}
.cam-ket div{background:var(--trang);border-radius:var(--bo);padding:12px;box-shadow:var(--bong);font-size:13px;color:var(--chu-phu);line-height:1.35}
.cam-ket b{display:block;color:var(--tim-dam);font-size:14px;margin-bottom:2px}

/* ── Ô danh mục ── */
.o-dm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.o-dm a{background:var(--trang);border-radius:var(--bo);overflow:hidden;box-shadow:var(--bong);color:var(--chu);text-align:center;font-weight:600;font-size:13px;transition:transform .2s,box-shadow .2s}
.o-dm a:hover{transform:translateY(-3px);box-shadow:var(--bong-dam)}
.o-dm img{aspect-ratio:1;object-fit:cover;width:100%}
.o-dm span{display:block;padding:8px 6px;line-height:1.3}

/* ── Lưới & thẻ sản phẩm ── */
.luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sp{background:var(--trang);border-radius:var(--bo);overflow:hidden;box-shadow:var(--bong);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.sp:hover{transform:translateY(-3px);box-shadow:var(--bong-dam)}
.sp-anh{position:relative;display:block;aspect-ratio:1;background:var(--tim-nhat);overflow:hidden}
.sp-anh img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sp:hover .sp-anh img{transform:scale(1.05)}
.nhan-giam{position:absolute;top:10px;left:10px;background:var(--hong);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px}
.sp-than{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.sp-ten{font-size:14px;font-weight:600;margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.sp-ten a{color:var(--chu)}
.sp-gia{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sp-gia b{color:var(--hong);font-size:16px}
.sp-gia s{color:#a59cab;font-size:12.5px}
.lien-he{color:var(--tim)!important}
.nut-dat{margin-top:auto;background:var(--tim-nhat);color:var(--tim-dam);padding:8px 12px;font-size:14px}
.nut-dat:hover{background:var(--tim);color:#fff}

/* ── Trang danh mục ── */
.dm-dau{background:var(--trang);border-radius:var(--bo);padding:18px;box-shadow:var(--bong);margin-bottom:16px}
.dm-dau h1{font-size:26px;margin-bottom:6px}
.dm-dau .mo-ta{color:var(--chu-phu);font-size:14px}
.the-con{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;scrollbar-width:none;margin-top:10px}
.the-con a{flex:none;border:1px solid var(--vien);background:var(--nen);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--chu)}
.the-con a:hover,.the-con a.dang-chon{border-color:var(--tim);color:var(--tim);background:var(--tim-nhat)}
.thanh-loc{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;color:var(--chu-phu)}
.thanh-loc select{border:1px solid var(--vien);border-radius:999px;padding:7px 12px;background:var(--trang)}
.phan-trang{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:26px 0 8px}
.phan-trang a,.phan-trang span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--trang);border:1px solid var(--vien);color:var(--chu);font-weight:600}
.phan-trang .hien-tai{background:var(--tim);border-color:var(--tim);color:#fff}
.phan-trang .ba-cham{border:0;background:none}

/* ── Trang sản phẩm ── */
.ctsp{display:grid;gap:20px;background:var(--trang);border-radius:var(--bo);padding:14px;box-shadow:var(--bong)}
.thu-vien .anh-chinh{border-radius:var(--bo-nho);overflow:hidden;background:var(--tim-nhat);aspect-ratio:1}
.thu-vien .anh-chinh img{width:100%;height:100%;object-fit:cover}
.anh-nho{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.anh-nho button{flex:none;width:68px;height:68px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.anh-nho button.dang-chon{border-color:var(--tim)}
.anh-nho img{width:100%;height:100%;object-fit:cover}
.ctsp h1{font-size:26px}
.ctsp-gia{display:flex;align-items:baseline;gap:10px;margin:6px 0 14px}
.ctsp-gia b{font-size:28px;color:var(--hong)}
.ctsp-gia s{color:#a59cab}
.ctsp-gia .nhan-giam{position:static}
.diem-cong{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;font-size:14px}
.diem-cong li{display:flex;gap:8px;align-items:flex-start}
.nhom-nut{display:grid;grid-template-columns:1fr;gap:10px}
.nhom-nut .nut{padding:13px 18px;font-size:15.5px}
.nut-zalo{background:#0068ff;color:#fff}
.nut-zalo:hover{background:#0052cc;color:#fff}
.noi-dung{background:var(--trang);border-radius:var(--bo);padding:18px;box-shadow:var(--bong);margin-top:18px}
.noi-dung h2{font-size:21px;margin-top:6px}
.noi-dung img{border-radius:var(--bo-nho);margin:12px auto}
.noi-dung table{width:100%;border-collapse:collapse;font-size:14px}
.noi-dung td,.noi-dung th{border:1px solid var(--vien);padding:8px}
.luu-y{background:var(--tim-nhat);border-left:4px solid var(--vang);border-radius:var(--bo-nho);padding:12px 14px;font-size:14px;color:#4b3f52;margin-top:14px}

/* ── Bài viết ── */
.ds-bai{display:grid;gap:14px}
.bai{display:grid;grid-template-columns:110px 1fr;gap:12px;background:var(--trang);border-radius:var(--bo);overflow:hidden;box-shadow:var(--bong)}
.bai img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.bai div{padding:10px 12px 10px 0}
.bai h3{font-size:15px;margin:0 0 4px}
.bai h3 a{color:var(--chu)}
.bai p{margin:0;font-size:13px;color:var(--chu-phu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bai-viet{max-width:820px;margin:0 auto}
.bai-viet h1{font-size:28px}
.bai-viet .ngay{color:var(--chu-phu);font-size:13px;margin-bottom:12px}
.bai-viet .noi-dung{font-size:16px;line-height:1.75}

/* ── Chân trang ── */
.chan-trang{background:var(--tim-sang);color:#f3ecf7;margin-top:40px;font-size:14px}
.chan-luoi{display:grid;gap:22px;padding-top:34px;padding-bottom:26px}
.chan-trang h4{color:#fff;font-size:15px;margin:0 0 10px}
.chan-trang ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.chan-trang a{color:#e3d7ea}
.chan-trang a:hover{color:#fff}
/* Số điện thoại ở chân trang: ống nghe xanh lá + nút Zalo cạnh từng số */
/* 3 số điện thoại xếp dọc, cột số rộng cố định + chữ số đều nhau → 3 nút Zalo thẳng hàng (sếp yêu cầu 08/10/2026) */
.dong-sdt{display:grid;grid-template-columns:9.4em auto;justify-content:start;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.dong-sdt>a:first-child{white-space:nowrap}
.dong-sdt svg,.dong-oa svg{width:16px;height:16px;color:#3ccf63;margin-right:7px;vertical-align:-3px}
.the-zalo{display:inline-block;background:#0068ff;color:#fff!important;font-size:11.5px;font-weight:700;line-height:1.6;padding:0 8px;border-radius:999px}
.the-zalo:hover{background:#0052cc}
.dong-oa .the-zalo{margin-right:8px}
/* Facebook, email: biểu tượng tròn có màu + chữ (sếp chốt 08/10/2026 — emoji ✉️ trên nền tím nhìn không rõ) */
.dong-fb{display:inline-flex;align-items:center;gap:8px}
.dong-fb svg{flex:none}
.logo-chan{filter:brightness(0) invert(1);opacity:.92;margin-bottom:10px;height:56px;width:auto}
/* Điện thoại: nút gọi/Zalo nổi sát lề hơn; chừa chỗ bên phải chân trang để
   nút nổi không đè lên dấu + (bấm nhầm là sang trang Zalo/gọi) — sếp báo 08/10/2026 */
@media (max-width:979px){
  .noi-lien-he{right:6px;bottom:10px;gap:8px}
  .noi-lien-he>a,.noi-lien-he .zalo-nhom>a{width:48px;height:48px}
  .ban-quyen .khung{padding-right:62px}
}
/* Chân trang trên điện thoại: liên hệ lên đầu, bỏ đoạn giới thiệu, hai mục link gập lại */
.chan-mo summary{list-style:none;cursor:pointer;display:flex;justify-content:flex-start;gap:10px;align-items:center}
.chan-mo summary::-webkit-details-marker{display:none}
.chan-mo summary h4{margin:0}
.chan-mo summary::after{content:'+';font-size:20px;line-height:1;color:#fff}
.chan-mo[open] summary::after{content:'−'}
.chan-mo[open] summary{margin-bottom:10px}
@media (max-width:979px){
  .chan-luoi{gap:0;padding-top:22px;padding-bottom:12px}
  .chan-luoi>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .chan-luoi .logo-chan{height:44px;margin:0}
  .chan-gt{display:none}
  .chan-lien-he{order:-1;margin-bottom:12px}
  .chan-luoi>div:first-child{order:-2}
  .chan-lien-he .lien-he-ds{grid-template-columns:1fr 1fr;gap:8px 12px}
  .chan-lien-he .dong-sdt{grid-column:1/-1}
  .chan-lien-he .gio{margin:10px 0 0}
  .chan-mo{border-top:1px solid rgba(255,255,255,.14);padding:12px 0}
  .chan-mo ul{grid-template-columns:1fr 1fr;gap:6px 12px}
}
@media (min-width:980px){.chan-mo summary{pointer-events:none;margin-bottom:10px}.chan-mo summary::after{display:none}}
.ban-quyen{border-top:1px solid rgba(255,255,255,.12);padding:12px 0;font-size:12.5px;color:#efe6f4}

/* ── Nút nổi gọi / Zalo ── */
.noi-lien-he{position:fixed;right:14px;bottom:16px;z-index:60;display:grid;gap:10px}
.noi-lien-he a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,.22);font-size:13px}
/* Nút gọi xanh lá như biểu tượng gọi điện trên điện thoại (sếp chốt 07/10/2026) */
.noi-goi{background:#22b14c;animation:rung 2.4s infinite}
.noi-goi svg{width:26px;height:26px}
.nut-goi{background:#22b14c;color:#fff}
.nut-goi:hover{background:#1a9a40;color:#fff}
.nut-goi svg{width:20px;height:20px}
.noi-zalo{background:#0068ff}
.noi-wa{background:#25d366}
.noi-wa svg{width:28px;height:28px}
.vong-wa{flex:none;width:28px;height:28px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center}
.vong-wa svg{width:17px;height:17px}
/* Menu Zalo bung ra từ nút nổi: OA + từng miền */
.zalo-nhom{position:relative}
.zalo-ds{position:absolute;right:0;bottom:64px;width:240px;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:8px;display:grid;gap:4px}
.zalo-ds[hidden]{display:none}
.noi-lien-he .zalo-ds a{width:auto;height:auto;border-radius:12px;box-shadow:none;color:var(--chu);display:flex;align-items:center;gap:10px;padding:8px 10px;font-weight:400;font-size:13px;place-items:initial}
.noi-lien-he .zalo-ds a:hover{background:#eef4ff}
.zalo-ma{flex:none;width:36px;height:36px;border-radius:50%;background:#0068ff;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px}
.zalo-ds b{display:block;font-size:14px;color:var(--chu)}
.zalo-ds small{color:var(--chu-phu);font-size:12.5px}
/* Danh sách hotline của nút gọi nổi: cùng khung với Zalo, màu xanh lá */
.goi-ds .zalo-ma{background:#22b14c}
.noi-lien-he .goi-ds a:hover{background:#eaf8ee}
@keyframes rung{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}92%{transform:rotate(14deg)}96%{transform:rotate(-8deg)}}

/* ── Hộp đặt hàng ── */
.hop-dat{border:0;border-radius:18px;padding:0;width:min(560px,calc(100vw - 20px));max-height:calc(100vh - 30px);box-shadow:var(--bong-dam)}
.hop-dat::backdrop{background:rgba(43,34,48,.55);backdrop-filter:blur(2px)}
.hop-dong{position:sticky;top:0;display:flex;justify-content:flex-end;padding:8px 8px 0;background:#fff;z-index:2}
.hop-dong button{border:0;background:var(--tim-nhat);width:34px;height:34px;border-radius:50%;cursor:pointer}
.form-dat,.dat-xong{padding:0 20px 20px}
/* Tiêu đề nằm ngang hàng nút ✕: phải nổi trên thanh đóng (nền trắng, sticky) — trước bị che mất (09/10/2026) */
.form-dat h2{font-size:22px;margin-top:-30px;position:relative;z-index:3;max-width:calc(100% - 44px)}
.dat-sp{display:flex;gap:12px;align-items:center;background:var(--tim-nhat);border-radius:var(--bo-nho);padding:10px;margin-bottom:14px}
.dat-sp img{width:58px;height:58px;border-radius:8px;object-fit:cover}
.dat-sp b{display:block;font-size:14px;line-height:1.35}
.dat-sp span{color:var(--hong);font-weight:700;font-size:14px}
.form-dat label{display:block;font-size:13px;font-weight:600;color:var(--chu-phu);margin-bottom:10px}
.form-dat input,.form-dat textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;background:var(--nen);font-weight:400;color:var(--chu)}
.form-dat input:focus,.form-dat textarea:focus{border-color:var(--tim);background:#fff;outline:0;box-shadow:0 0 0 3px var(--tim-vua)}
.form-dat input:user-invalid{border-color:var(--hong)}
.o2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bay{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.loi-form{color:#c0334f;font-size:14px;margin:4px 0 10px;min-height:1px}
.nho{font-size:12.5px;color:var(--chu-phu);text-align:center;margin:10px 0 0}
.dat-xong{text-align:center;padding-top:6px}
.dau-tich{width:64px;height:64px;border-radius:50%;background:#e8f6ee;color:#1f9d55;display:grid;place-items:center;font-size:32px;margin:0 auto 10px}

/* ── Ảnh khách nhận hoa (trang chủ, trang sản phẩm, album) ── */
.luoi-khach{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.luoi-khach .o-khach:nth-child(n+5){display:none}
.o-khach{display:block;border-radius:var(--bo);overflow:hidden;box-shadow:var(--bong);background:var(--tim-nhat)}
.o-khach img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .3s}
.o-khach:hover img{transform:scale(1.04)}
.album-khach{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.album-khach figure{margin:0}
.album-khach figure[hidden]{display:none}
.album-khach figcaption{font-size:12.5px;color:var(--chu-phu);line-height:1.4;padding:6px 2px 0}
.loc-khach button{flex:none;border:1px solid var(--vien);background:var(--nen);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--chu);cursor:pointer;font:inherit}
.loc-khach button:hover,.loc-khach button.dang-chon{border-color:var(--tim);color:var(--tim);background:var(--tim-nhat)}
.xem-anh{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.xem-anh[open]{display:grid;place-items:center}
.xem-anh::backdrop{background:rgba(20,14,24,.9)}
.xem-anh figure{margin:0;display:grid;justify-items:center;gap:10px;padding:16px}
.xem-anh img{max-width:min(92vw,720px);max-height:80vh;width:auto;height:auto;border-radius:12px}
.xem-anh figcaption{color:#f3ecf7;font-size:14px;text-align:center;max-width:600px}
.xem-anh button{position:fixed;border:0;border-radius:50%;width:44px;height:44px;background:rgba(255,255,255,.16);color:#fff;font-size:24px;cursor:pointer;line-height:1}
.xem-anh button:hover{background:rgba(255,255,255,.3)}
.xem-dong{top:14px;right:14px}
.xem-truoc{left:10px;top:50%}
.xem-sau{right:10px;top:50%}

/* ── Nội dung trụ cột danh mục + hỏi đáp ── */
.bai-dm{margin-top:28px}
.bai-dm h2{font-size:21px;margin:22px 0 8px}
.bai-dm h2:first-child{margin-top:0}
.bai-dm table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14.5px}
.bai-dm th{background:var(--tim-nhat);text-align:left}
.tac-gia{font-size:13px;color:var(--chu-phu);margin:18px 0 0;border-top:1px dashed var(--vien);padding-top:10px}
.hoi-dap{margin-top:22px}
.hoi-dap h2{font-size:22px;margin:0 0 12px}
.hoi-dap details{background:var(--trang);border-radius:var(--bo-nho);box-shadow:var(--bong);margin-bottom:10px;padding:0 16px}
.hoi-dap summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;position:relative;padding-right:26px}
.hoi-dap summary::-webkit-details-marker{display:none}
.hoi-dap summary::after{content:'+';position:absolute;right:0;top:11px;font-size:22px;color:var(--tim)}
.hoi-dap details[open] summary::after{content:'−'}
.hoi-dap details p{margin:0 0 14px;color:var(--chu-phu);line-height:1.65}
.ve-chung-toi .noi-dung{background:var(--trang);border-radius:var(--bo);box-shadow:var(--bong);padding:18px 20px}
.ve-chung-toi ul{margin:8px 0 0;padding-left:20px}
/* ── Hệ thống cửa hàng (kiểu trang mẫu sếp chọn 08/10/2026) ── */
.dau-ch{background:linear-gradient(135deg,var(--tim-dam),#4c9a58);color:#fff;padding:6px 0 30px;margin-bottom:22px}
.dau-ch .phan-cap a,.dau-ch .phan-cap li{color:#efe3f5}
.dau-ch h1{color:#fff;font-size:30px;margin:6px 0 8px}
.dau-ch p{margin:0;max-width:820px;color:#f6eefa;font-size:15.5px}
.dau-ch b{color:#fff}
.cong-cu-ch{margin-bottom:12px}
.loc-ch{display:block;width:100%;max-width:620px;border:1px solid var(--vien);border-radius:999px;padding:12px 18px;margin:0 0 14px;background:var(--trang);font:inherit;box-shadow:var(--bong)}
.loc-ch:focus{outline:0;border-color:var(--tim);box-shadow:0 0 0 3px var(--tim-vua)}
.the-tinh{flex-wrap:wrap;overflow:visible;margin-bottom:18px}
.the-tinh[hidden]{display:none}
.the-tinh a span{display:inline-block;background:var(--tim-nhat);color:var(--tim);border-radius:999px;padding:0 7px;font-size:12px;margin-left:4px}
.tinh-khoi{margin-bottom:26px;scroll-margin-top:16px}
.tinh-khoi[hidden]{display:none}
.tinh-khoi h2{display:flex;align-items:center;gap:8px;font-size:22px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--tim-nhat)}
.tinh-khoi h2 svg{color:var(--tim);flex:none}
.tinh-khoi h2 a{color:var(--chu)}
.tinh-khoi h2 a:hover{color:var(--tim)}
.tinh-dem{margin-left:auto;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--chu-phu);background:var(--tim-nhat);border-radius:999px;padding:3px 12px}
.ds-ch{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ds-ch li{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:9px 10px 9px 14px;display:flex;align-items:center;gap:10px}
.ds-ch li:hover{border-color:var(--tim)}
.ds-ch li[hidden]{display:none}
.ch-dc{flex:1;min-width:0}
.ch-dc b{display:block;font-size:14.5px;font-weight:500}
.ch-dc small{display:block;color:var(--chu-phu);font-size:12.5px;margin-top:1px}
.ch-sao{color:#e0a100;font-weight:700;font-size:13px;white-space:nowrap}
.ch-sao small{color:var(--chu-phu);font-weight:400}
.ch-ghim{flex:none;width:36px;height:36px;border-radius:50%;background:var(--tim-nhat);color:var(--tim);display:grid;place-items:center}
.ch-ghim:hover{background:var(--tim);color:#fff}
.ch-ghim span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ch-ghim::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── Trang lỗi / rỗng ── */
.trong{text-align:center;padding:50px 16px;color:var(--chu-phu)}
.trong h1{font-size:30px}

/* ── Màn lớn ── */
@media (min-width:640px){
  .luoi{grid-template-columns:repeat(3,1fr);gap:16px}
  .o-dm{grid-template-columns:repeat(4,1fr)}
  .cam-ket{grid-template-columns:repeat(4,1fr)}
  .nhom-nut{grid-template-columns:1fr 1fr}
  .nhom-nut .nut-chinh{grid-column:1/-1}
  .bai{grid-template-columns:180px 1fr}
  .album-khach{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:980px){
  body{font-size:15.5px}
  .an-dt{display:inline}
  .dau-trang-trong{grid-template-columns:auto 1fr auto;grid-template-areas:"logo tim goi";gap:24px;padding-top:12px;padding-bottom:12px}
  .logo{justify-self:start}
  .logo img{height:58px}
  .nut-menu{display:none}
  .tim{max-width:560px;width:100%;justify-self:center}
  .goi-ngay b{font-size:18px}
  .menu{display:block;border-top:1px solid var(--vien)}
  .menu>.khung>ul{display:flex;flex-wrap:wrap;gap:2px}
  .menu>.khung>ul>li{position:relative}
  .menu>.khung>ul>li>a{border:0;padding:12px 12px;font-size:14px}
  .menu>.khung>ul>li>a:hover{color:var(--tim)}
  .menu li ul{display:none;position:absolute;left:0;top:100%;min-width:250px;background:#fff;box-shadow:var(--bong-dam);border-radius:0 0 12px 12px;padding:8px 0;z-index:60}
  .menu li:hover>ul,.menu li:focus-within>ul{display:block}
  .menu li ul a{padding:8px 18px}
  .menu li ul a:hover{background:var(--tim-nhat);color:var(--tim)}
  .luoi{grid-template-columns:repeat(4,1fr);gap:20px}
  .o-dm{grid-template-columns:repeat(6,1fr);gap:16px}
  .banner .khung{padding-top:64px;padding-bottom:76px}
  .banner h1{font-size:44px;max-width:700px}
  .banner p{font-size:17px}
  .cam-ket{margin-top:-32px;gap:16px}
  .cam-ket div{padding:16px 18px}
  .muc{padding:40px 0}
  .muc-tieu-de h2{font-size:30px}
  .ctsp{grid-template-columns:1.05fr 1fr;gap:34px;padding:24px}
  .ctsp h1{font-size:32px}
  .chan-luoi{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
  .dm-dau{padding:24px 28px}
  .dm-dau h1{font-size:32px}
  .ds-bai{grid-template-columns:1fr 1fr}
  .luoi-khach{grid-template-columns:repeat(4,1fr);gap:16px}
  .luoi-khach .o-khach:nth-child(n+5){display:block}
  .album-khach{grid-template-columns:repeat(4,1fr);gap:18px}
  .ds-ch{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Ảnh bìa trang chủ (15/10/2026): chữ bên trái, ghép 4 ảnh thật bên phải.
   Điện thoại: chữ trước, dưới là 3 ảnh xếp ngang (ẩn ô lan cho gọn). ── */
.banner-trong{display:grid;gap:22px}
.banner-nhan{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:3px 12px;font-size:13px;margin:0 0 12px!important;color:#fff!important}
.banner h1 span{color:#ffd65a}
.banner .nut-vien svg{width:18px;height:18px;vertical-align:-3px}
.banner-the{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.banner-the a{color:#fff;font-size:13px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.banner-the a:hover{background:#fff;color:var(--tim-dam)}
.banner-anh{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.banner-anh a{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#1f5a29;box-shadow:0 10px 28px rgba(0,0,0,.28)}
/* Phóng nhẹ, neo phía trên: cắt dải mã sản phẩm màu xanh ở đáy ảnh gốc (365HappyFlower | GH96) */
.banner-anh img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transform-origin:50% 25%;transition:transform .4s}
.banner-anh a:hover img{transform:scale(1.15)}
.banner-anh a:nth-child(3){display:none}
.banner-anh a:nth-child(4) img{object-position:50% 35%}
.banner-anh span{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);background:rgba(255,255,255,.93);color:var(--tim-dam);font-size:12px;font-weight:600;line-height:1.3;padding:3px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:980px){
  .banner-trong{grid-template-columns:1.05fr 1fr;align-items:center;gap:44px}
  .banner h1{font-size:40px}
  .banner-anh{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:200px 200px;gap:12px}
  .banner-anh a{aspect-ratio:auto}
  .banner-anh a:nth-child(1){grid-row:1 / span 2}
  .banner-anh a:nth-child(3){display:block}
  .banner-anh a:nth-child(4){grid-column:2 / span 2}
  .banner-anh span{font-size:13px;left:10px;bottom:10px}
}

/* ── Ảnh bìa kiểu 2 và 3 (bản chạy thử, 15/10/2026) ── */
.an-chu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cam-ket-roi{margin-top:18px}
.nut-vien-xanh{background:#fff;color:var(--tim-dam);border:1.5px solid var(--tim-dam)}
.nut-vien-xanh svg{width:18px;height:18px;vertical-align:-3px}
/* Kiểu 2: nền kem sáng, ảnh lớn trong khung vòm, thẻ nổi nhỏ */
.bia2{background:linear-gradient(135deg,#fbf6ee 0%,#f4f9f3 60%,#fdf1f1 100%);overflow:hidden}
.bia2-trong{display:grid;gap:26px;padding-top:30px;padding-bottom:34px;align-items:center}
.bia2-nhan{font-family:var(--chu-tieu-de);font-style:italic;color:var(--hong);font-size:20px;margin:0 0 4px}
.bia2 h1{font-size:30px;color:var(--tim-dam);margin:0 0 12px}
.bia-phu{display:block;font-family:var(--chu-chinh);font-size:.52em;font-weight:600;color:var(--chu);line-height:1.4;margin-top:8px}
.bia2-chu>p:not(.bia2-nhan){color:var(--chu-phu);max-width:520px;margin:0 0 20px}
.bia2-anh{position:relative;justify-self:center;width:min(78vw,380px)}
.bia2-anh::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:#f6d6d8;right:-14%;top:-6%;z-index:0}
.bia2-anh::after{content:"";position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:#ffe08a;left:-8%;bottom:8%;z-index:0}
.vom{position:relative;z-index:1;display:block;aspect-ratio:3/4;border-radius:999px 999px 22px 22px;overflow:hidden;box-shadow:0 18px 40px rgba(31,90,41,.22);border:6px solid #fff}
.vom img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transform-origin:50% 25%}
.bia2-the{position:absolute;z-index:2;left:-18px;bottom:22px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 12px 8px 8px;box-shadow:0 10px 26px rgba(0,0,0,.14);color:var(--chu)}
.bia2-the img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.bia2-the b{display:block;font-size:14px;color:var(--tim-dam)}
.bia2-the small{color:var(--chu-phu);font-size:12px}
/* Kiểu 3: tối giản — tiêu đề + 4 ô danh mục ảnh lớn */
.bia3{background:#fff;padding:26px 0 8px;border-bottom:1px solid var(--vien)}
.bia3-dau{display:grid;gap:14px;margin-bottom:18px}
.bia3-nhan{color:var(--tim);font-weight:600;font-size:13px;letter-spacing:.3px;margin:0 0 6px}
.bia3 h1{font-size:28px;color:var(--tim-dam);margin:0}
.bia3-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bia3-luoi a{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--tim-nhat)}
.bia3-luoi img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transform-origin:50% 25%;transition:transform .4s}
.bia3-luoi a:hover img{transform:scale(1.13)}
.bia3-luoi a::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.bia3-luoi span{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;color:#fff}
.bia3-luoi b{display:block;font-family:var(--chu-tieu-de);font-size:19px;line-height:1.2}
.bia3-luoi small{font-size:12.5px;opacity:.9}
@media (min-width:980px){
  .bia2-trong{grid-template-columns:1.1fr .9fr;gap:50px;padding-top:54px;padding-bottom:58px}
  .bia2 h1{font-size:46px}
  .bia2-nhan{font-size:24px}
  .bia3{padding:40px 0 14px}
  .bia3-dau{grid-template-columns:1fr auto;align-items:end;gap:30px}
  .bia3 h1{font-size:40px;max-width:820px}
  .bia3-luoi{grid-template-columns:repeat(4,1fr);gap:16px}
  .bia3-luoi b{font-size:22px}
}

/* ── Ảnh bìa kiểu 4 (16/10/2026): bó hoa tách nền trên nền kem, vòng tròn hồng ── */
.bia4{background:radial-gradient(circle at 85% 30%,#fdeff0 0,transparent 45%),linear-gradient(120deg,#fbf7f1 0%,#f6faf4 100%);overflow:hidden}
.bia4-trong{display:grid;gap:10px;padding-top:30px;padding-bottom:20px;align-items:center}
.bia4-nhan{font-family:var(--chu-tieu-de);font-style:italic;color:var(--hong);font-size:20px;margin:0 0 4px}
.bia4 h1{font-size:30px;color:var(--tim-dam);margin:0 0 12px;line-height:1.15}
.bia4-chu>p:not(.bia4-nhan){color:var(--chu-phu);max-width:530px;margin:0 0 20px}
.bia4-diem{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:22px 0 0}
.bia4-diem li{font-size:13px;color:var(--chu-phu);line-height:1.3;padding-left:12px;border-left:3px solid var(--vang)}
.bia4-diem b{display:block;font-size:16px;color:var(--tim-dam)}
.bia4-anh{position:relative;justify-self:center;width:min(86vw,520px);aspect-ratio:1/.92}
.bia4-vong{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:#f8dfe1;left:16%;top:6%}
.bia4-vong::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px dashed rgba(229,143,147,.6)}
.bia4-chinh{position:absolute;width:78%;right:2%;bottom:4%;filter:drop-shadow(0 18px 24px rgba(31,90,41,.18))}
.bia4-phu{position:absolute;width:40%;left:0;bottom:0;opacity:.95;filter:drop-shadow(0 10px 16px rgba(0,0,0,.12))}
.bia4-the{position:absolute;right:0;top:10%;background:#fff;border-radius:14px;padding:9px 14px;box-shadow:0 10px 26px rgba(0,0,0,.12);line-height:1.25}
.bia4-the b{display:block;font-size:14px;color:var(--tim-dam)}
.bia4-the small{font-size:12px;color:var(--chu-phu)}
@media (min-width:980px){
  .bia4-trong{grid-template-columns:1.05fr .95fr;gap:40px;padding-top:46px;padding-bottom:30px}
  .bia4 h1{font-size:48px}
  .bia4-nhan{font-size:26px}
}

/* ── Khối Danh mục hoa trang chủ (16/10/2026, làm lại sau khi sếp chê "thô, chật"):
   ảnh TRÒN trên nền sáng, tên + số mẫu nằm gọn bên dưới, nhiều khoảng trắng.
   Điện thoại: lưới 4 cột xuống dòng, thấy đủ mọi danh mục (sếp yêu cầu 16/10/2026,
   trước đó là hàng vuốt ngang — khách không biết còn mục bị khuất).
   Ghi đè kiểu ô vuông cũ (.o-dm ở trên). ── */
.dm-nhan{margin:0 0 2px;color:var(--hong);font-family:var(--chu-tieu-de);font-style:italic;font-size:17px}
.o-dm{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px 8px!important;padding:4px 0 6px}
.o-dm a{min-width:0;background:none;box-shadow:none;border-radius:0;text-align:center;color:var(--chu);overflow:visible}
.o-dm a:hover{transform:none;box-shadow:none}
.o-dm img{width:100%;max-width:84px;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%;margin:0 auto;border:3px solid #fff;box-shadow:0 0 0 1px var(--vien),0 6px 16px rgba(31,90,41,.10);transition:box-shadow .25s,transform .25s}
.o-dm a:hover img{transform:translateY(-3px);box-shadow:0 0 0 2px var(--tim),0 10px 22px rgba(31,90,41,.16)}
.o-dm span{display:block;padding:10px 0 0;line-height:1.3}
.o-dm b{display:block;font-size:12.5px;font-weight:600;color:var(--chu)}
.o-dm a:hover b{color:var(--tim)}
.o-dm small{display:block;margin-top:2px;font-size:12px;color:var(--chu-phu)}
@media (min-width:640px){.o-dm{grid-template-columns:repeat(5,1fr)}.o-dm img{max-width:110px}.o-dm b{font-size:14px}}
@media (min-width:980px){
  .o-dm{grid-template-columns:repeat(5,1fr);gap:34px 24px!important;padding:8px 0 4px}
  .o-dm img{max-width:150px;border-width:5px}
  .o-dm b{font-size:15px}
  .o-dm small{font-size:13px}
}

/* ── Tên thương hiệu kiểu logo ở ảnh bìa (16/10/2026): 365 xanh lá, HappyFlower đen,
   "Sending love!" viết tay bên dưới, lệch phải như trên logo ── */
.chu-logo{font-family:'Be Vietnam Pro',system-ui,sans-serif!important;font-weight:800!important;color:#1d1d1b!important;letter-spacing:-.02em;line-height:1!important;margin:0!important}
.chu-logo .logo-so{color:#448844}
.logo-ky{font-family:'Dancing Script',cursive;font-weight:600;color:#1d1d1b;font-size:24px;margin:4px 0 18px;padding-left:38%;line-height:1.2}
.bia4 .chu-logo{font-size:42px}
@media (min-width:980px){
  .bia4 .chu-logo{font-size:64px}
  .logo-ky{font-size:32px;margin:6px 0 22px}
}

/* ── Ảnh sản phẩm HIỆN TRỌN (16/10/2026): 60% ảnh mẫu là kệ hoa ảnh dọc dài
   (550×900), ô vuông cắt cho đầy làm mất băng rôn trên đầu và chân kệ (sếp báo).
   Khung dọc 3:4 + contain: thấy hết từ đầu tới chân, phần thừa là nền kem nhạt. ── */
.sp-anh{aspect-ratio:3/4;background:#f6f3ee}
.sp-anh img{object-fit:contain}
.sp:hover .sp-anh img{transform:scale(1.03)}
.thu-vien .anh-chinh{aspect-ratio:3/4;background:#f6f3ee}
.thu-vien .anh-chinh img{object-fit:contain}

/* ── Điện thoại gọn hơn (16/10/2026, sếp: "dài quá"). Ảnh 3:4 hiện trọn làm ô cao
   hơn, 8 mẫu × 2 cột = gần 2 màn hình mỗi danh mục.
   (1) Trang chủ: mỗi dải chỉ hiện 2 mẫu (một hàng) — sếp chốt 16/10/2026, bỏ kiểu
       vuốt ngang; xem đủ thì bấm "Xem tất cả". Áp cho mọi màn nhỏ hơn máy tính.
   (2) Ô sản phẩm gọn: chữ nhỏ hơn, nút thấp hơn, bớt đệm — cả trang danh mục. ── */
@media (max-width:639px){
  .sp-than{padding:8px 10px 10px;gap:4px}
  .sp-ten{font-size:13px;line-height:1.35;min-height:2.7em}
  .sp-gia b{font-size:14.5px}
  .sp-gia s{font-size:11.5px}
  .nut-dat{padding:6px 10px;font-size:13px}
  .luoi{gap:10px}
  .trang-chu .muc{padding:16px 0}
  .trang-chu .muc-tieu-de{margin-bottom:10px}
  .trang-chu .muc-tieu-de h2{font-size:21px}
}

/* ── Thanh menu danh mục màu xanh thương hiệu (máy tính, sếp yêu cầu 16/10/2026).
   Menu xổ xuống vẫn nền trắng chữ tối cho dễ đọc. Điện thoại giữ menu trượt nền trắng. ── */
@media (min-width:980px){
  .menu{background:var(--tim-sang);border-top:0}
  .menu>.khung>ul>li>a{color:#fff}
  .menu>.khung>ul>li>a:hover,.menu>.khung>ul>li:focus-within>a{color:#fff;background:var(--tim-dam)}
  .menu li ul a{color:var(--chu-phu)}
}

@media (max-width:979px){
  .trang-chu .muc .luoi{grid-template-columns:repeat(2,1fr)}
  .trang-chu .muc .luoi .sp:nth-child(n+3){display:none}
}

/* ── Khối "Vì sao chọn 365HappyFlower" (16/10/2026): nền xanh rất nhạt, biểu tượng
   nét mảnh trong vòng tròn, chữ gọn. Máy tính 4×2, điện thoại 2 cột. ── */
.vi-sao{margin:30px 0 10px;padding:30px 18px;border-radius:24px;background:linear-gradient(135deg,#f3f9f2 0%,#fbf7f1 100%);border:1px solid #e6efe4}
.vi-sao-dau{text-align:center;margin-bottom:22px}
.vi-sao-dau h2{font-size:24px;margin:0;position:relative;display:inline-block;padding-bottom:10px}
.vi-sao-dau h2::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;border-radius:3px;background:var(--hong);transform:translateX(-50%)}
.vi-sao-ds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px}
.vi-sao-ds li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.vs-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--tim);box-shadow:0 0 0 1px #e3ecdf,0 6px 14px rgba(31,90,41,.08);flex:none;transition:transform .2s,background .2s,color .2s}
.vi-sao-ds li:hover .vs-ic{background:var(--tim);color:#fff;transform:translateY(-2px)}
.vi-sao-ds b{display:block;font-size:13.5px;color:var(--tim-dam);line-height:1.3}
.vi-sao-ds small{display:block;font-size:12px;color:var(--chu-phu);line-height:1.4;margin-top:2px}
@media (min-width:980px){
  .vi-sao{padding:44px 40px;margin:44px 0 16px}
  .vi-sao-dau{margin-bottom:34px}
  .vi-sao-dau h2{font-size:30px}
  .vi-sao-ds{grid-template-columns:repeat(4,1fr);gap:34px 28px}
  .vi-sao-ds li{flex-direction:row;align-items:center;text-align:left;gap:14px}
  .vi-sao-ds b{font-size:15px}
  .vi-sao-ds small{font-size:13px}
}

/* ── Chân trang: cột Liên hệ sát lại + fanpage xổ ra (16/10/2026) ── */
.chan-lien-he .lien-he-ds{gap:3px}
.chan-lien-he .dong-sdt{grid-template-columns:auto auto;gap:8px}
.chan-lien-he .dong-fb svg,.chan-lien-he .vong-wa{width:22px;height:22px}
.chan-lien-he .gio{margin:6px 0 0}
.chan-fb-khung{background:#fff;border-radius:12px;overflow:hidden;line-height:0;max-width:320px}
.chan-fb-khung iframe{border:0;width:100%;height:360px;overflow:hidden}
.chan-fanpage{order:-1;margin:4px 0 14px}
@media (min-width:980px){
  .chan-luoi{grid-template-columns:1.25fr .9fr 1fr 1.05fr 1.15fr!important;gap:28px!important}
  .chan-fanpage{order:0;margin:0}
}

/* ── Màn hình lớn (16/10/2026, sếp: "giao diện nhỏ quá"): khung 1.240px để trống hai
   bên trên màn rộng → nới khung và tăng cỡ chữ / ảnh / nút theo bậc. Dưới 1.400px
   (laptop, máy tính bảng, điện thoại) giữ nguyên. ── */
@media (min-width:1400px){
  .khung{max-width:1400px;padding:0 24px}
  body{font-size:16px}
  .thanh-tren{font-size:13.5px}
  .logo img{height:58px}
  .goi-ngay b{font-size:24px}
  .tim input{padding:12px 18px;font-size:15.5px}
  .menu>.khung>ul>li>a{font-size:15.5px;padding:14px 16px}
  .muc-tieu-de h2{font-size:30px}
  .muc-tieu-de a{font-size:15px}
  .luoi{gap:22px}
  .sp-than{padding:12px 14px 14px;gap:8px}
  .sp-ten{font-size:15.5px}
  .sp-gia b{font-size:18px}
  .nut-dat{padding:10px 14px;font-size:15px}
  .nut{padding:12px 22px;font-size:16px}
  .bia4-trong{padding-top:60px;padding-bottom:44px}
  .bia4 .chu-logo{font-size:76px}
  .logo-ky{font-size:38px}
  .bia4-gt{font-size:17.5px;max-width:600px!important}
  .bia4-anh{width:600px}
  .o-dm img{max-width:176px}
  .o-dm b{font-size:16.5px}
  .o-dm small{font-size:14px}
  .dm-nhan{font-size:19px}
  .vi-sao-dau h2{font-size:34px}
  .vi-sao-ds b{font-size:16.5px}
  .vi-sao-ds small{font-size:14px}
  .vs-ic{width:66px;height:66px}
  .chan-trang{font-size:15px}
  .chan-trang h4{font-size:16.5px}
}
@media (min-width:1700px){
  .khung{max-width:1560px}
  body{font-size:17px}
  .sp-ten{font-size:16.5px}
  .sp-gia b{font-size:19px}
  .bia4 .chu-logo{font-size:86px}
  .bia4-anh{width:660px}
  .o-dm img{max-width:196px}
}

/* ── Dải nền xanh nhạt cho khối Danh mục hoa (16/10/2026): trải hết chiều ngang màn
   hình dù khối nằm trong .khung — box-shadow 100vmax + clip-path cắt trên/dưới.
   Xanh rất nhạt pha kem cho khớp ảnh bìa (kem/hồng) phía trên; viền trắng ảnh tròn
   nổi lên trên nền xanh. Hai vệt sáng mờ cho nền khỏi phẳng. ── */
.muc-dm{position:relative;background:#eef6ec;box-shadow:0 0 0 100vmax #eef6ec;clip-path:inset(0 -100vmax);padding:34px 0 38px;margin:0 0 8px}
/* inset:0 — KHÔNG tràn -100vmax như nền: phần tử tuyệt đối tràn ra là sinh thanh cuộn ngang cả trang (clip-path không chặn được) */
.muc-dm::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 60% at 12% 0%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 35% 55% at 92% 100%,rgba(253,239,240,.8),transparent 70%)}
.muc-dm>*{position:relative}
.muc-dm .dm-nhan{color:#d97a80}
.muc-dm .o-dm img{border-color:#fff;box-shadow:0 0 0 1px #d9e8d5,0 8px 18px rgba(31,90,41,.12)}
.muc-dm .o-dm b{color:var(--tim-dam)}
@media (min-width:980px){.muc-dm{padding:50px 0 54px}}

/* ── Khối tự thuật cuối trang chủ (16/10/2026): nền kem ấm trải hết chiều ngang;
   trái: tiêu đề + sứ mệnh + 3 con số; phải: 5 mục đánh số 01–05. ── */
.tu-thuat{background:linear-gradient(180deg,#fbf7f1 0%,#f6efe6 100%);border-top:1px solid #efe6da;margin-top:34px;padding:38px 0 42px}
.tu-thuat-trong{display:grid;gap:28px}
.tt-trai h2{font-size:26px;line-height:1.25;margin:0 0 12px}
.tt-mo{color:var(--chu-phu);margin:0 0 18px}
.tt-su-menh{position:relative;margin:0 0 20px;padding:18px 20px 16px 22px;background:#fff;border-radius:16px;border-left:4px solid var(--vang);box-shadow:0 8px 22px rgba(120,90,40,.08);font-family:var(--chu-tieu-de);font-size:21px;line-height:1.35;color:var(--tim-dam)}
.tt-su-menh span{display:block;font-family:var(--chu-chinh);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hong);margin-bottom:6px}
.tt-su-menh small{display:block;font-family:'Dancing Script',cursive;font-size:20px;color:var(--chu);margin-top:6px;text-align:right}
.tt-so{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.tt-so li{flex:1 1 90px;background:rgba(255,255,255,.7);border:1px solid #efe6da;border-radius:14px;padding:12px 10px;text-align:center}
.tt-so b{display:block;font-size:24px;line-height:1.1;color:var(--tim)}
.tt-so span{font-size:12.5px;color:var(--chu-phu)}
.tt-phai{display:grid;gap:16px}
.tt-muc{display:flex;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px dashed #e6dccd}
.tt-muc:last-child{border-bottom:0;padding-bottom:0}
.tt-so-tt{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--hong);font-weight:700;font-size:14px;box-shadow:0 0 0 1px #f0d9db}
.tt-muc h3{font-size:16px;color:var(--tim-dam);margin:2px 0 4px;line-height:1.3}
.tt-muc p{margin:0;font-size:14px;color:var(--chu-phu);line-height:1.6}
.tt-muc a{color:var(--tim);font-weight:600}
@media (min-width:980px){
  .tu-thuat{padding:64px 0 66px;margin-top:50px}
  .tu-thuat-trong{grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start}
  .tt-trai{position:sticky;top:20px}
  .tt-trai h2{font-size:34px}
  .tt-su-menh{font-size:25px;padding:22px 24px 18px 26px}
  .tt-so b{font-size:28px}
  .tt-muc h3{font-size:17.5px}
  .tt-muc p{font-size:15px}
}
@media (min-width:1400px){.tt-trai h2{font-size:38px}.tt-muc p{font-size:16px}.tt-muc h3{font-size:19px}}

/* ── Ảnh khách nhận hoa (16/10/2026) ──
   Trang chủ: 2 hàng ảnh chạy ngang ngược chiều, mờ dần hai mép, rê chuột thì dừng,
   ô ảnh nghiêng nhẹ + phóng khi rê. Album: ảnh hiện dần từ dưới lên khi cuộn tới. */
.khach-chay .muc-tieu-de{align-items:end}
.chay-khung{display:grid;gap:14px;margin:0 -16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.chay-hang{overflow:hidden}
.chay-dai{display:flex;gap:14px;width:max-content;animation:chay-ngang var(--thoi-gian,40s) linear infinite}
.chay-hang.nguoc .chay-dai{animation-direction:reverse}
.chay-khung:hover .chay-dai{animation-play-state:paused}
.chay-dai .o-khach{flex:none;width:42vw;max-width:230px;border-radius:18px;box-shadow:0 10px 24px rgba(31,90,41,.14);transition:transform .35s,box-shadow .35s}
.chay-dai .o-khach img{aspect-ratio:3/4}
.chay-dai .o-khach:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 18px 34px rgba(31,90,41,.22)}
@keyframes chay-ngang{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.chay-dai{animation:none}.chay-hang{overflow-x:auto}}
.co-hien-dan .hien-dan{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.co-hien-dan .hien-dan.da-hien{opacity:1;transform:none}
.album-khach .o-khach{border-radius:16px}
@media (min-width:980px){.chay-khung{margin:0;gap:18px}.chay-dai{gap:18px}}

/* ── Hỏi đáp trang chủ (16/10/2026) ── */
.hd-tc{display:grid;gap:22px;margin:34px 0 10px}
.hd-trai h2{font-size:26px;margin:0 0 10px;line-height:1.25}
.hd-mo{color:var(--chu-phu);margin:0 0 18px}
.hd-lien-he{background:linear-gradient(135deg,var(--tim-dam),var(--tim));color:#fff;border-radius:18px;padding:20px;box-shadow:0 14px 30px rgba(31,90,41,.22)}
.hd-lien-he b{display:block;font-size:18px;margin-bottom:2px}
.hd-lien-he>span{display:block;font-size:13.5px;opacity:.85;margin-bottom:14px}
.hd-nut{display:flex;flex-wrap:wrap;gap:8px}
.hd-lien-he .nut-chinh{background:#fff;color:var(--tim-dam);box-shadow:none}
.hd-lien-he .nut-chinh svg{width:18px;height:18px}
.hd-zalo{background:#0068ff;color:#fff}
.hd-zalo:hover{background:#0052cc;color:#fff}
.hd-phai{display:grid;gap:10px}
.hd-muc{background:#fff;border:1px solid var(--vien);border-radius:14px;transition:border-color .25s,box-shadow .25s}
.hd-muc:hover{border-color:#cfe2cb}
.hd-muc[open]{border-color:#bcd9b6;box-shadow:0 10px 26px rgba(31,90,41,.09)}
.hd-muc summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.hd-muc summary::-webkit-details-marker{display:none}
.hd-so{flex:none;font-size:13px;font-weight:700;color:var(--hong);min-width:22px}
.hd-hoi{flex:1;font-weight:600;font-size:15px;color:var(--chu);line-height:1.4}
.hd-muc[open] .hd-hoi{color:var(--tim-dam)}
.hd-dau{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--tim-nhat);transition:background .25s,transform .3s}
.hd-dau::before,.hd-dau::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--tim-dam);transform:translate(-50%,-50%)}
.hd-dau::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.hd-muc[open] .hd-dau{background:var(--tim);transform:rotate(180deg)}
.hd-muc[open] .hd-dau::before,.hd-muc[open] .hd-dau::after{background:#fff}
.hd-muc[open] .hd-dau::after{transform:translate(-50%,-50%) rotate(0deg)}
.hd-tra{padding:0 18px 16px 54px}
.hd-tra p{margin:0;color:var(--chu-phu);line-height:1.7;font-size:14.5px}
.hd-muc[open] .hd-tra{animation:hd-mo .35s ease}
@keyframes hd-mo{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hd-muc[open] .hd-tra{animation:none}}
@media (min-width:980px){
  .hd-tc{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;margin:56px 0 16px}
  .hd-trai{position:sticky;top:20px}
  .hd-trai h2{font-size:32px}
  .hd-hoi{font-size:16px}
  .hd-tra p{font-size:15.5px}
}

/* ── Chữ to thêm MỘT NẤC toàn web (16/10/2026, sếp: "nhìn nhỏ quá"). Đặt cuối tệp để
   đè các cỡ cũ; mỗi cỡ màn hình tăng ~1px so với trước. ── */
body{font-size:16px}
.thanh-tren{font-size:13.5px}
.phan-cap ol{font-size:14px}
.menu>.khung>ul>li>a{font-size:16px}
.menu li ul a{font-size:15px}
.dm-dau .mo-ta,.thanh-loc{font-size:15px}
.sp-ten{font-size:14px}
.sp-gia b{font-size:15.5px}
.sp-gia s{font-size:12.5px}
.nut-dat{font-size:14px}
.o-dm b{font-size:13.5px}
.o-dm small{font-size:13px}
.vi-sao-ds b{font-size:14.5px}
.vi-sao-ds small{font-size:13px}
.hd-hoi{font-size:16px}
.hd-tra p{font-size:15.5px}
.tt-mo{font-size:16px}
.tt-muc h3{font-size:17px}
.tt-muc p{font-size:15px}
.bai p{font-size:14px}
.chan-trang{font-size:15px}
.ban-quyen{font-size:14px}
@media (min-width:640px){
  .sp-ten{font-size:15px}
  .sp-gia b{font-size:16.5px}
  .nut-dat{font-size:15px}
  .o-dm b{font-size:15px}
}
@media (min-width:980px){
  body{font-size:16.5px}
  .menu>.khung>ul>li>a{font-size:15.5px}
  .sp-ten{font-size:15.5px}
  .sp-gia b{font-size:17px}
  .o-dm b{font-size:16px}
  .o-dm small{font-size:14px}
  .vi-sao-ds b{font-size:16px}
  .vi-sao-ds small{font-size:14px}
  .hd-hoi{font-size:17px}
  .hd-tra p{font-size:16.5px}
  .tt-muc h3{font-size:18.5px}
  .tt-muc p{font-size:16px}
  .bia4-gt{font-size:17.5px}
}
@media (min-width:1400px){
  body{font-size:17px}
  .menu>.khung>ul>li>a{font-size:16.5px}
  .sp-ten{font-size:16.5px}
  .sp-gia b{font-size:19px}
  .nut-dat{font-size:16px}
  .o-dm b{font-size:17.5px}
  .o-dm small{font-size:15px}
  .vi-sao-ds b{font-size:17.5px}
  .vi-sao-ds small{font-size:15px}
  .hd-hoi{font-size:18px}
  .hd-tra p{font-size:17px}
  .tt-muc h3{font-size:20px}
  .tt-muc p{font-size:17px}
  .bia4-gt{font-size:18.5px}
  .chan-trang{font-size:16px}
}
@media (min-width:1700px){
  body{font-size:18px}
  .sp-ten{font-size:17.5px}
  .sp-gia b{font-size:20px}
}
@media (min-width:980px){.dm-dau .mo-ta,.thanh-loc{font-size:16px}.the-con a{font-size:15px}.phan-cap ol{font-size:14.5px}}
@media (min-width:1400px){.dm-dau .mo-ta,.thanh-loc{font-size:17px}.the-con a{font-size:16px}.phan-cap ol{font-size:15px}.thanh-tren{font-size:14.5px}}

/* ── Đầu trang rộng rãi hơn, logo to (16/10/2026, sếp: "cho rộng ra, logo to lên cho
   cân đối"). Ảnh logo gốc cao 150px nên logo tối đa ~90px vẫn nét.
   Hotline có vòng tròn ống nghe bên trái cho cân với logo bên kia. ── */
.goi-ngay{flex-direction:row;align-items:center;gap:8px}
.goi-vong{display:none;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--tim-nhat);color:var(--tim)}
.goi-vong svg{width:20px;height:20px}
.goi-chu{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.dau-trang-trong{padding-top:12px;padding-bottom:12px}
.logo img{height:54px}
@media (min-width:980px){
  .dau-trang-trong{grid-template-columns:auto minmax(0,640px) auto;justify-content:space-between;gap:40px;padding-top:18px;padding-bottom:18px}
  .logo img{height:76px}
  .tim{border-width:1.5px;box-shadow:0 4px 14px rgba(31,90,41,.06)}
  .tim input{padding:14px 22px;font-size:16px}
  .tim button{padding:0 24px}
  .tim button svg{width:20px;height:20px}
  .goi-vong{display:grid}
  .goi-chu small{font-size:13px}
  .goi-ngay b{font-size:22px}
}
@media (min-width:1400px){
  .dau-trang-trong{grid-template-columns:auto minmax(0,720px) auto;padding-top:20px;padding-bottom:20px}
  .logo img{height:88px}
  .tim input{padding:15px 24px;font-size:17px}
  .goi-vong{width:48px;height:48px}
  .goi-vong svg{width:22px;height:22px}
  .goi-ngay b{font-size:25px}
}

/* Ghi chú VAT dưới giá (sếp chốt 16/10/2026: giá web CHƯA gồm VAT 8%) */
.sp-gia{flex-wrap:wrap}
.sp-gia .vat{flex-basis:100%;font-size:11px;color:var(--chu-phu);font-weight:400;margin-top:-1px}
.ctsp-gia{flex-wrap:wrap}
.ctsp-gia .vat{flex-basis:100%;display:block;font-size:13px;color:var(--chu-phu);font-weight:400;margin-top:4px}