:root{--paper:#f4ead7;--paper2:#fbf6eb;--ink:#3b2f24;--muted:#6f5f4c;--rust:#9a6045;--green:#55634a;--line:#d8c8ad;--gold:#b18b56;--font:"Times New Roman",Times,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:#e8dfd0;color:var(--ink);font-family:var(--font);font-size:18px;line-height:1.7}
a{color:inherit}
button,nav,.topline,.kicker,.eyebrow,.stamp,.small,.time,.photo{font-family:var(--font)}
.wrap{max-width:1000px;margin:auto;padding:22px}
.paper{background:var(--paper);box-shadow:0 12px 45px #57432d30;border:1px solid #c8b596}

/* Đầu trang & mục lục */
.topline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:12px clamp(20px,5vw,65px);color:var(--muted);font-size:14px;letter-spacing:1px;text-transform:uppercase}
nav{position:sticky;top:0;z-index:10;display:flex;justify-content:center;gap:6px 22px;flex-wrap:wrap;padding:13px 20px;background:var(--paper2);border-bottom:2px solid var(--gold);font-size:16px;font-weight:bold}
nav a{text-decoration:none;color:var(--green);padding:2px 4px}
nav a:hover{color:var(--rust);text-decoration:underline}

/* Trang bìa */
.hero{text-align:center;padding:64px 25px 54px}
.kicker{letter-spacing:2px;font-size:14px;color:var(--rust);text-transform:uppercase;font-weight:bold}
h1{font-family:var(--font);font-size:clamp(44px,7vw,76px);line-height:1.12;margin:18px 0 10px;font-weight:bold;color:#6a4a32}
.subtitle{font-size:clamp(20px,2.6vw,26px);font-style:italic;color:var(--green)}
.rule{width:100px;height:2px;background:var(--gold);margin:26px auto}
.hero p{max-width:640px;margin:0 auto;color:var(--muted);font-size:19px}
.stamp{display:inline-block;border:2px solid var(--rust);color:var(--rust);padding:7px 15px;transform:rotate(-4deg);font-size:14px;font-weight:bold;letter-spacing:2px;margin-top:28px}

/* Các mục */
section{padding:46px clamp(20px,5vw,65px);border-top:1px solid var(--line)}
.head{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--rust);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:bold}
.eyebrow{font-size:13px;letter-spacing:1.5px;color:var(--rust);text-transform:uppercase;font-weight:bold}
h2{font-family:var(--font);font-size:clamp(28px,3.5vw,38px);font-weight:bold;color:#6a4a32;margin:2px 0 0;line-height:1.25}
h3{font-family:var(--font);font-size:22px;font-weight:bold;color:var(--green);margin:6px 0 8px;line-height:1.3}
p{margin:12px 0;text-align:justify}
.lead{font-size:20px;color:#52432f}
.sign{text-align:right;font-style:italic}

/* Khối nội dung */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.card{background:var(--paper2);border:1px solid var(--line);border-top:3px solid var(--gold);padding:20px 22px}
.card p{margin:6px 0}
.photo{min-height:220px;border:2px dashed #b59c79;background:linear-gradient(135deg,#e6d8bf,#f7efdf);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--muted);font-size:16px;font-weight:bold}
.photo small{display:block;margin-top:8px;font-size:14px;font-weight:normal}
.quote{font-size:23px;line-height:1.5;font-style:italic;color:#7a5a3e;text-align:center;max-width:720px;margin:30px auto;padding:14px 20px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.small{font-size:15px;color:var(--muted);font-style:italic}

/* Dòng thời gian */
.timeline{border-left:2px solid var(--gold);margin:26px 0 0 8px;padding-left:28px}
.timeline article{position:relative;margin:0 0 22px}
.timeline article:before{content:"";position:absolute;left:-36px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--rust);border:2px solid var(--paper)}
.timeline b{font-size:19px;color:var(--rust)}

/* Lá thư */
.letter{background:#efe1c8;padding:30px 34px;border:1px solid #d1bc98;box-shadow:4px 5px 0 #d7c5a7}
.letter p{font-style:italic}

/* Thước phim */
.video{background:#e9ddc7;border:1px solid var(--line);padding:22px 26px;margin-bottom:24px}
.scene{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.scene:last-child{border-bottom:0}
.time{font-size:16px;font-weight:bold;color:var(--rust);padding-top:2px}

footer{text-align:center;padding:44px 20px;background:#e9ddc7;color:#5e4a33;border-top:2px solid var(--gold)}
footer p{text-align:center}
footer h2{margin:8px 0}
button{border:1px solid var(--rust);background:var(--rust);color:#fff;padding:12px 22px;font-size:16px;cursor:pointer;margin-top:10px}
button:hover{background:#744832}

@media(max-width:700px){
body{font-size:17px}
.grid{grid-template-columns:1fr}
.scene{grid-template-columns:1fr;gap:2px}
.letter{padding:22px 20px}
p{text-align:left}
nav{gap:4px 14px;font-size:15px}
}
@media print{
body{background:#fff}.wrap{padding:0}.paper{box-shadow:none;border:0}
nav,button{display:none}
section{break-inside:avoid-page}
}

/* ===== Bổ sung cho bản web ===== */
.skip{position:absolute;left:-999px;top:0;background:var(--rust);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:10px}
nav a.active{color:var(--rust);text-decoration:underline;text-underline-offset:5px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--rust);z-index:30;transition:width .1s linear}

/* Ảnh minh họa */
.art{margin:0;background:var(--paper2);border:1px solid var(--line);padding:10px 10px 6px;box-shadow:4px 5px 0 #dccbaa;transform:rotate(1.2deg)}
.art.tilt-left{transform:rotate(-1.4deg)}
.art svg{display:block;width:100%;height:auto;background:#efe3cc}
.art figcaption{font-size:15px;font-style:italic;color:var(--muted);text-align:center;padding:8px 4px 2px}

/* Dòng thời gian */
.timeline p{margin:4px 0 0;font-size:17px}

/* Thẻ dấu ấn */
.card .icon{font-size:26px;line-height:1;color:var(--rust)}
.card ul{margin:8px 0 0;padding-left:20px}
.card li{margin:3px 0}

/* Chuyển cảnh khi cuộn */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Sổ lưu bút */
.guest{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
form.card{border-top-color:var(--rust)}
label{display:block;font-weight:bold;font-size:16px;color:var(--green);margin:12px 0 4px}
input,textarea,select{width:100%;font:inherit;font-size:17px;color:var(--ink);background:#fffdf7;border:1px solid #cdb999;padding:9px 11px;border-radius:0}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.swatches label{margin:0;font-weight:normal;cursor:pointer}
.swatches input{position:absolute;opacity:0;width:1px}
.swatches span{display:block;width:34px;height:34px;border:2px solid #bfa985;border-radius:50%}
.swatches input:checked+span{outline:3px solid var(--rust);outline-offset:2px}
.swatches input:focus-visible+span{outline:3px dashed var(--rust);outline-offset:2px}
.count{font-size:14px;color:var(--muted);text-align:right}
.msg{min-height:26px;font-size:16px;margin-top:8px}
.msg.err{color:#a33a2a}.msg.ok{color:var(--green)}
button[disabled]{opacity:.6;cursor:wait}

.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.board-head h3{margin:0}
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-height:720px;overflow:auto;padding:6px 6px 10px 2px}
.note{position:relative;padding:18px 18px 12px;border:1px solid #d3c09f;box-shadow:3px 4px 0 #d9c7a7;background:#fbf3e2}
.note:nth-child(odd){transform:rotate(-.8deg)}.note:nth-child(even){transform:rotate(.7deg)}
.note.hong{background:#f6e1d9}.note.xanh{background:#e3e8d6}.note.vang{background:#f5e6bf}
.note .to{font-size:14px;color:var(--rust);font-weight:bold;letter-spacing:.5px;text-transform:uppercase}
.note p{margin:6px 0 10px;font-style:italic;text-align:left;white-space:pre-line;word-break:break-word}
.note footer{all:unset;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.note .from{font-weight:bold;color:var(--ink);font-style:normal}
.heart{all:unset;cursor:pointer;color:var(--rust);font-size:15px;padding:2px 6px;border:1px solid transparent}
.heart:hover,.heart:focus-visible{border-color:var(--rust)}
.heart.on{font-weight:bold}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);font-style:italic;padding:30px 10px;border:1px dashed var(--line)}

.totop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;padding:0;margin:0;border-radius:50%;font-size:20px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:15}
.totop.show{opacity:1;pointer-events:auto}

@media(max-width:800px){.guest{grid-template-columns:1fr}}
@media(max-width:560px){.board{grid-template-columns:1fr;max-height:none}}
@media print{.progress,.totop,#luubut form{display:none}.reveal{opacity:1;transform:none}.board{max-height:none;overflow:visible}}

/* Trình phát thước phim */
.film{margin:0 0 26px}
.f-screen{position:relative;background:#2a2018;border:8px solid #fffdf7;box-shadow:0 10px 30px #57432d40;overflow:hidden}
.f-screen canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;cursor:pointer}
.f-screen:fullscreen{border:0;display:flex;flex-direction:column;justify-content:center}
.f-screen:fullscreen canvas{max-height:calc(100vh - 56px);object-fit:contain}
.f-big{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;margin:0;padding:0 0 0 6px;font-size:34px;background:#9a6045e6;border:3px solid #fbf6eb;box-shadow:0 6px 24px #0005}
.f-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#3b2f24;color:#fbf6eb}
.f-bar button{margin:0;padding:6px 12px;font-size:16px;background:transparent;border-color:#fbf6eb55;min-width:42px}
.f-bar button:hover{background:#ffffff1a}
.f-seek{flex:1;accent-color:var(--gold);min-width:60px}
.f-time{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.f-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.f-tools button{margin:0}
.f-add{display:inline-block;border:1px solid var(--green);background:var(--green);color:#fff;padding:12px 22px;font-size:16px;cursor:pointer}
.f-add:hover{background:#435038}
.f-add:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.f-add input{position:absolute;width:1px;height:1px;opacity:0}
.f-clear{background:transparent;color:var(--rust)}
.f-clear:hover{color:#fff}
.film .small{margin:8px 0}
.film.recording .f-rec{background:#744832}
@media(max-width:560px){.f-time{display:none}.f-big{width:64px;height:64px;font-size:26px}}
@media print{.film{display:none}}

/* Ảnh thật của lớp */
.art img{display:block;width:100%;height:auto;background:#efe3cc}
.art.solo{max-width:760px;margin:30px auto 0}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;margin:34px 0 8px}
.gallery .wide{grid-column:1/-1;max-width:820px;width:100%;justify-self:center}
.gallery .art:not(.wide) img{aspect-ratio:3/2;object-fit:cover}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}

/* Văn thơ */
.byline{font-size:15px;color:var(--muted);font-style:italic;margin:2px 0 14px}
.story p{text-indent:1.4em}
.poem{max-width:560px;margin:8px auto 0;text-align:center}
.poem p{text-align:center;font-style:italic;line-height:1.95;margin:14px 0;text-indent:0}
@media print{#vantho .poem{break-inside:avoid}}

/* Quản trị sổ lưu bút */
.admin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.admin-row [hidden]{display:none}
.adminbtn{all:unset;cursor:pointer;font-family:var(--font);font-size:14px;color:var(--muted);text-decoration:underline;padding:2px 4px}
.adminbtn:hover,.adminbtn:focus-visible{color:var(--rust)}
#admin-form:not([hidden]){display:flex;gap:6px;align-items:center}
#admin-form input{width:190px;font-size:15px;padding:5px 8px}
.del{all:unset;cursor:pointer;color:#a33a2a;font-size:14px;padding:2px 6px;margin-left:6px;border:1px solid transparent}
.del:hover,.del:focus-visible{border-color:#a33a2a}
.del[disabled]{opacity:.5;cursor:wait}
@media print{.admin-row{display:none}.del{display:none}}