@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
:root{--ink:#232622;--muted:#7c817a;--line:#e9e9e4;--paper:#fff;--wash:#f7f7f4;--accent:#647664;--tint:#f5f2ec;--width:1250px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:400 14px/1.6 Inter,Arial,sans-serif;color:var(--ink);background:var(--paper)}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-weight:300;line-height:1.2;letter-spacing:-.035em}h1{font-size:clamp(38px,5vw,72px)}h2{font-size:clamp(26px,2.7vw,40px)}h3{font-size:22px}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}img{max-width:100%}button,input,select{font:inherit}button{cursor:pointer}input,select{color:var(--ink)}.container{max-width:var(--width);margin:auto;padding-left:24px;padding-right:24px}.topbar{background:var(--tint);border-bottom:1px solid #efede6;color:#555;text-align:center;font-size:11px;padding:7px 12px;letter-spacing:.03em}.site-header{background:#fff;position:sticky;top:0;z-index:55;border-bottom:1px solid var(--line)}.header-main{display:flex;align-items:center;gap:28px;min-height:74px}.brand{font-size:27px;font-weight:300;letter-spacing:-.055em;white-space:nowrap}.brand strong{font-weight:500;color:var(--accent)}.header-search{height:43px;display:flex;align-items:center;gap:9px;border:1px solid #dedfda;border-radius:26px;padding:0 16px;max-width:570px;flex:1;min-width:0}.header-search span{font-size:19px;color:#7b7b79}.header-search input{width:100%;height:100%;border:0;background:none;outline:0;font-size:12px}.header-links{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:12px;white-space:nowrap}.header-links a:hover,.nav-link:hover{color:var(--accent)}.savedcount{display:inline-flex;justify-content:center;align-items:center;background:var(--ink);color:white;border-radius:20px;font-size:10px;min-width:17px;height:17px;padding:0 4px;margin-left:3px}.nav-wrap{border-top:1px solid #f0f0ec}.nav{display:flex;gap:20px;align-items:center;justify-content:space-between}.nav-link{position:relative;font-size:11px;padding:14px 0;display:block;white-space:nowrap}.nav-link.has-menu:after{content:'+';margin-left:6px;font-size:12px;color:#999}.nav-item{position:relative}.nav-menu{opacity:0;pointer-events:none;visibility:hidden;position:absolute;top:100%;left:0;width:215px;background:#fff;border:1px solid var(--line);box-shadow:0 15px 35px #1112;display:flex;flex-direction:column;padding:12px;transition:opacity .14s}.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto}.nav-menu a{padding:10px 9px;font-size:12px}.nav-menu a:hover{background:var(--wash)}.hamburger{display:none;background:none;border:0;font-size:24px}.hero{height:445px;margin:20px 0 52px;position:relative;overflow:hidden;background:#d1cec5;display:grid;grid-template-columns:54% 46%}.hero-photo{height:100%;width:100%;object-fit:cover;object-position:center 45%;grid-column:2;grid-row:1}.hero-content{grid-column:1;grid-row:1;background:var(--tint);padding:45px 47px 40px;display:flex;flex-direction:column;justify-content:center}.overline{text-transform:uppercase;font-size:10px;letter-spacing:.2em;font-weight:500;color:var(--accent);display:block;margin-bottom:17px}.hero h1{white-space:pre-line;margin-bottom:16px;font-weight:300}.hero p{color:#6f736b;max-width:430px;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:4px;border:1px solid #262925;padding:11px 20px;background:#262925;color:white;font-size:12px;transition:.2s;width:max-content}.btn:hover{background:var(--accent);color:white}.btn-outline{background:white;color:var(--ink)}.btn-outline:hover{background:var(--tint);color:var(--ink)}.hero .btn{margin-top:12px}.section{margin:50px 0 70px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}.section-head h2{margin:0 0 7px}.section-head p{margin:0;color:var(--muted);font-size:13px}.tiny-link{font-size:12px;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}.category-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:13px}.category-item img{height:135px;width:100%;object-fit:cover;display:block;border-radius:3px;filter:saturate(.85)}.category-item span{display:block;font-size:12px;text-align:center;margin-top:11px}.category-item:hover img{filter:saturate(1)}.pins{columns:4;column-gap:17px}.pins.three{columns:3}.pin[hidden]{display:none!important}.pin{display:inline-block;width:100%;margin:0 0 25px;break-inside:avoid;-webkit-column-break-inside:avoid;vertical-align:top}.pin-image{position:relative;display:block;border-radius:8px;overflow:hidden;background:#f0f0ed;line-height:0}.pin-image img{display:block;width:100%;height:auto;object-fit:contain;transition:transform .45s}.pin:hover .pin-image img{transform:scale(1.025)}.heart{border:0;position:absolute;right:11px;top:11px;background:#fffffff0;border-radius:50%;width:34px;height:34px;display:flex;justify-content:center;align-items:center;font-size:24px;line-height:1;z-index:2;opacity:0;transform:translateY(5px);transition:all .18s;color:#333;box-shadow:0 2px 12px #0002;padding:0}.pin:hover .heart,.pin:focus-within .heart,.heart.is-saved{opacity:1;transform:none}.heart.is-saved{color:#dc4b69}.pin-name{display:block;font-size:13px;font-weight:400;line-height:1.5;margin-top:11px}.pin-sub{color:var(--muted);font-size:11px;margin:4px 0 0}.pin-pill{font-size:10px;margin-top:6px;color:#818782}.pin-pill span{margin-right:7px}.feature{background:var(--tint);display:grid;grid-template-columns:1fr 1fr;min-height:330px;overflow:hidden}.feature img{width:100%;height:330px;object-fit:cover;display:block}.feature-copy{padding:50px;align-self:center}.feature-copy h2{font-size:39px;max-width:470px}.feature-copy p{max-width:450px;color:var(--muted)}.style-chips{display:flex;gap:9px;flex-wrap:wrap}.style-chips a{font-size:12px;border:1px solid #dedfd9;padding:8px 17px;border-radius:24px}.style-chips a:hover{background:var(--ink);color:#fff}.creator-grid,.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.creator{border:1px solid var(--line);padding:24px 22px;min-height:140px}.creator .avatar{font-weight:300;font-size:31px;color:var(--accent)}.creator h3{font-size:17px;margin:3px 0 5px}.creator p,.guide p{font-size:12px;color:var(--muted)}.guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.guide{border-top:1px solid var(--line);padding:25px 5px}.guide .no{font-size:11px;color:var(--accent)}.guide h3{font-size:21px;margin:15px 0 9px}.footer{border-top:1px solid var(--line);margin-top:65px;padding:42px 0 25px;background:#fafaf8}.footer-grid{display:grid;grid-template-columns:2.3fr 1fr 1fr 1fr;gap:32px}.footer a{display:block;font-size:12px;margin:7px 0}.footer p,.footer small{font-size:12px;color:var(--muted)}.footer .brand{font-size:25px}.page-intro{padding-top:37px;padding-bottom:28px}.breadcrumbs{color:#92958e;font-size:11px;margin-bottom:22px}.breadcrumbs a:hover{color:var(--ink)}.page-intro h1{font-size:50px;margin:0 0 9px}.page-intro p{color:var(--muted);max-width:730px}.category-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}.highlight{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:8px}.highlight img{width:78px;height:75px;object-fit:cover;flex:0 0 78px;border-radius:3px}.highlight strong{font-weight:400;font-size:13px}.highlight em{font-style:normal;color:#999;font-size:11px;display:block}.discovery{display:grid;grid-template-columns:242px minmax(0,1fr);gap:29px;align-items:start}.sidebar{position:sticky;top:130px;border:1px solid var(--line);padding:18px 18px 5px}.sidebar>h3{font-size:18px;margin:0 0 15px}.filter-group{border-top:1px solid var(--line);padding:13px 0}.filter-group h4{font-size:12px;font-weight:500;margin:0 0 9px}.filter-option{display:flex;gap:8px;align-items:center;font-size:12px;margin:8px 0;cursor:pointer}.filter-option input{accent-color:var(--accent);margin:0}.category-search{position:relative}.category-search input{width:100%;height:45px;border:1px solid #dfe1db;border-radius:5px;padding:0 15px;font-size:12px;outline:none}.category-search input:focus{border-color:var(--accent)}.category-search .glass{position:absolute;right:15px;top:10px;font-size:20px;color:#7c827a}.results-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:17px 0 24px}.results-toolbar span{font-size:12px;color:var(--muted)}.results-toolbar select{font-size:12px;padding:8px 10px;border:1px solid #dadcd6;background:white;border-radius:4px}.result-empty{font-size:14px;color:var(--muted);padding:40px 0}.pagination{display:flex;justify-content:center;gap:7px;margin:25px 0 35px}.pagination button{border:1px solid #ddd;background:white;width:35px;height:35px;border-radius:4px;font-size:12px}.pagination button.active{background:#202420;color:white;border-color:#202420}.pagination button:disabled{opacity:.35;cursor:default}.reset{border:0;background:transparent;text-decoration:underline;color:var(--muted);padding:7px 0;font-size:12px}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:38px;padding-top:34px}.detail-head{padding-bottom:20px}.detail-head h1{font-size:clamp(35px,4vw,56px);margin:0 0 16px;line-height:1.12}.meta-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}.meta-tags span{font-size:11px;background:#f6f6f2;border:1px solid #ebece8;padding:5px 12px;border-radius:18px}.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-main-image{grid-column:span 2;position:relative;line-height:0}.detail-gallery img{width:100%;height:auto;display:block;cursor:zoom-in;border-radius:5px}.detail-gallery img:not(.big){max-height:590px;object-fit:cover}.detail-main-image img{max-height:760px;object-fit:contain;background:#f4f4f1}.detail-main-image .heart{opacity:1;transform:none}.detail-side{position:sticky;top:139px;align-self:start}.detail-side .info-card{border:1px solid var(--line);padding:22px}.info-card h3{font-size:22px;margin:0 0 7px}.info-card>p{color:var(--muted);font-size:12px}.facts{margin-top:12px}.fact{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid #efefeb;padding:12px 0;font-size:12px}.fact span{color:var(--muted)}.fact strong{font-weight:400;text-align:right;max-width:57%}.info-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.info-actions button{border:1px solid #d9ddd7;background:white;font-size:12px;padding:9px 12px;border-radius:4px}.story{padding:33px 0 10px}.story h2{font-size:29px}.story p{line-height:1.9;color:#6c716b;max-width:720px}.color-row{display:flex;gap:10px;margin:14px 0 29px}.color-row div{width:58px;height:58px;border-radius:4px;border:1px solid #0001}.step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.step{border-top:1px solid #d4d7d1;padding-top:14px}.step span{font-size:11px;color:var(--accent)}.step h3{font-size:17px;margin:11px 0 6px}.step p{font-size:12px;color:var(--muted)}.modal{position:fixed;inset:0;background:#0d0e0dd9;z-index:150;display:none;align-items:center;justify-content:center;padding:45px}.modal.open{display:flex}.modal img{max-width:95vw;max-height:86vh;object-fit:contain}.modal button{position:absolute;right:20px;top:15px;background:white;border:0;border-radius:50%;width:42px;height:42px;font-size:28px}.site-note{font-size:11px;color:#969c94;line-height:1.7}.filter-toggle{display:none}.mobile-nav{display:none}.head-actions{display:flex;gap:15px;align-items:center}.row-switch{display:flex;border:1px solid var(--line);padding:2px;border-radius:4px;gap:2px}.row-switch button{border:0;background:transparent;padding:6px 9px;color:#7d837d;font-size:11px;border-radius:3px}.row-switch button.selected{background:var(--ink);color:#fff}.top-home-links{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.top-home-links a{padding:18px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px}.top-home-links a:hover{background:var(--tint)}
@media(hover:none){.heart{opacity:1;transform:none}}
@media(max-width:1100px){.category-strip{grid-template-columns:repeat(4,1fr)}.header-main{gap:15px}.header-links{gap:14px}.nav{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:20px}.pins{columns:3}.pins.three{columns:2}.header-search{max-width:none}.feature-copy{padding:30px}}
@media(max-width:720px){.container{padding:0 16px}.topbar{font-size:10px}.site-header{position:relative}.header-main{min-height:66px;gap:9px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.brand{font-size:24px}.header-search{order:3;flex-basis:100%;height:38px}.header-links{margin-left:auto}.header-links>a:nth-child(1),.header-links>a:nth-child(3){display:none}.hamburger{display:block}.nav-wrap{display:none}.mobile-nav{display:none;padding:12px 16px;background:white;border-top:1px solid var(--line);position:absolute;left:0;right:0;z-index:70;max-height:76vh;overflow:auto}.mobile-nav.open{display:block}.mobile-nav a{display:block;padding:10px 0;border-bottom:1px solid var(--line)}.hero{height:auto;grid-template-columns:1fr;margin:15px 0 40px}.hero-photo{grid-column:1;grid-row:1;height:255px}.hero-content{grid-column:1;grid-row:2;padding:25px 24px 29px}.hero h1{font-size:41px}.section{margin:34px 0 45px}.section-head{align-items:flex-start}.head-actions{gap:7px}.row-switch button{padding:5px;font-size:10px}.section-head h2{font-size:28px}.section-head p{font-size:12px}.category-strip{grid-template-columns:repeat(4,1fr);gap:10px}.category-item img{height:auto;aspect-ratio:1/1}.category-item span{font-size:10px}.pins,.pins.three{columns:2;column-gap:11px}.pin{margin-bottom:20px}.pin-name{font-size:12px}.pin-sub{font-size:10px}.pin-pill{font-size:9px}.feature{grid-template-columns:1fr}.feature img{height:215px}.feature-copy{padding:28px}.feature-copy h2{font-size:30px}.creator-grid{grid-template-columns:repeat(2,1fr);gap:9px}.guide-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-grid>div:first-child{grid-column:span 2}.page-intro{padding-top:25px}.page-intro h1{font-size:37px}.category-highlights{grid-template-columns:repeat(3,1fr);gap:7px}.highlight{display:block;padding:5px}.highlight img{width:100%;height:80px}.highlight strong{font-size:11px;display:block;padding:7px 3px 3px}.highlight em{display:none}.discovery{grid-template-columns:1fr;gap:14px}.filter-toggle{display:inline-flex;font-size:12px;border:1px solid #dadcd6;background:white;padding:8px 11px}.sidebar{display:none;position:static;order:0}.sidebar.open{display:block}.result-pane{order:1}.detail-layout{grid-template-columns:1fr;gap:20px;padding-top:15px}.detail-side{position:static}.detail-gallery{gap:8px}.story{padding-top:22px}.step-list{grid-template-columns:1fr}.top-home-links{grid-template-columns:1fr;gap:8px}.top-home-links a{padding:13px}}

/* V5.0.1 — Mobile header: Logo → Tìm kiếm → Hamburger */
@media(max-width:720px){.header-main{flex-wrap:nowrap;gap:8px}.header-main>.brand{order:0;flex:0 0 auto}.header-search{order:1;flex:1 1 0;flex-basis:auto;min-width:0;height:37px;padding:0 10px}.header-search input{font-size:11px}.header-links{order:2;flex:0 0 auto;margin-left:0}.header-links>a{display:none!important}.hamburger{display:block;padding:0 3px;font-size:22px}}
