/* PAN – Chat website (tong do – cam theo website, diem xanh "dang online") */
.pcw-cum, .pcw-khung { --pcw-do: #c8161d; --pcw-do2: #9b0f15; --pcw-cam: #ff6a00; --pcw-chu: #1f2937; --pcw-mo: #6b7280; --pcw-vien: #ececec; --pcw-xanh: #22c55e; font-family: inherit; box-sizing: border-box; }
.pcw-khung *, .pcw-cum * { box-sizing: border-box; }

/* ---- cum nut noi goc phai: loi moi / goi / chat ---- */
.pcw-cum { position: fixed; right: 20px; bottom: 20px; z-index: 99990; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.pcw-nut { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 24px 0 18px; border: 0; border-radius: 30px; cursor: pointer;
  background: linear-gradient(135deg, #ff8a00 0%, var(--pcw-cam) 35%, var(--pcw-do) 100%); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 10px 28px rgba(200,22,29,.42), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .18s, box-shadow .18s; }
.pcw-nut:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 34px rgba(200,22,29,.5); }
.pcw-nut svg { width: 30px; height: 30px; fill: #fff; flex: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.pcw-nut svg .pcw-cham { fill: var(--pcw-do); }
.pcw-online { position: absolute; left: 38px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--pcw-xanh); border: 2px solid #fff; }
.pcw-online::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--pcw-xanh); opacity: .5; animation: pcw-nhip 1.8s ease-out infinite; }
.pcw-dem { position: absolute; top: -6px; right: -4px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #fff; color: var(--pcw-do); font-size: 13px; line-height: 24px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pcw-cum:not(.pcw-dang-mo) .pcw-nut::after { content: ""; position: absolute; inset: -5px; border-radius: 35px; border: 2px solid rgba(255,106,0,.5); animation: pcw-song 2.4s ease-out infinite; pointer-events: none; }
.pcw-cum:not(.pcw-dang-mo) .pcw-nut { animation: pcw-lac-nhe 7s ease-in-out 3s infinite; }
.pcw-nut.pcw-lac { animation: pcw-lac-manh 1s ease-in-out 3 !important; }
.pcw-cum.pcw-dang-mo .pcw-nhan, .pcw-cum.pcw-dang-mo .pcw-online { display: none; }
.pcw-cum.pcw-dang-mo .pcw-nut { padding: 0 15px; }

/* nut goi: bieu tuong tron, rung chuong + song lan */
.pcw-goi { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 60px; height: 60px; margin-right: 0; border-radius: 30px; text-decoration: none !important;
  background: radial-gradient(circle at 30% 30%, #ff9a3c, var(--pcw-cam) 45%, var(--pcw-do) 100%); color: #fff; box-shadow: 0 10px 26px rgba(200,22,29,.4); transition: width .25s ease; overflow: visible; }
.pcw-goi svg { position: absolute; right: 16px; top: 16px; width: 28px; height: 28px; fill: #fff; animation: pcw-rung 2.2s ease-in-out infinite; transform-origin: 50% 50%; }
.pcw-goi::before, .pcw-goi::after { content: ""; position: absolute; right: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255,106,0,.55); animation: pcw-song 2s ease-out infinite; pointer-events: none; }
.pcw-goi::after { animation-delay: 1s; }
.pcw-nhan-goi { opacity: 0; white-space: nowrap; font-size: 15px; font-weight: 700; padding: 0 64px 0 20px; transition: opacity .2s; pointer-events: none; }
.pcw-nhan-goi b { font-weight: 900; }
.pcw-goi:hover { width: 250px; }
.pcw-goi:hover .pcw-nhan-goi { opacity: 1; }
.pcw-cum.pcw-dang-mo .pcw-goi { display: none; }

/* bong bong loi moi */
.pcw-moi { position: relative; max-width: 260px; margin-bottom: -4px; padding: 12px 34px 12px 14px; background: #fff; color: var(--pcw-chu); border-radius: 16px 16px 4px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-size: 14px; line-height: 1.4; font-weight: 600; cursor: pointer; border: 1px solid #f3e1d8; animation: pcw-hien .45s cubic-bezier(.2,1.4,.4,1); }
.pcw-moi[hidden] { display: none !important; }
.pcw-moi::after { content: ""; position: absolute; right: 26px; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
.pcw-moi-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #f3f4f6; color: var(--pcw-mo); font-size: 11px; line-height: 22px; cursor: pointer; padding: 0; margin: 0; }
.pcw-moi-x:hover { background: #e5e7eb; }

@keyframes pcw-song { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes pcw-nhip { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes pcw-rung { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-18deg); } 10%, 20%, 30% { transform: rotate(18deg); } }
@keyframes pcw-lac-nhe { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg); } 92% { transform: rotate(4deg); } 94% { transform: rotate(-3deg); } 96% { transform: rotate(2deg); } }
@keyframes pcw-lac-manh { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-8deg) scale(1.06); } 40% { transform: rotate(8deg) scale(1.06); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
/* hieu ung xuat hien KHONG dung opacity: neu trinh duyet tam dung hieu ung (tab an / cua so bi che) van nhin thay */
@keyframes pcw-hien { from { transform: translateY(12px) scale(.9); } to { transform: none; } }
@keyframes pcw-mo-khung { from { transform: translateY(16px) scale(.97); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pcw-cum *, .pcw-cum *::before, .pcw-cum *::after, .pcw-cum .pcw-nut, .pcw-khung { animation: none !important; } }

/* ---- khung chat ---- */
.pcw-khung { position: fixed; right: 20px; bottom: 96px; z-index: 99991; width: 370px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 120px);
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); color: var(--pcw-chu); font-size: 14px; line-height: 1.45;
  animation: pcw-mo-khung .25s ease-out; }
.pcw-khung[hidden], .pcw-khung form[hidden] { display: none !important; }
.pcw-dau { display: flex; align-items: center; gap: 11px; padding: 14px 12px 14px 14px; background: linear-gradient(135deg, var(--pcw-do) 0%, var(--pcw-do2) 70%, #7a0b10 100%); color: #fff; position: relative; }
.pcw-dau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--pcw-cam), #ffd166, var(--pcw-cam)); }
.pcw-avt { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.pcw-avt img { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; }
.pcw-avt i { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--pcw-xanh); border: 2px solid #fff; }
.pcw-tt { flex: 1; min-width: 0; } .pcw-tt b { display: block; font-size: 16px; }
.pcw-tt small { display: block; opacity: .92; font-size: 12px; }
.pcw-dau-goi { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); flex: none; }
.pcw-dau-goi svg { width: 19px; height: 19px; fill: #fff; } .pcw-dau-goi:hover { background: rgba(255,255,255,.28); }
.pcw-dong { border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; padding: 4px 7px; border-radius: 8px; margin: 0; } .pcw-dong:hover { background: rgba(255,255,255,.15); }
.pcw-tin { flex: 1; overflow-y: auto; padding: 14px 12px; background: #fbf7f4; display: flex; flex-direction: column; gap: 8px; }
.pcw-b { max-width: 82%; padding: 9px 12px; border-radius: 16px; word-wrap: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pcw-hang-nv { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; max-width: 90%; }
.pcw-hang-nv .pcw-b { max-width: none; min-width: 0; }
.pcw-av { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); margin-bottom: 2px; }
.pcw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcw-av-chu { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pcw-cam), var(--pcw-do)); color: #fff; font-weight: 800; font-size: 14px; }
.pcw-nv { align-self: flex-start; background: #fff; border: 1px solid var(--pcw-vien); border-bottom-left-radius: 4px; }
.pcw-khach { align-self: flex-end; background: linear-gradient(135deg, var(--pcw-cam), var(--pcw-do)); color: #fff; border-bottom-right-radius: 4px; }
.pcw-khach a { color: #fff; }
.pcw-ai { display: block; font-size: 11.5px; font-weight: 800; color: var(--pcw-do); margin-bottom: 1px; }
.pcw-nd { white-space: pre-wrap; }
.pcw-b time { display: block; font-size: 10.5px; opacity: .65; text-align: right; margin-top: 2px; }
.pcw-bao { align-self: center; font-size: 12px; color: #b91c1c; background: #fee2e2; padding: 4px 10px; border-radius: 10px; }
.pcw-bd { padding: 12px 14px 14px; border-top: 1px solid var(--pcw-vien); display: flex; flex-direction: column; gap: 8px; }
.pcw-bd p { margin: 0; font-size: 12.5px; color: var(--pcw-mo); }
.pcw-goi-y { display: flex; flex-wrap: wrap; gap: 6px; }
.pcw-chip { text-transform: none !important; letter-spacing: 0 !important; min-height: 0 !important; border: 1px solid #fbd5c0; background: #fff7f2; color: #9a3412; border-radius: 16px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; margin: 0; line-height: 1.3; transition: all .15s; }
.pcw-chip:hover { border-color: var(--pcw-cam); background: #ffedd5; }
.pcw-chip.pcw-chon { background: linear-gradient(135deg, var(--pcw-cam), var(--pcw-do)); color: #fff; border-color: transparent; }
.pcw-bd input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 11px; font: inherit; margin: 0; }
.pcw-bd input:focus, .pcw-nhap textarea:focus { outline: 2px solid rgba(255,106,0,.35); border-color: var(--pcw-cam); }
.pcw-bd button[type=submit] { height: 44px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #ff8a00, var(--pcw-cam) 35%, var(--pcw-do)); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; margin: 0; box-shadow: 0 6px 16px rgba(200,22,29,.3); }
.pcw-bd button[type=submit]:disabled { opacity: .6; }
.pcw-loi { color: #b91c1c; }
.pcw-loi:empty { display: none; }
.pcw-khung form, .pcw-khung .pcw-bd p, .pcw-khung .pcw-bd input { margin: 0 !important; } /* giao dien website hay them le duoi -> khoang trang thua */
.pcw-hang2 { display: flex; gap: 8px; } .pcw-hang2 input { flex: 1; min-width: 0; }
.pcw-bd button[type=submit] { text-transform: none !important; letter-spacing: 0 !important; }
.pcw-tin { min-height: 110px; }
.pcw-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.pcw-nhap { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--pcw-vien); margin: 0; }
.pcw-nhap textarea { flex: 1; resize: none; min-height: 42px; max-height: 110px; padding: 10px 12px; border: 1px solid #d6d6d6; border-radius: 13px; font: inherit; margin: 0; box-shadow: none; }
.pcw-nhap button { width: 44px; height: 42px; flex: none; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--pcw-cam), var(--pcw-do)); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.pcw-nhap button svg { width: 20px; height: 20px; fill: #fff; }

/* nut "Chat" thay cho "Chat Zalo" o thanh menu duoi / thanh nut trang san pham (dien thoai) */
.pcw-mo-chat { position: relative; }
.pan-mnav a.pcw-mo-chat svg { color: var(--pcw-do, #c8161d); }
.pan-sp-bar a.pcw-mo-chat { background: linear-gradient(135deg, #ff6a00, #c8161d) !important; color: #fff !important; }
.pcw-dem2 { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c8161d; color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; text-align: center; font-style: normal; }
.pan-sp-bar .pcw-dem2 { background: #fff; color: #c8161d; top: -6px; left: auto; right: 8px; }

/* dien thoai */
@media (max-width: 849px) {
  .pcw-cum { right: 12px; bottom: 76px; gap: 10px; }
  .pcw-nut { height: 54px; padding: 0 13px; } .pcw-nut .pcw-nhan { display: none; } .pcw-online { left: 32px; top: 9px; }
  .pcw-goi { width: 54px !important; height: 54px; } .pcw-goi::before, .pcw-goi::after { width: 54px; height: 54px; } .pcw-goi svg { right: 13px; top: 13px; } .pcw-nhan-goi { display: none; }
  .pcw-moi { max-width: 220px; font-size: 13px; }
  /* khung dang "tam truot tu duoi len", cao ~60% man hinh – van thay trang web phia tren */
  .pcw-khung { right: 8px; left: 8px; width: auto; max-width: none; bottom: 140px; top: auto; height: 60vh; height: 60dvh; min-height: 360px; max-height: 600px; border-radius: 18px; }
  .pcw-dau { padding: 9px 8px 9px 12px; gap: 9px; }
  .pcw-avt { width: 36px; height: 36px; font-size: 18px; } .pcw-avt img { width: 30px; height: 30px; } .pcw-avt i { width: 10px; height: 10px; }
  .pcw-tt b { font-size: 15px; line-height: 1.25; } .pcw-tt small { font-size: 11.5px; }
  .pcw-dau-goi { width: 34px; height: 34px; } .pcw-dau-goi svg { width: 17px; height: 17px; }
  .pcw-tin { padding: 10px 10px; gap: 7px; }
  .pcw-b { padding: 7px 11px; }
  .pcw-av { width: 28px; height: 28px; } .pcw-av-chu { font-size: 12px; }
  .pcw-bd { padding: 10px 12px 12px; gap: 7px; }
  .pcw-bd p { font-size: 12px; }
  .pcw-goi-y { gap: 5px; }
  .pcw-chip { padding: 4px 9px; font-size: 12.5px; }
  .pcw-bd button[type=submit] { height: 42px; }
  .pcw-nhap { padding: 8px 10px; }
  /* iPhone tu phong to ca trang khi bam vao o nhap co chu < 16px -> de 16px */
  .pcw-khung .pcw-bd input, .pcw-khung .pcw-nhap textarea { font-size: 16px !important; }
  .pcw-bd input { height: 42px; }
  .pcw-nhap textarea { min-height: 40px; padding: 8px 12px; }
  .pcw-nhap button { height: 40px; width: 42px; }
  /* da co nut Goi + Chat o thanh duoi -> an cum nut noi, khung chat sat thanh duoi */
  body.pcw-co-nav .pcw-cum { display: none !important; }
  body.pcw-co-nav .pcw-khung { bottom: 70px; }
  /* ban phim dang mo (JS dat --pcw-vv-*): khung vua dung phan man hinh con thay */
  .pcw-khung.pcw-co-phim { top: var(--pcw-vv-top) !important; bottom: auto !important; height: var(--pcw-vv-cao) !important; min-height: 0; max-height: none; }
  .pcw-khung.pcw-co-phim .pcw-dau small { display: none; }
}