/* HAMEC · Cộng đồng mẹ bầu · Truyện · Thông điệp mỗi ngày (03/10) — trẻ trung, gần gũi; theo Sáng/Tối của app */
:root{--cd-vang:#FBBF24;--cd-vang-nhat:#FEF3C7;--cd-hong:#F472B6}
.cd-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#uiCD,#uiTruyen{display:none}
.gd-moi body[data-xem="cd"] #uiCD,.gd-moi body[data-xem="tr"] #uiTruyen{display:block}
.gd-moi body[data-xem="cd"] #gioiThieu,.gd-moi body[data-xem="tr"] #gioiThieu,.gd-moi body[data-xem="cd"] #kienThuc,.gd-moi body[data-xem="tr"] #kienThuc{display:none!important}
.cd-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;flex:none;box-shadow:0 0 0 2px var(--c-surface)}
.cd-av.nho{width:36px;height:36px;font-size:15px}.cd-av .cd-ic{width:20px;height:20px}
.cd-nut-tron{width:40px;height:40px;border-radius:12px;border:0;background:var(--c-surface-2);color:var(--c-text);display:grid;place-items:center;cursor:pointer;flex:none}
.cd-nut-tron.on{background:var(--cd-vang-nhat);color:#B45309}
.cd-trong{text-align:center;color:var(--c-text-2);padding:36px 16px;font-size:15px}

/* ---- Bảng tin ---- */
#uiCD{margin:0 -16px;padding-bottom:20px}
.cd-dau{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 6px}
.cd-dau h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em}
.cd-chip{padding:6px 0 10px;border-bottom:8px solid var(--c-surface-2)}
.cd-chip small{display:block;padding:0 16px 8px;font-size:12.5px;letter-spacing:.06em;color:var(--c-text-2);font-weight:600}
.cd-chip>div{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px}.cd-chip>div::-webkit-scrollbar{display:none}
.cd-chip button{flex:none;border:0;border-radius:99px;padding:9px 18px;background:var(--c-surface-2);color:var(--c-text);font:inherit;font-size:15px;cursor:pointer}
.cd-chip button.on{background:var(--cd-vang);color:#3b2d00;font-weight:600}
.cd-viet{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:8px solid var(--c-surface-2);background:var(--c-surface);padding:12px 16px;font:inherit;color:var(--c-text-2);text-align:left;cursor:pointer}
.cd-viet>span:nth-child(2){flex:1;background:var(--c-surface-2);border-radius:99px;padding:10px 14px;font-size:15px}
.cd-viet>.cd-ic{color:#10B981}
.cd-bai{background:var(--c-surface);border-bottom:8px solid var(--c-surface-2);padding:14px 16px 4px}
.cd-bai header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cd-bai header .tt{flex:1;min-width:0}.cd-bai header b{display:block;font-size:16px;font-weight:700}.cd-bai header small{color:var(--c-text-2);font-size:13.5px}
.cd-nd{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.55;margin-bottom:6px}
.cd-nd.gon{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.cd-xem-them{display:block;margin:0 auto 8px;border:0;background:none;font:inherit;font-weight:700;color:var(--c-text);cursor:pointer}
.cd-media{margin:8px -16px 0;display:grid;gap:2px}
.cd-media.a1{grid-template-columns:1fr}.cd-media.a2{grid-template-columns:1fr 1fr}.cd-media.a3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.cd-media.a3 .cd-anh:first-child{grid-row:span 2}.cd-media.a4{grid-template-columns:1fr 1fr}
.cd-anh{position:relative;border:0;padding:0;background:#000;cursor:pointer;aspect-ratio:1/1;overflow:hidden}
.cd-media.a1 .cd-anh{aspect-ratio:auto;max-height:520px}.cd-media.a3 .cd-anh:first-child{aspect-ratio:auto}
.cd-anh img{width:100%;height:100%;object-fit:cover;display:block}.cd-media.a1 .cd-anh img{object-fit:contain;max-height:520px;background:var(--c-surface-2)}
.cd-anh i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-style:normal;font-size:28px;font-weight:700}
.cd-media.vd video{width:100%;max-height:560px;background:#000;display:block}
.cd-dem{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--c-text-2);font-size:14px;border-bottom:1px solid var(--c-line)}
.cd-like{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#EF4444;color:#fff;vertical-align:-4px}.cd-like .cd-ic{width:12px;height:12px}
.cd-hanh-dong{display:grid;grid-template-columns:repeat(3,1fr)}
.cd-hanh-dong button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--c-text-2);font:inherit;font-size:15px;padding:10px 0;cursor:pointer;border-radius:10px}
.cd-hanh-dong button:active{background:var(--c-surface-2)}.cd-hanh-dong button.on{color:#EF4444;font-weight:600}
.cd-them{display:block;margin:12px auto;border:0;border-radius:99px;padding:10px 22px;background:var(--c-surface-2);color:var(--c-text);font:inherit;font-weight:600;cursor:pointer}
.cd-fab{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:56;width:60px;height:60px;border-radius:50%;border:0;background:var(--cd-vang);color:#3b2d00;display:grid;place-items:center;box-shadow:0 8px 22px rgba(245,158,11,.45);cursor:pointer;transform:translate3d(0,var(--vv-lech,0px),0)}
.cd-fab .cd-ic{width:26px;height:26px}
@media (min-width:821px){.cd-fab{bottom:28px}#uiCD{margin:0;max-width:640px;margin-inline:auto}}
/* hộp trượt: soạn bài, bình luận, đọc truyện */
.cd-hop{position:fixed;inset:0;z-index:93;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.cd-tam{background:var(--c-surface);color:var(--c-text);width:100%;max-width:600px;border-radius:22px 22px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;display:grid;gap:12px}
@media (min-width:700px){.cd-hop{align-items:center}.cd-tam{border-radius:22px}}
.cd-tam-dau{display:flex;align-items:center;justify-content:space-between}.cd-tam-dau b{font-size:18px}
.cd-tac-gia{display:flex;align-items:center;gap:10px}.cd-tac-gia b{font-size:16px}
.cd-tam textarea{font:inherit;font-size:17px;border:0;outline:0;resize:none;background:transparent;color:var(--c-text);min-height:120px}
.cd-xem-truoc{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cd-xem-truoc:empty{display:none}
.cd-xem-truoc>div{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#000}.cd-xem-truoc img,.cd-xem-truoc video{width:100%;height:100%;object-fit:cover}
.cd-xem-truoc button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer}.cd-xem-truoc button .cd-ic{width:14px;height:14px}
.cd-chip-chon{display:flex;flex-wrap:wrap;gap:6px}.cd-chip-chon button{border:1.5px solid var(--c-line);background:transparent;color:var(--c-text);border-radius:99px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.cd-chip-chon button.on{border-color:var(--cd-vang);background:var(--cd-vang-nhat);color:#92400E;font-weight:600}
.cd-tam-cuoi{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--c-line);padding-top:10px}
.cd-them-anh{display:flex;align-items:center;gap:8px;color:#10B981;font-weight:600;cursor:pointer}
.cd-dang{border:0;border-radius:12px;background:var(--cd-vang);color:#3b2d00;font:inherit;font-weight:700;padding:11px 26px;cursor:pointer}.cd-dang:disabled{opacity:.6}
.cd-tien{height:6px;border-radius:99px;background:var(--c-surface-2);overflow:hidden}.cd-tien i{display:block;height:100%;width:0;background:var(--cd-vang);transition:width .2s}
.cd-bl-ds{max-height:56vh;overflow:auto;display:grid;gap:12px;align-content:start}
.cd-bl{display:flex;gap:10px}.cd-bl>div{background:var(--c-surface-2);border-radius:16px;padding:8px 12px;min-width:0}.cd-bl b{font-size:14px}.cd-bl p{margin:2px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.cd-bl small{color:var(--c-text-2);font-size:12.5px}.cd-bl small button{border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.cd-bl-go{display:flex;gap:8px}.cd-bl-go input{flex:1;font:inherit;font-size:16px;padding:11px 14px;border-radius:99px;border:1.5px solid var(--c-line);background:var(--c-surface-2);color:var(--c-text)}
.cd-bl-go button{border:0;border-radius:99px;background:var(--c-primary);color:#fff;font:inherit;font-weight:600;padding:0 18px;cursor:pointer}
.cd-xem-anh{position:fixed;inset:0;z-index:95;background:#000}.cd-xem-anh>.cd-nut-tron{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2;background:rgba(255,255,255,.15);color:#fff}
.cd-truot{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.cd-truot>div{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center}.cd-truot img{max-width:100%;max-height:100%}

/* ---- Truyện (theo mẫu anh Hoá: dải đầu tối, tab gạch chân vàng, bìa vuông) ---- */
#uiTruyen{margin:0 -16px;padding-bottom:24px}
.tr-dau{display:flex;align-items:center;justify-content:center;position:relative;background:#111;color:#fff;padding:18px 60px 16px;border-bottom:4px solid var(--cd-vang)}
.tr-dau h1{margin:0;text-wrap:balance;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:25px;line-height:1.25;text-align:center}
.tr-dau .cd-nut-tron{position:absolute;right:12px;background:transparent;color:#fff}
.tr-tab{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:#1C1C1C;padding:0 8px}.tr-tab::-webkit-scrollbar{display:none}
.tr-tab button{flex:none;border:0;background:transparent;color:#E5E5E5;font:inherit;font-size:16px;padding:12px 12px;cursor:pointer}
.tr-tab button.on{color:var(--cd-vang);font-weight:700}
#uiTruyen section{padding:18px 0 4px}#uiTruyen h2{margin:0 16px 12px;font-size:22px;font-weight:800}
.tr-keo{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;padding:0 16px 6px}.tr-keo::-webkit-scrollbar{display:none}
.tr-the{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border:0;background:transparent;color:var(--c-text);font:inherit;text-align:left;padding:0;cursor:pointer;scroll-snap-align:start;min-width:0}
.tr-keo .tr-the{flex:0 0 46%}
.tr-the .bia{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#333;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tr-the .bia img{width:100%;height:100%;object-fit:cover}
.tr-the .bia b{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 12px;color:#fff;font-size:17px;font-weight:800;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.6);background:linear-gradient(transparent,rgba(0,0,0,.72))}
.tr-the .tg{display:flex;align-items:center;gap:6px;font-size:15.5px;font-weight:600}.tr-the .tg .cd-ic{width:17px;height:17px;color:var(--c-text-2)}
.tr-the .nhan{display:inline-flex;align-items:center;gap:4px;background:#EDE9FE;color:#6D28D9;border-radius:8px;padding:3px 9px;font-size:13px;font-weight:600}.tr-the .nhan .cd-ic{width:14px;height:14px}
.tr-the .so{display:flex;align-items:center;gap:5px;color:var(--c-text-2);font-size:14px}.tr-the .so .cd-ic{width:15px;height:15px}
.tr-luoi{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:0 16px}
@media (min-width:821px){#uiTruyen{margin:0}.tr-keo .tr-the{flex:0 0 220px}.tr-luoi{grid-template-columns:repeat(4,1fr)}}
:root.gd-moi[data-theme="dark"] .tr-the .nhan{background:#2E1065;color:#C4B5FD}
@media (prefers-color-scheme:dark){:root.gd-moi:not([data-theme="light"]) .tr-the .nhan{background:#2E1065;color:#C4B5FD}}
.cd-hop.doc .cd-tam{padding:0 0 calc(18px + env(safe-area-inset-bottom));gap:0;max-height:95vh}
.tr-doc{position:relative;display:grid;gap:12px;padding-bottom:6px}
.tr-doc-bia{width:100%;max-height:300px;object-fit:cover;display:block}
.tr-doc .dong{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.45);color:#fff}
.tr-doc h2{margin:6px 18px 0;font-family:"Playfair Display",Georgia,serif;font-size:28px;line-height:1.25}
.tr-doc-tg{display:flex;align-items:center;gap:6px;margin:0 18px;color:var(--c-text-2)}.tr-doc-tg .cd-ic{width:16px;height:16px}
.tr-doc audio{width:calc(100% - 36px);margin:0 18px}
.tr-doc-nd{margin:4px 18px 0;white-space:pre-wrap;font-size:17.5px;line-height:1.75;font-family:"Be Vietnam Pro",system-ui,sans-serif}
.tr-doc-nut{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 18px 0}
.tr-doc-nut button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;min-height:46px;background:var(--c-surface-2);color:var(--c-text);font:inherit;font-weight:600;cursor:pointer}
.tr-doc-nut button.on{background:#FEE2E2;color:#DC2626}

/* ---- Thông điệp mỗi ngày (toàn màn hình) ---- */
.td-man{position:fixed;inset:0;z-index:120;background:#000;color:#fff}
.td-truot{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;direction:rtl}.td-truot::-webkit-scrollbar{display:none}
.td-trang{direction:ltr;position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom))}
.td-phu{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.08) 35%,rgba(0,0,0,.08) 65%,rgba(0,0,0,.35))}
.td-dau,.td-giua,.td-cuoi{position:relative}
.td-dau{display:flex;align-items:center;gap:12px;text-shadow:0 1px 6px rgba(0,0,0,.4)}.td-dau small{display:block;font-size:15px;opacity:.95}.td-dau b{font-size:17px;font-weight:500}
.td-giua{text-align:center;padding:0 6px}
.td-giua h2{margin:0;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(38px,11vw,60px);line-height:1.15;text-shadow:0 3px 18px rgba(0,0,0,.45)}
.td-giua p{margin:16px auto 0;max-width:460px;font-size:16.5px;line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:.95}
.td-cuoi{display:flex;justify-content:center;gap:18px}
.td-cuoi button{width:54px;height:54px;border-radius:16px;border:0;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer}
.td-dong{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;width:46px;height:46px;border-radius:14px;border:0;background:var(--cd-vang-nhat);color:#3b2d00;display:grid;place-items:center;cursor:pointer;z-index:2}
.td-goi{position:absolute;left:0;right:0;bottom:calc(100px + env(safe-area-inset-bottom));text-align:center;font-size:13px;opacity:.75;display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:none}
.td-goi .cd-ic{width:16px;height:16px}
/* thẻ thông điệp trên Trang chủ */
.ui-td{position:relative;display:block;width:100%;border:0;border-radius:var(--r-24);overflow:hidden;min-height:150px;padding:18px;text-align:left;color:#fff;cursor:pointer;margin-top:var(--s-16);font:inherit;box-shadow:var(--sh-1)}
.ui-td small{position:relative;font-size:13px;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.ui-td b{position:relative;display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:600;font-size:30px;line-height:1.2;margin:8px 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.ui-td span{position:relative;font-size:14px;opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-td::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.3))}