/* [14/10] XEM TRƯỚC PAGE TRONG KHUNG ĐIỆN THOẠI — màu theo giao diện TỐI của app Facebook (Meta); khung máy viền kim loại tối hợp đại màn.
   [15/10] dựng lại "giống thực tế nhất": thanh trạng thái · vùng cuộn riêng (thanh trên + tab dính) · bảng tin · thanh điều hướng dưới · lớp phủ
   story/Reels/ảnh. Màu Facebook giữ nguyên; CAM WOW chỉ đánh dấu thứ CHƯA đăng (giờ "Lịch 10:05", viền story chưa lên) ⇒ nhìn là biết.
   Tiền tố dtp- (điện thoại page). Hover chỉ brightness (luật đại màn). */
.dtp-khung { --dtp-w: 268px; --dtp-h: 540px; --fb-nen: #18191a; --fb-the: #242526; --fb-o: #3a3b3c; --fb-ke: #393a3b; --fb-chu: #e4e6eb; --fb-chu-2: #b0b3b8;
  --fb-xanh: #0866ff; --dtp-lech: #ff8a5c;
  position: relative; width: var(--dtp-w); max-width: 100%; flex: 0 0 auto; padding: 10px; border-radius: 40px; box-sizing: border-box;
  background: linear-gradient(160deg, #2b2724, #0d0c0b 55%, #24201d);
  box-shadow: 0 0 0 1px rgb(255 122 80 / .22), 0 18px 40px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .06); }
.dtp-khung.dtp-to { --dtp-w: 340px; --dtp-h: 690px; border-radius: 48px; padding: 11px; }
.dtp-tai { position: absolute; top: 18px; left: 50%; width: 30%; height: 21px; transform: translateX(-50%); border-radius: 12px; background: #000; z-index: 9; }
.dtp-man { position: relative; display: flex; flex-direction: column; height: var(--dtp-h); overflow: hidden; border-radius: 30px; background: var(--fb-nen);
  color: var(--fb-chu); font: 13px/1.38 -apple-system, "SF Pro Text", "Segoe UI", Inter, sans-serif; -webkit-font-smoothing: antialiased; }
.dtp-to .dtp-man { border-radius: 38px; font-size: 14px; }
.dtp-ic { display: inline-flex; flex: 0 0 auto; width: 1.25em; height: 1.25em; }
.dtp-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dtp-ic .dac, .dtp-ic svg.dac { fill: currentColor; stroke: none; }
.dtp-ic.nho { width: .95em; height: .95em; vertical-align: -2px; }

/* thanh trạng thái (đồng hồ giờ VN chạy) */
.dtp-trang-thai { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 11px 20px 5px 26px; font-size: 12px; font-weight: 600; }
.dtp-trang-thai > span { display: flex; align-items: center; gap: 4px; }
.dtp-trang-thai em { font-style: normal; font-size: 10.5px; }
.dtp-trang-thai .dtp-ic { width: 15px; height: 11px; } .dtp-trang-thai .dtp-ic:last-child { width: 22px; }
.dtp-trang-thai .dtp-ic:last-child svg { stroke-width: 1.2; opacity: .9; }

/* vùng cuộn: thanh trên + tab dính như app */
.dtp-cuon { position: relative; flex: 1 1 auto; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.dtp-cuon::-webkit-scrollbar { display: none; }
.dtp-thanh { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 7px 12px 8px; background: var(--fb-nen); }
.dtp-thanh .dtp-ic { width: 22px; height: 22px; }
.dtp-thanh b { flex: 1; min-width: 0; font-size: 1.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtp-thanh-chu .dtp-ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--fb-o); box-sizing: border-box; }
.dtp-chu-fb { font: 800 1.85em/1 "Segoe UI", Inter, sans-serif !important; letter-spacing: -.04em; }
.dtp-bia { height: calc(var(--dtp-w) * .47); background: #3a3b3c center/cover no-repeat; }
.dtp-dau { position: relative; padding: 0 14px 14px; border-bottom: 1px solid var(--fb-ke); }
.dtp-dai-dien { display: block; width: calc(var(--dtp-w) * .33); height: calc(var(--dtp-w) * .33); margin-top: calc(var(--dtp-w) * -.17); border-radius: 50%;
  border: 4px solid var(--fb-nen); background: #3a3b3c center/cover no-repeat; }
.dtp-dai-dien.co-story { cursor: pointer; box-shadow: 0 0 0 3px var(--fb-xanh); }
/* [15/10] barem nháp chưa có ảnh TÌM được ⇒ khung trống nói "đang tìm" (không hiện ảnh cũ của hệ AI sinh đã xoá) */
.dtp-bia, .dtp-dai-dien { position: relative; }
.dtp-cho-anh { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; text-align: center; font-size: .9em; line-height: 1.3; color: rgb(255 255 255 / .6); }
/* [15/10] nút "↻ Đổi" ảnh barem (chỉ barem chưa tạo page) — bìa: góc dưới phải · đại diện: giữa đáy vòng tròn */
.dtp-doi-anh { position: absolute; z-index: 2; right: 6px; bottom: 6px; padding: 2px 8px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px;
  background: rgb(0 0 0 / .6); color: #fff; font: inherit; font-size: .78em; line-height: 1.6; cursor: pointer; }
.dtp-doi-anh:hover { filter: brightness(1.3); }
.dtp-doi-anh:disabled { opacity: .5; cursor: progress; }
.dtp-dai-dien .dtp-doi-anh { right: auto; left: 50%; bottom: -2px; transform: translateX(-50%); }
.dtp-dau h5 { margin: 8px 0 2px; font-size: 1.6em; font-weight: 700; line-height: 1.2; color: var(--fb-chu); }
.dtp-loai { margin: 0 0 12px; font-size: .95em; color: var(--fb-chu-2); }
.dtp-nut { display: flex; gap: 6px; }
.dtp-nut span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0; border-radius: 7px; background: var(--fb-o); font-weight: 600; font-size: .95em; }
.dtp-nut span.chinh { background: var(--fb-xanh); color: #fff; } .dtp-nut span:last-child { flex: 0 0 38px; }
.dtp-tab { position: sticky; top: 41px; z-index: 2; display: flex; gap: 4px; padding: 8px 10px; background: var(--fb-nen); border-bottom: 1px solid var(--fb-ke); overflow-x: auto; scrollbar-width: none; }
.dtp-tab button { padding: 6px 11px; border: 0; border-radius: 18px; background: none; color: var(--fb-chu-2); font: 600 .95em inherit; font-family: inherit; white-space: nowrap; cursor: pointer; }
.dtp-tab button.dang { background: rgb(45 136 255 / .2); color: #4599ff; }
.dtp-tab button:hover { filter: brightness(1.25); }

/* nội dung tab */
.dtp-noi-dung { padding-bottom: 14px; }
.dtp-the { margin: 8px 0 0; padding: 12px 14px; background: var(--fb-the); }
.dtp-the > b { display: block; margin-bottom: 6px; font-size: 1.15em; }
.dtp-the p { margin: 0 0 6px; white-space: pre-line; }
.dtp-the p.mo, .dtp-dong-tt.mo { color: var(--fb-chu-2); }
.dtp-dong-tt { display: flex; align-items: center; gap: 8px; color: var(--fb-chu); }
.dtp-dong-tt .dtp-ic { color: var(--fb-chu-2); }
.dtp-bio { color: var(--fb-chu); }
.dtp-tieu-de { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 14px 6px; background: var(--fb-the); margin-top: 8px; }
.dtp-tieu-de b { font-size: 1.15em; } .dtp-tieu-de span { color: #4599ff; font-size: .95em; }
.dtp-rong { margin: 18px 14px; color: var(--fb-chu-2); text-align: center; font-size: .95em; }

/* một bài trong bảng tin */
.dtp-luong { display: flex; flex-direction: column; gap: 8px; }
.dtp-tieu-de + .dtp-luong { margin-top: 0; }
.dtp-bai { background: var(--fb-the); padding: 10px 0 0; }
.dtp-bai-dau { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; }
.dtp-bai-dau > div { flex: 1; min-width: 0; }
.dtp-bai-dau b { display: block; font-size: .98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtp-bai-dau small { display: flex; align-items: center; gap: 3px; font-size: .82em; color: var(--fb-chu-2); }
.dtp-bai-dau small.lech, .dtp-xem-dau small.lech, .dtp-luoi-reel small.lech { color: var(--dtp-lech); }
.dtp-bai-dau > .dtp-ic { color: var(--fb-chu-2); }
.dtp-av-nho { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #3a3b3c center/cover no-repeat; }
.dtp-bai-chu { margin: 0 12px 8px; white-space: pre-line; overflow-wrap: anywhere; }
.dtp-bai-chu.gon { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dtp-xem-them { display: block; margin: -6px 12px 8px; padding: 0; border: 0; background: none; color: var(--fb-chu-2); font: 600 .95em inherit; font-family: inherit; cursor: pointer; }
.dtp-bai-video { position: relative; aspect-ratio: 4 / 5; background: #000; cursor: pointer; }
.dtp-bai-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtp-phat { position: absolute; left: 10px; bottom: 10px; width: 26px; height: 26px; color: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .7)); }
.dtp-bai-anh { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; }
.dtp-bai-anh button { position: relative; border: 0; padding: 0; aspect-ratio: 1; background: #3a3b3c center/cover no-repeat; cursor: pointer; }
.dtp-bai-anh.so-1 { grid-template-columns: 1fr; } .dtp-bai-anh.so-1 button { aspect-ratio: 4 / 5; }
.dtp-bai-anh.so-2 button { aspect-ratio: 1 / 1.6; }
.dtp-bai-anh.so-3 button:first-child { grid-row: span 2; aspect-ratio: auto; }
.dtp-bai-anh button b { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; font-size: 1.6em; }
.dtp-mo-that { display: inline-block; margin: 8px 12px 0; color: #4599ff; font-size: .9em; text-decoration: none; }
.dtp-bai-nut { display: flex; margin-top: 6px; border-top: 1px solid var(--fb-ke); }
.dtp-bai-nut span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; color: var(--fb-chu-2); font-weight: 600; font-size: .9em; }
.dtp-bai.chua-dang { box-shadow: inset 2px 0 0 rgb(255 138 92 / .55); }

/* tab Ảnh · tab Reels */
.dtp-luoi-anh, .dtp-luoi-reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; }
.dtp-luoi-anh button { border: 0; padding: 0; aspect-ratio: 1; background: #3a3b3c center/cover no-repeat; cursor: pointer; }
.dtp-luoi-reel button { position: relative; border: 0; padding: 0; aspect-ratio: 9 / 16; background: #000; cursor: pointer; overflow: hidden; }
.dtp-luoi-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtp-luoi-reel small { position: absolute; left: 4px; bottom: 4px; right: 4px; display: flex; align-items: center; gap: 2px; color: #fff; font-size: 10.5px;
  text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; }
.dtp-luoi-anh button:hover, .dtp-luoi-reel button:hover, .dtp-bai-anh button:hover, .dtp-the-story:hover { filter: brightness(1.15); }

/* bảng tin gộp: dải story dạng thẻ như trang chủ app */
.dtp-day-story { display: flex; gap: 6px; padding: 4px 10px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 8px solid #0e0f10; }
.dtp-the-story { position: relative; flex: 0 0 calc(var(--dtp-w) * .27); aspect-ratio: 9 / 15; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #3a3b3c center/cover no-repeat; }
.dtp-the-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / .7)); }
.dtp-the-story .dtp-av-nho { position: absolute; top: 6px; left: 6px; z-index: 1; width: 30px; height: 30px; box-shadow: 0 0 0 2.5px var(--fb-xanh); }
.dtp-the-story small { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 1; color: #fff; font-size: 11px; font-weight: 600; text-align: left; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtp-the-story.chua-dang { outline: 1.5px dashed var(--dtp-lech); outline-offset: -1.5px; }
.dtp-the-story.chua-dang .dtp-av-nho { box-shadow: 0 0 0 2.5px var(--dtp-lech); }

/* thanh điều hướng dưới + vạch home */
.dtp-duoi { flex: 0 0 auto; display: flex; justify-content: space-around; padding: 8px 8px 18px; border-top: 1px solid var(--fb-ke); background: var(--fb-nen); color: var(--fb-chu-2); }
.dtp-duoi .dtp-ic { width: 22px; height: 22px; } .dtp-duoi .dtp-ic.dang { color: var(--fb-xanh); }
.dtp-vach-home { position: absolute; left: 50%; bottom: 6px; width: 36%; height: 4px; margin-left: -18%; border-radius: 3px; background: #e4e6eb; opacity: .85; z-index: 8; }

/* lớp phủ story · Reels · ảnh — nằm TRONG màn, dưới thanh trạng thái */
.dtp-xem { position: absolute; inset: 34px 0 0; z-index: 6; background: #000; outline: none; overflow: hidden; user-select: none; touch-action: manipulation; }
.dtp-xem-anh { position: absolute; inset: 0; background: #111 center/cover no-repeat; display: grid; place-items: center; }
.dtp-xem-anh p { color: var(--fb-chu-2); font-size: .95em; }
.dtp-xem-story::before { content: ""; position: absolute; inset: 0 0 auto; height: 90px; z-index: 1; background: linear-gradient(rgb(0 0 0 / .55), transparent); pointer-events: none; }
.dtp-xem-vach { position: absolute; top: 6px; left: 8px; right: 8px; z-index: 2; display: flex; gap: 3px; }
.dtp-xem-vach i { flex: 1; height: 2.5px; border-radius: 2px; background: rgb(255 255 255 / .35); overflow: hidden; }
.dtp-xem-vach b { display: block; height: 100%; width: 0; background: #fff; }
.dtp-xem-vach b.day { width: 100% !important; }
.dtp-xem-dau { position: absolute; top: 16px; left: 10px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 8px; color: #fff; }
.dtp-xem-dau > div { flex: 1; min-width: 0; }
.dtp-xem-dau b { display: block; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.dtp-xem-dau small { font-size: .8em; color: rgb(255 255 255 / .8); }
.dtp-xem-dau .dtp-av-nho { width: 32px; height: 32px; }
.dtp-xem-dong { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .35); color: #fff; font-size: 15px; cursor: pointer; }
.dtp-xem-chan { position: absolute; left: 10px; right: 10px; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 12px; color: #fff; }
.dtp-xem-chan span { flex: 1; padding: 8px 14px; border: 1px solid rgb(255 255 255 / .6); border-radius: 20px; font-size: .9em; color: rgb(255 255 255 / .85); }
.dtp-xem-chan .dtp-ic { width: 22px; height: 22px; }
.dtp-xem-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.dtp-xem-caption { position: absolute; left: 12px; right: 12px; bottom: 58px; z-index: 2; margin: 0; color: #fff; font-size: .9em; text-shadow: 0 1px 3px #000;
  white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.dtp-xem-day { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dtp-xem-day i { flex: 0 0 100%; scroll-snap-align: start; background: center/contain no-repeat; }
.dtp-xem-anh-lo .dtp-xem-dau b { font: 600 13px var(--wow-font-mono, monospace); }

/* thẻ concept: điện thoại bên trái, chi tiết bên phải; hẹp ⇒ xếp chồng, điện thoại giữa */
.fp-concept.co-dtp { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; align-items: flex-start; }
/* chi tiết cần ≥ 260px; không đủ chỗ cạnh điện thoại ⇒ tự xuống dưới (bản đầu ép còn ~40px — đo 14/10 ở lưới 340px) */
.fp-concept.co-dtp > .fp-chi-tiet { flex: 1 1 260px; min-width: 0; }
.fp-luoi-concept:has(.co-dtp) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); }