/* ===== Concept C · THƯ HÙNG NHỎ AI =====
   Khách: bong bóng lời Hùng nhỏ AI viết theo chỗ người xem đang đứng, có chữ ký tay, chỉ xuống nút có mặt Hùng nhỏ bên trong. Rê chuột: Hùng nhỏ ngẩng lên. Đang tải: Hùng nhỏ gật gù, chữ đổi «Em đang mở video 1».
   FREE: lá thư đề xuất chuẩn như hoá đơn (lý do riêng · giá · giữ giá · suất · hoàn tiền). PRO: một dòng nhắn + nút học tiếp có ảnh bài kế. */
.nc{display:inline-flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:100%}
.nc-bong{position:relative;margin:0 0 4px 34px;max-width:450px;padding:14px 18px 10px;border-radius:18px 18px 18px 5px;background:#fff;color:var(--chu);font:500 15px/1.5 var(--font);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.nc-bong::after{content:"";position:absolute;left:-1px;bottom:-11px;border:12px solid transparent;border-left-color:#fff;border-bottom:0;transform:skewX(-8deg)}
.sang .nc-bong{box-shadow:0 10px 26px rgba(102,10,59,.12),0 0 0 1px var(--vien)}
.nc-ky{display:block;text-align:right;font:700 23px/1 var(--hand);color:var(--hong-600);margin-top:2px;transform:rotate(-3deg);transform-origin:100% 50%}
.nc-btn{position:relative;display:inline-flex;align-items:center;gap:14px;min-height:70px;padding:7px 24px 7px 7px;border-radius:999px;background:var(--nut-cam);color:var(--cta-chu);text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(150,60,0,.2) inset,0 14px 28px rgba(240,138,36,.34);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.nc-av{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--than-2);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nc-av img,.nc-mini-av img,.nc-thu-av img{width:100%;height:100%;object-fit:cover}
.nc-btn-t{display:flex;align-items:center;gap:10px;min-width:0}
.nc-btn-t b{display:block;font:800 20px/1.15 var(--font);letter-spacing:-.01em}
.nc-btn-t small{display:block;font:600 13px/1.3 var(--font);color:rgba(30,14,21,.8);margin-top:3px}
.nc-btn>.ic{width:22px;height:22px;stroke-width:2.6;transition:transform .2s}
.nc-btn:hover,.nc-btn.is-hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 34px rgba(240,138,36,.44)}
.nc-btn:hover .nc-av,.nc-btn.is-hover .nc-av{transform:translateY(-6px) rotate(-8deg)}
.nc-btn:hover>.ic,.nc-btn.is-hover>.ic{transform:translateX(4px)}
.nc-btn:active,.nc-btn.is-bam{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 10px rgba(240,138,36,.3)}
.nc-btn:focus-visible,.nc-btn.is-focus{outline:3px solid var(--vang);outline-offset:4px}
.nc-btn.dang-tai .nc-av{animation:ncGat .5s ease-in-out infinite alternate}
.nc-btn.dang-tai>.ic{display:none}
@keyframes ncGat{from{transform:rotate(-7deg) translateY(-2px)}to{transform:rotate(7deg) translateY(1px)}}
.nc:has(.dang-tai) .nc-bong{opacity:.55;transition:opacity .3s}
.nc.lon{align-items:center}.nc.lon .nc-bong{margin-left:0;font-size:17px;max-width:520px;text-align:left}.nc.lon .nc-btn{min-height:80px}.nc.lon .nc-av{width:64px;height:64px}.nc.lon .nc-btn-t b{font-size:23px}
.giua-c .nc{align-items:center}
/* mini header */
.nc-mini{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 4px;border-radius:999px;background:var(--nut-cam);color:var(--cta-chu);font:800 14.5px/1 var(--font);text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 16px rgba(240,138,36,.3);transition:transform .2s}
.nc-mini-av{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--than-2);box-shadow:0 0 0 2px #fff;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.nc-mini-tin{position:absolute;top:-5px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--hong-500);color:#fff;font:800 11px/19px var(--font);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--than)}
.nc-mini:hover{transform:translateY(-1px)}.nc-mini:hover .nc-mini-av{transform:rotate(-10deg) translateY(-2px)}
.nc-mini:active{transform:translateY(1px)}
.nc-mini:focus-visible{outline:3px solid var(--vang);outline-offset:3px}
.nc-mini.dang-tai .nc-mini-av{animation:ncGat .5s ease-in-out infinite alternate}
/* nút chuẩn */
.nc-nut{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;font:800 15px/1.15 var(--font);text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.nc-nut .ic{transition:transform .2s}
.nc-nut.cam{background:var(--nut-cam);color:var(--cta-chu);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(150,60,0,.2) inset,0 8px 18px rgba(240,138,36,.3)}
.nc-nut.vien{color:inherit;box-shadow:0 0 0 1.5px currentColor inset}
.nc-nut.vien .ic{width:18px;height:18px}
.nc-nut:hover,.nc-nut.is-hover{transform:translateY(-1px)}.nc-nut.cam:hover>.ic:last-child,.nc-nut.cam.is-hover>.ic:last-child{transform:translateX(3px)}
.nc-nut.vien:hover{background:rgba(244,30,146,.08)}
.nc-nut:active,.nc-nut.is-bam{transform:translateY(2px)}
.nc-nut:focus-visible,.nc-nut.is-focus{outline:3px solid var(--vang);outline-offset:3px}
.nc-nut.cam.dang-tai>.ic:last-child{display:none}
.nc-nut.co-anh{padding:5px 20px 5px 5px;min-height:58px;gap:12px}
.nc-th{width:86px;border-radius:999px 10px 10px 999px}
.nc-th em{display:none}
.nc-th .th-play{width:24px;height:24px;margin:-12px 0 0 -12px}.nc-th .th-play svg{width:11px;height:11px}
.toi .nc-pro .nc-nut.vien{color:#fff}
.nc-hang{display:flex;flex-wrap:wrap;gap:12px}
.giua-c .nc-hang{justify-content:center}
/* thư đề xuất (FREE) */
.nc-thu{background:#fff;color:var(--chu);border-radius:20px;max-width:660px;padding:22px 26px 20px;box-shadow:0 30px 60px rgba(10,2,6,.35);position:relative;
  background-image:linear-gradient(90deg,var(--hong-500),var(--hong-300),var(--cam));background-size:100% 5px;background-repeat:no-repeat}
.sang .nc-thu{box-shadow:0 18px 40px rgba(102,10,59,.12),0 0 0 1px var(--vien)}
.nc-thu header{display:flex;align-items:center;gap:14px;padding:6px 0 14px;border-bottom:1px solid var(--vien)}
.nc-thu-av{flex:none;width:50px;height:50px;border-radius:50%;overflow:hidden;background:var(--than-2);box-shadow:0 0 0 2px var(--hong-200)}
.nc-thu header b{display:block;font:800 16px/1.2 var(--font)}
.nc-thu header small{display:block;font:500 13px/1.4 var(--font);color:var(--chu-2);margin-top:2px}
.nc-ly{margin:14px 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.nc-ly li{position:relative;padding-left:28px;font:500 14.5px/1.5 var(--font);color:var(--chu-2)}
.nc-ly li b{color:var(--chu)}
.nc-ly li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--hong-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce1e78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.nc-hd{width:100%;border-collapse:collapse;font:500 14px/1.35 var(--font);margin:4px 0 16px;font-variant-numeric:tabular-nums}
.nc-hd th{text-align:left;font-weight:500;color:var(--chu-2);padding:9px 0;border-bottom:1px dashed #ecc9d8}
.nc-hd td{text-align:right;font-weight:700;padding:9px 0 9px 12px;border-bottom:1px dashed #ecc9d8}
.nc-hd tr:first-child td b{font:900 21px/1 var(--font)}
.nc-hd tr:last-child th,.nc-hd tr:last-child td{border-bottom:0;color:var(--xanh)}
.nc-thu footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.nc-thu footer .nc-ky{margin-left:auto}
.nc-thu .nc-nut.vien{color:var(--chu)}
.nc-thu.gon{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;max-width:900px;padding:18px 20px 16px}
.nc-thu.gon p{margin:0;flex:1 1 340px;font:500 15px/1.5 var(--font);color:var(--chu-2)}
.nc-thu.gon p b{color:var(--chu)}
.nc-thu.gon .nc-ky{display:inline-block;margin-left:10px;font-size:20px;vertical-align:-2px}
.nc-chan{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.nc-chan .dam{color:var(--chu-2)}.nc-chan .dam b{color:var(--chu)}.nc-chan .dam .ic{stroke:var(--xanh)}
.giua-c .nc-thu{margin-inline:auto;text-align:left}
@media (max-width:600px){
  .nc,.nc-btn{width:100%}
  .nc-bong{margin-left:22px;font-size:14.5px}
  .nc-btn{min-height:64px;padding-right:16px;gap:12px}.nc-av{width:50px;height:50px}
  .nc-btn-t b{font-size:17.5px}.nc-btn-t small{font-size:12px}
  .nc.lon .nc-btn-t b{font-size:18.5px}.nc.lon .nc-av{width:52px;height:52px}.nc.lon .nc-bong{font-size:15px}
  .nc-mini{height:40px;font-size:13.5px;padding-right:13px}.nc-mini-av{width:32px;height:32px}
  .nc-thu{padding:18px 16px 16px}
  .nc-thu footer .nc-nut,.nc-chan .nc-nut,.nc-hang .nc-nut{width:100%}
  .nc-hd{font-size:13px}
}
