/* KHO ẢNH — Guest homepage v5 hard override This stylesheet is intentionally loaded AFTER style.css so the public homepage cannot fall back to the legacy dashboard/guest skin. */ html,body{min-height:100%;} body.app-booting{visibility:hidden;} body.guest-mode{background:#f5f8ff!important;color:#26324a!important;} body.guest-mode #app{display:none!important;} body.guest-mode #guestHome{display:block!important;} body.guest-mode #guestHome .kh-shell{display:block!important;} /* Neutralise legacy guest/admin wrappers if they are ever reused. */ body.guest-mode .ghead,body.guest-mode .gwrap{display:none!important;} #guestHome{ --kh-blue1:#4b8ff7; --kh-blue2:#2f73d9; --kh-purple:#735ce7; --kh-purple2:#8b70ef; --kh-pink:#ef73b7; --kh-ink:#27334a; --kh-muted:#6e7b93; --kh-muted2:#9ba7b9; --kh-sky1:#eaf4ff; --kh-sky2:#f4f8ff; --kh-card:rgba(255,255,255,.94); --kh-line:#e2e9f4; --kh-shadow:0 10px 28px rgba(63,104,163,.11); --kh-shadow-lg:0 18px 40px rgba(63,104,163,.18); min-height:100vh; background: radial-gradient(700px 360px at 15% -5%,rgba(255,255,255,.9),transparent 65%), radial-gradient(650px 380px at 100% 25%,rgba(201,230,255,.65),transparent 66%), linear-gradient(180deg,#eef7ff 0%,#f7f9fc 30%,#f6f8fb 100%); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } #guestHome *,#guestHome *::before,#guestHome *::after{box-sizing:border-box;} #guestHome .kh-shell{width:100%;max-width:1180px;margin:0 auto;min-height:100vh;padding:0 0 110px;position:relative;overflow:hidden;} #guestHome .kh-hero{position:relative;min-height:210px;padding:28px 32px 88px;overflow:hidden;border-radius:0 0 34px 34px;background: radial-gradient(420px 180px at 20% 5%,rgba(255,230,183,.72),transparent 68%), radial-gradient(500px 220px at 78% 8%,rgba(255,255,255,.30),transparent 68%), linear-gradient(180deg,#72b7f5 0%,#5e9fe6 45%,#83b8e7 72%,#bcdcf2 100%); box-shadow:0 18px 42px rgba(77,143,211,.18);} #guestHome .kh-hero-clouds{position:absolute;inset:-20px -10px;opacity:.62;background: radial-gradient(90px 38px at 15% 35%,rgba(255,255,255,.42),transparent 70%), radial-gradient(130px 46px at 48% 18%,rgba(255,255,255,.35),transparent 70%), radial-gradient(120px 42px at 80% 34%,rgba(255,255,255,.30),transparent 70%);filter:blur(10px);animation:khClouds 14s ease-in-out infinite alternate;} @keyframes khClouds{from{transform:translateX(-12px)}to{transform:translateX(16px)}} #guestHome .kh-hero-art{position:absolute;right:20px;top:82px;width:118px;height:74px;z-index:1;pointer-events:none;opacity:.9;filter:drop-shadow(0 8px 16px rgba(20,40,90,.16));animation:khArtFloat 6s ease-in-out infinite;} #guestHome .kh-hero-art svg{width:100%;height:100%;display:block;} #guestHome .kh-hero-art .kh-spark{animation:khSparkle 2.6s ease-in-out infinite;transform-origin:center;} #guestHome .kh-hero-vine{position:absolute;left:0;bottom:-8px;width:76px;height:150px;z-index:1;pointer-events:none;opacity:.85;animation:khVineSway 7s ease-in-out infinite;transform-origin:bottom left;} #guestHome .kh-hero-vine svg{width:100%;height:100%;display:block;} #guestHome .kh-hero-vine .kh-spark{animation:khSparkle 2.6s ease-in-out infinite;transform-origin:center;} @keyframes khArtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes khVineSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(1.6deg)}} @keyframes khSparkle{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}} #guestHome .kh-search-vine .kh-spark{animation:khSparkle 2.4s ease-in-out infinite;transform-origin:center;} #guestHome .kh-hero-butterfly{position:absolute;left:38%;top:2px;width:34px;height:26px;z-index:1;pointer-events:none;animation:khButterflyDrift 8s ease-in-out infinite;} #guestHome .kh-hero-butterfly svg{width:100%;height:100%;display:block;} #guestHome .kh-hero-butterfly .kh-wing{transform-origin:20px 15px;animation:khFlap .55s ease-in-out infinite alternate;} #guestHome .kh-hero-butterfly .kh-wing-r{animation-delay:.05s;} @keyframes khFlap{0%{transform:scaleX(1)}100%{transform:scaleX(.55)}} @keyframes khButterflyDrift{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(14px,10px) rotate(6deg)}50%{transform:translate(4px,20px) rotate(-4deg)}75%{transform:translate(-10px,10px) rotate(4deg)}100%{transform:translate(0,0) rotate(0deg)}} #guestHome .kh-hero-birds{position:absolute;left:0;right:0;top:0;height:100%;z-index:1;pointer-events:none;} #guestHome .kh-bird{position:absolute;display:block;} #guestHome .kh-bird-a{width:26px;height:13px;top:46%;left:30%;opacity:.9;animation:khBirdFlyA 9s linear infinite,khBirdFlap .5s ease-in-out infinite alternate;} #guestHome .kh-bird-b{width:19px;height:10px;top:34%;left:44%;opacity:.75;animation:khBirdFlyB 11s linear infinite,khBirdFlap .42s ease-in-out infinite alternate;} @keyframes khBirdFlap{0%{transform:scaleY(1)}100%{transform:scaleY(.55)}} @keyframes khBirdFlyA{0%{margin-left:0;margin-top:0}25%{margin-left:22px;margin-top:-10px}50%{margin-left:44px;margin-top:2px}75%{margin-left:22px;margin-top:10px}100%{margin-left:0;margin-top:0}} @keyframes khBirdFlyB{0%{margin-left:0;margin-top:0}30%{margin-left:-18px;margin-top:8px}60%{margin-left:-34px;margin-top:-6px}100%{margin-left:0;margin-top:0}} #guestHome .kh-hero-top{position:relative;z-index:2;display:flex;align-items:center;gap:14px;} #guestHome .kh-brand{display:flex;align-items:center;gap:12px;min-width:0;} #guestHome .kh-brand-mark{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#448cf0,#5c62dc);box-shadow:0 12px 24px rgba(46,95,202,.27);animation:khFloat 4s ease-in-out infinite;} @keyframes khFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} #guestHome .kh-brand-title{font-size:24px;font-weight:850;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(30,72,125,.16);} #guestHome .kh-brand-sub{font-size:13px;font-weight:650;color:rgba(239,248,255,.9);margin-top:2px;} #guestHome .kh-hero-actions{margin-left:auto;display:flex;gap:9px;} #guestHome .kh-iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(31,87,145,.24);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);transition:.2s;} #guestHome .kh-iconbtn:hover{transform:translateY(-2px);background:rgba(31,87,145,.38);} #guestHome .kh-search-wrap{position:relative;z-index:10;margin:-52px 28px 0;} #guestHome .kh-search-vine{position:absolute;left:10px;right:10px;bottom:-18px;height:30px;pointer-events:none;opacity:.85;z-index:1;} #guestHome .kh-search-vine svg{width:100%;height:100%;display:block;} #guestHome .kh-search-vine .kh-spark{animation:khSparkle 2.4s ease-in-out infinite;transform-origin:center;} #guestHome .kh-search{height:72px;display:flex;align-items:center;gap:12px;padding:9px 10px 9px 22px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:0 16px 38px rgba(71,112,166,.18);backdrop-filter:blur(18px);} #guestHome .kh-search>svg{width:22px;height:22px;color:#8d9aaf;flex:none;} #guestHome .kh-search input{flex:1;min-width:0;height:100%;padding:0;background:transparent!important;border:0!important;outline:0!important;font-size:20px;color:#2d3850;} #guestHome .kh-search input::placeholder{color:#9aa5b7;} #guestHome .kh-search-btn{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#4b94f2,#615ee0);box-shadow:0 10px 22px rgba(67,107,218,.25);transition:.2s;} #guestHome .kh-search-btn:hover{transform:translateY(-2px) scale(1.02);} #guestHome .kh-search-clear{border:0;background:none;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--kh-muted2);font-size:15px;cursor:pointer;} #guestHome .kh-search-clear:hover{background:#f0f4fa;color:var(--kh-ink);} #guestHome .kh-body{position:relative;z-index:1;padding:26px 28px 0;} #guestHome .kh-banner{position:relative;min-height:158px;display:flex;align-items:center;gap:18px;padding:26px 190px 26px 26px;margin-bottom:32px;border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#445fe0,#2f8de6 55%,#4b9be8);box-shadow:0 18px 34px rgba(61,104,220,.19);transition:transform .25s,box-shadow .25s;} #guestHome .kh-banner:hover{transform:translateY(-3px);box-shadow:0 24px 42px rgba(61,104,220,.24);} #guestHome .kh-banner-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#ff86bb,#a47af0);box-shadow:0 10px 24px rgba(50,70,180,.18);} #guestHome .kh-banner-title{font-size:21px;font-weight:850;line-height:1.18;} #guestHome .kh-banner-sub{margin-top:8px;font-size:13px;color:rgba(239,246,255,.86);} #guestHome .kh-banner-art{position:absolute;right:38px;top:50%;transform:translateY(-50%);width:135px;height:135px;} #guestHome .kh-banner-btn{position:absolute;right:24px;bottom:18px;display:inline-flex;align-items:center;gap:5px;padding:10px 15px;border-radius:99px;background:#fff;color:#3b70c7;font-weight:800;font-size:12px;box-shadow:0 7px 18px rgba(0,0,0,.10);} #guestHome .kh-section{margin-bottom:38px;} #guestHome .kh-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:17px;} #guestHome .kh-section-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#ff9361,#ff4f75);box-shadow:0 8px 18px rgba(255,90,105,.20);font-size:21px;} #guestHome .kh-section-icon-blue{background:linear-gradient(145deg,#4b94f3,#665fe4);box-shadow:0 8px 18px rgba(70,104,220,.22);} #guestHome .kh-section-titles{flex:1;min-width:0;} #guestHome .kh-section-titles h2{margin:0;color:var(--kh-ink);font-size:22px;font-weight:850;letter-spacing:-.02em;} #guestHome .kh-section-titles p{margin:4px 0 0;color:var(--kh-muted);font-size:13px;} #guestHome .kh-more{display:inline-flex;align-items:center;gap:4px;color:#3979d5;font-size:13px;font-weight:800;white-space:nowrap;padding:8px 10px;border-radius:12px;background:none;border:0;} #guestHome .kh-more:hover{background:#eaf2ff;} #guestHome .kh-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} #guestHome .kh-photo-card{background:var(--kh-card);border:1px solid rgba(224,231,242,.9);border-radius:21px;overflow:hidden;box-shadow:var(--kh-shadow);transition:transform .22s,box-shadow .22s;} #guestHome .kh-photo-card:hover{transform:translateY(-5px);box-shadow:var(--kh-shadow-lg);} #guestHome .kh-photo-pic{height:190px;position:relative;overflow:hidden;background:#edf3fb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 0 2px rgba(20,50,100,.06);transition:box-shadow .3s;} #guestHome .kh-photo-card:hover .kh-photo-pic{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),inset 0 0 0 2.5px rgba(57,121,213,.18);} #guestHome .kh-photo-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,filter .35s;image-rendering:-webkit-optimize-contrast;filter:saturate(1.12) contrast(1.08) brightness(1.02) drop-shadow(0 0 0.4px rgba(0,0,0,.35));} #guestHome .kh-photo-card:hover .kh-photo-pic img{transform:scale(1.055);filter:saturate(1.18) contrast(1.12) brightness(1.03) drop-shadow(0 0 0.5px rgba(0,0,0,.4));} #guestHome .kh-photo-info{display:flex;align-items:center;gap:8px;padding:12px 12px 3px;} #guestHome .kh-photo-folder{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:none;background:#eaf2ff;} #guestHome .kh-photo-meta{flex:1;min-width:0;} #guestHome .kh-photo-dots{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--kh-muted2);} #guestHome .kh-photo-dots svg{width:15px;height:15px;} #guestHome .kh-photo-dots:hover{background:#f0f4fa;color:var(--kh-ink);} #guestHome .kh-photo-album{font-size:13px;font-weight:800;color:var(--kh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #guestHome .kh-photo-date{font-size:10.5px;color:var(--kh-muted2);margin-top:2px;} #guestHome .kh-photo-stats{display:flex;align-items:center;gap:8px;padding:7px 12px 12px;} #guestHome .kh-photo-like,#guestHome .kh-photo-views,#guestHome .kh-photo-dl{display:flex;align-items:center;gap:4px;color:var(--kh-muted2);font-size:11px;font-weight:800;} #guestHome .kh-photo-like svg,#guestHome .kh-photo-views svg,#guestHome .kh-photo-dl svg{width:15px;height:15px;flex:none;} #guestHome .kh-photo-like{border:0;background:none;border-radius:8px;padding:4px 5px;cursor:pointer;} #guestHome .kh-photo-like:hover{background:#f0f4fa;} #guestHome .kh-photo-like.liked{color:#ff4f72;} #guestHome .kh-photo-views{flex:1;} #guestHome .kh-photo-dl{border:1px solid var(--kh-line);border-radius:99px;padding:6px 9px;background:#fff;} #guestHome .kh-album-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;} #guestHome .kh-album-card{display:block;min-width:0;border-radius:24px;overflow:hidden;box-shadow:var(--kh-shadow);transition:transform .22s,box-shadow .22s;} #guestHome .kh-album-card:hover{transform:translateY(-4px);box-shadow:var(--kh-shadow-lg);} #guestHome .kh-album-cover{height:230px;position:relative;background:#e9f1fa center/cover no-repeat;overflow:hidden;transition:filter .4s,box-shadow .3s;image-rendering:-webkit-optimize-contrast;filter:saturate(1.14) contrast(1.1) brightness(1.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 0 2px rgba(20,50,100,.06);} #guestHome .kh-album-card:hover .kh-album-cover{filter:saturate(1.2) contrast(1.14) brightness(1.03);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),inset 0 0 0 2.5px rgba(57,121,213,.2);} #guestHome .kh-album-cover img,#guestHome .kh-album-cover .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:grid;place-items:center;} #guestHome .kh-album-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,21,43,.76),rgba(8,21,43,.04) 62%,transparent 78%);} #guestHome .kh-album-overlay{position:absolute;z-index:3;left:18px;right:18px;bottom:16px;display:flex;align-items:center;gap:11px;} #guestHome .kh-album-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);} #guestHome .kh-album-text{flex:1;min-width:0;} #guestHome .kh-album-name{color:#fff;font-weight:850;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #guestHome .kh-album-meta{color:rgba(239,246,255,.86);font-size:11.5px;margin-top:3px;} #guestHome .kh-album-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.27);} #guestHome .kh-albums-deco{margin-top:14px;padding:8px 4px;display:flex;justify-content:space-between;align-items:center;} #guestHome .kh-deco-text{font-family:Georgia,serif;font-style:italic;color:#3979d5;font-size:19px;} #guestHome .kh-albums-deco>svg{width:40px;height:40px;color:#3979d5;flex:none;} #guestHome .kh-deco-text{display:inline-flex;align-items:center;gap:6px;} #guestHome .kh-deco-text svg{width:18px;height:18px;color:#3979d5;flex:none;} #guestHome .kh-leaf{position:absolute;z-index:0;pointer-events:none;width:120px;height:120px;} #guestHome .kh-leaf-tl{top:-12px;left:-16px;} #guestHome .kh-leaf-br{width:140px;height:140px;bottom:-16px;right:-18px;transform:rotate(180deg);} @media (max-width:900px){ #guestHome .kh-leaf{width:92px;height:92px;} #guestHome .kh-leaf-br{width:106px;height:106px;} } #guestHome .kh-bottomnav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;width:min(620px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-around;padding:8px 10px;background:rgba(255,255,255,.92);border:1px solid rgba(218,226,239,.95);border-radius:30px;box-shadow:0 16px 40px rgba(52,85,132,.17);backdrop-filter:blur(18px);} #guestHome .kh-nav-item{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:3px;padding:6px 5px;color:#8994a7;font-size:10px;font-weight:800;background:none;border:0;appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;text-decoration:none;} #guestHome .kh-nav-item.active{color:#3979d5;} #guestHome .kh-nav-item svg{width:21px;height:21px;} #guestHome .kh-nav-plus{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:-30px;background:linear-gradient(145deg,#4a97f5,#665ce1);border:5px solid #f8fbff;box-shadow:0 12px 26px rgba(62,111,221,.30);transition:.2s;} #guestHome .kh-nav-plus:hover{transform:translateY(-3px) scale(1.03);} #guestHome .kh-nav-badge{position:absolute;top:0;right:25%;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:#ff5273;color:#fff;font-size:9px;} @media(max-width:900px){ #guestHome .kh-shell{max-width:560px;} #guestHome .kh-hero{padding:18px 16px 78px;min-height:190px;border-radius:0 0 28px 28px;} #guestHome .kh-hero-art{width:92px;height:58px;top:68px;right:12px;} #guestHome .kh-hero-vine{width:60px;height:118px;} #guestHome .kh-brand-mark{width:48px;height:48px;border-radius:15px;} #guestHome .kh-brand-title{font-size:20px;} #guestHome .kh-brand-sub{font-size:12px;} #guestHome .kh-search-wrap{margin:-46px 16px 0;} #guestHome .kh-search-vine{height:24px;bottom:-15px;left:6px;right:6px;} #guestHome .kh-hero-butterfly{width:26px;height:20px;left:34%;} #guestHome .kh-bird-a{width:20px;height:10px;} #guestHome .kh-bird-b{width:15px;height:8px;} #guestHome .kh-search{height:64px;border-radius:22px;padding-left:18px;} #guestHome .kh-search input{font-size:17px;} #guestHome .kh-search-btn{width:48px;height:48px;border-radius:16px;} #guestHome .kh-body{padding:20px 16px 0;} #guestHome .kh-banner{min-height:142px;margin-bottom:28px;padding:20px 112px 20px 18px;border-radius:21px;} #guestHome .kh-banner-icon{width:54px;height:54px;border-radius:17px;} #guestHome .kh-banner-title{font-size:16px;} #guestHome .kh-banner-sub{font-size:11px;} #guestHome .kh-banner-art{width:84px;height:84px;right:8px;} #guestHome .kh-banner-btn{right:12px;bottom:12px;padding:8px 11px;font-size:10.5px;} #guestHome .kh-photo-grid{grid-template-columns:1fr 1fr;gap:11px;} #guestHome .kh-photo-pic{height:145px;} #guestHome .kh-section-titles h2{font-size:18px;} #guestHome .kh-section-titles p{font-size:11.5px;} #guestHome .kh-album-list{grid-template-columns:1fr;gap:14px;} #guestHome .kh-album-cover{height:190px;} #guestHome .kh-albums-deco{padding-bottom:0;} } @media(max-width:480px){ #guestHome .kh-hero-actions{gap:5px;} #guestHome .kh-iconbtn{width:36px;height:36px;} #guestHome .kh-hero-art{width:72px;height:46px;top:60px;right:8px;opacity:.8;} #guestHome .kh-hero-vine{width:48px;height:96px;opacity:.75;} #guestHome .kh-search{height:58px;border-radius:19px;} #guestHome .kh-search-vine{height:20px;bottom:-13px;opacity:.75;} #guestHome .kh-search input{font-size:16px;} #guestHome .kh-search-btn{width:44px;height:44px;border-radius:14px;} #guestHome .kh-banner{min-height:136px;} #guestHome .kh-photo-pic{height:128px;} #guestHome .kh-photo-info{padding:9px 9px 2px;} #guestHome .kh-photo-stats{padding:6px 9px 9px;} #guestHome .kh-photo-album{font-size:11.5px;} #guestHome .kh-photo-date{font-size:10px;} #guestHome .kh-photo-dl{padding:5px 7px;} #guestHome .kh-section{margin-bottom:28px;} #guestHome .kh-section-icon{width:34px;height:34px;border-radius:11px;font-size:17px;} #guestHome .kh-section-head{gap:9px;margin-bottom:12px;} #guestHome .kh-more{font-size:11px;padding:6px;} #guestHome .kh-album-cover{height:175px;} #guestHome .kh-deco-text{font-size:16px;} #guestHome .kh-bottomnav{width:calc(100% - 20px);bottom:10px;} } @media(prefers-reduced-motion:reduce){ #guestHome .kh-hero-clouds,#guestHome .kh-brand-mark{animation:none!important;} #guestHome .kh-banner,#guestHome .kh-photo-card,#guestHome .kh-album-card,#guestHome .kh-nav-plus{transition:none!important;} } /* ===== V6 motion + polish ===== */ #guestHome{isolation:isolate;} #guestHome .kh-shell:before,#guestHome .kh-shell:after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(36px);opacity:.48;animation:khOrb 12s ease-in-out infinite alternate} #guestHome .kh-shell:before{width:220px;height:220px;right:-110px;top:420px;background:rgba(112,142,255,.18)} #guestHome .kh-shell:after{width:180px;height:180px;left:-100px;top:780px;background:rgba(255,142,210,.14);animation-delay:-4s} @keyframes khOrb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18px,-12px,0) scale(1.08)}} #guestHome .kh-hero-clouds{animation:khCloudDrift 18s ease-in-out infinite alternate} @keyframes khCloudDrift{from{transform:translateX(-10px) scale(1)}to{transform:translateX(14px) scale(1.04)}} #guestHome .kh-brand-mark{animation:khFloat 4s ease-in-out infinite,khGlow 3.5s ease-in-out infinite} @keyframes khGlow{0%,100%{box-shadow:0 10px 22px rgba(40,80,200,.28)}50%{box-shadow:0 14px 30px rgba(72,113,230,.42)}} #guestHome .kh-search{transition:transform .25s,box-shadow .25s} #guestHome .kh-search:focus-within{transform:translateY(-2px);box-shadow:0 20px 44px rgba(71,112,166,.22)} #guestHome .kh-banner:before{content:"";position:absolute;inset:-80px auto auto -120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(3px);animation:khBannerGlow 8s ease-in-out infinite alternate} @keyframes khBannerGlow{to{transform:translate(130px,45px) scale(1.25)}} #guestHome .kh-banner-icon{animation:khIconFloat 4.2s ease-in-out infinite} @keyframes khIconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}} #guestHome .kh-photo-card,#guestHome .kh-album-card{will-change:transform} #guestHome .kh-photo-card{opacity:0;animation:khReveal .55s cubic-bezier(.2,.75,.2,1) forwards} #guestHome .kh-photo-card:nth-child(2){animation-delay:.05s}.kh-photo-card:nth-child(3){animation-delay:.1s}.kh-photo-card:nth-child(4){animation-delay:.15s} #guestHome .kh-album-card{opacity:0;animation:khReveal .6s cubic-bezier(.2,.75,.2,1) forwards} #guestHome .kh-album-card:nth-child(2){animation-delay:.08s}.kh-album-card:nth-child(3){animation-delay:.16s} @keyframes khReveal{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} #guestHome .kh-photo-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.22) 45%,transparent 70%);transform:translateX(-120%);transition:none;pointer-events:none} #guestHome .kh-photo-card:hover .kh-photo-pic:after{animation:khShimmer .8s ease} @keyframes khShimmer{to{transform:translateX(120%)}} #guestHome .kh-photo-like{transition:transform .18s,background .18s,color .18s} #guestHome .kh-photo-like:active{transform:scale(.86)} #guestHome .kh-photo-like.liked{animation:khLikePop .38s cubic-bezier(.2,1.5,.3,1)} @keyframes khLikePop{0%{transform:scale(.8)}55%{transform:scale(1.18)}100%{transform:scale(1)}} #guestHome .kh-more,#guestHome .kh-banner-btn,#guestHome .kh-photo-dl,#guestHome .kh-iconbtn{transition:transform .2s,box-shadow .2s,background .2s} #guestHome .kh-more:hover,#guestHome .kh-banner-btn:hover{transform:translateY(-2px)} #guestHome .kh-nav-plus{animation:khPlusFloat 4s ease-in-out infinite} @keyframes khPlusFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} #guestHome .kh-nav-badge{animation:khBadgePulse 2.8s ease-in-out infinite} @keyframes khBadgePulse{0%,78%,100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}88%{box-shadow:0 0 0 5px rgba(255,77,109,.12)}} @media(min-width:901px){ #guestHome .kh-shell{max-width:1180px} #guestHome .kh-body{padding-left:42px;padding-right:42px} #guestHome .kh-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #guestHome .kh-album-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #guestHome .kh-album-cover{height:250px} #guestHome .kh-bottomnav{max-width:560px} } @media(max-width:700px){ #guestHome .kh-photo-card{animation-duration:.45s} #guestHome .kh-search input{font-size:16px} } @media(prefers-reduced-motion:reduce){ #guestHome .kh-shell:before,#guestHome .kh-shell:after,#guestHome .kh-hero-clouds,#guestHome .kh-brand-mark,#guestHome .kh-banner-icon,#guestHome .kh-photo-card,#guestHome .kh-album-card,#guestHome .kh-nav-plus,#guestHome .kh-nav-badge{animation:none!important} #guestHome .kh-photo-card,#guestHome .kh-album-card{opacity:1!important} } /* ===== V7 performance + motion polish ===== */ #guestHome .kh-photo-card,#guestHome .kh-album-card{animation:none;opacity:1;transform:none;filter:none} #guestHome .kh-reveal{opacity:0;transform:translateY(18px) scale(.985);filter:blur(3px);transition:opacity .55s cubic-bezier(.2,.75,.2,1),transform .55s cubic-bezier(.2,.75,.2,1),filter .55s ease} #guestHome .kh-reveal.is-visible{opacity:1;transform:none;filter:none} #guestHome .kh-photo-pic.is-loading,#guestHome .kh-album-cover.is-loading{background:linear-gradient(110deg,#eef3fb 30%,#f8faff 45%,#eef3fb 60%);background-size:200% 100%;animation:khSkeleton 1.25s linear infinite} @keyframes khSkeleton{to{background-position:-200% 0}} #guestHome img{transition:opacity .35s ease,transform .55s cubic-bezier(.2,.75,.2,1)} #guestHome img.kh-img-loading{opacity:0} #guestHome .kh-photo-card:hover img{transform:scale(1.035)} #guestHome .kh-banner{isolation:isolate} #guestHome .kh-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.14) 45%,transparent 70%);transform:translateX(-120%);pointer-events:none;z-index:-1} #guestHome .kh-banner:hover:after{animation:khBannerShine 1s ease} @keyframes khBannerShine{to{transform:translateX(120%)}} @media(prefers-reduced-motion:reduce){#guestHome .kh-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}#guestHome .kh-banner:after{display:none}} /* ===== Dark mode (khThemeBtn) ===== */ html[data-theme="dark"] body.guest-mode{background:#0d1220!important;color:#dbe4f5!important;} html[data-theme="dark"] #guestHome{ --kh-ink:#eaf1ff; --kh-muted:#a6b2cc; --kh-muted2:#8894ac; --kh-card:rgba(27,34,53,.92); --kh-line:#31405c; --kh-shadow:0 10px 26px rgba(0,0,0,.36); --kh-shadow-lg:0 18px 38px rgba(0,0,0,.48); background: radial-gradient(700px 360px at 15% -5%,rgba(255,255,255,.04),transparent 65%), radial-gradient(650px 380px at 100% 25%,rgba(80,120,210,.16),transparent 66%), linear-gradient(180deg,#0f1526 0%,#0d1220 30%,#0c101d 100%); } html[data-theme="dark"] #guestHome .kh-search{background:rgba(22,28,44,.92);border-color:rgba(255,255,255,.08);} html[data-theme="dark"] #guestHome .kh-search input{color:#eaf1ff;} html[data-theme="dark"] #guestHome .kh-search input::placeholder{color:#7c88a3;} html[data-theme="dark"] #guestHome .kh-search>svg{color:#8894ac;} html[data-theme="dark"] #guestHome .kh-photo-pic, html[data-theme="dark"] #guestHome .kh-album-cover{background-color:#161c2c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 0 0 2px rgba(0,0,0,.25);} html[data-theme="dark"] #guestHome .kh-photo-card:hover .kh-photo-pic, html[data-theme="dark"] #guestHome .kh-album-card:hover .kh-album-cover{box-shadow:inset 0 0 0 1.5px rgba(127,178,255,.4),inset 0 0 0 2.5px rgba(0,0,0,.3);} html[data-theme="dark"] #guestHome .kh-photo-dl{background:#1b2236;border-color:var(--kh-line);color:#c7d0e6;} html[data-theme="dark"] #guestHome .kh-photo-folder{background:#20283e;} html[data-theme="dark"] #guestHome .kh-more:hover{background:#1b2236;} html[data-theme="dark"] #guestHome .kh-photo-like:hover{background:#1b2236;} html[data-theme="dark"] #guestHome .kh-shell:before{background:rgba(90,120,255,.14);} html[data-theme="dark"] #guestHome .kh-shell:after{background:rgba(255,120,200,.10);} /* FIX: .kh-bottomnav là thanh điều hướng position:fixed nhưng trước đó không có bản dark => luôn trắng sáng, vỡ khung khi cả trang đã tối. */ html[data-theme="dark"] #guestHome .kh-bottomnav{background:rgba(19,25,41,.90);border-color:rgba(255,255,255,.08);box-shadow:0 16px 40px rgba(0,0,0,.42);} html[data-theme="dark"] #guestHome .kh-nav-item{color:#8896ae;} html[data-theme="dark"] #guestHome .kh-nav-item.active{color:#7fb2ff;} html[data-theme="dark"] #guestHome .kh-nav-plus{border-color:#151c2d;} html[data-theme="dark"] #guestHome .kh-search-clear:hover{background:#1b2236;color:#eaf1ff;} html[data-theme="dark"] #guestHome .kh-photo-dots:hover{background:#1b2236;color:#eaf1ff;} /* FIX v2: viền thẻ ảnh/album vẫn dùng màu sáng (rgba trắng-xanh nhạt) dù nền thẻ đã đổi tối => nổi thành viền sáng lạc quẻ quanh mỗi ảnh khi bật dark mode. */ html[data-theme="dark"] #guestHome .kh-photo-card{border-color:rgba(255,255,255,.08);} html[data-theme="dark"] #guestHome .kh-album-icon{border-color:rgba(255,255,255,.16);} /* FIX v3: header "Kho Ảnh" (kh-hero) và banner "Cùng lưu giữ những khoảnh khắc đẹp" (kh-banner) vẫn giữ nguyên gradient xanh da trời sáng dù đã bật dark mode => hai khối này bị "sáng lạc quẻ" giữa toàn bộ nền tối. Đổi sang gradient tối đồng bộ với bảng màu dark ở trên. */ html[data-theme="dark"] #guestHome .kh-hero{ background: radial-gradient(420px 180px at 20% 5%,rgba(120,95,60,.22),transparent 68%), radial-gradient(500px 220px at 78% 8%,rgba(90,120,210,.16),transparent 68%), linear-gradient(180deg,#1a2340 0%,#141b30 45%,#101728 78%,#0d1220 100%); box-shadow:0 18px 42px rgba(0,0,0,.42); } html[data-theme="dark"] #guestHome .kh-hero-clouds{ opacity:.28; background: radial-gradient(90px 38px at 15% 35%,rgba(255,255,255,.10),transparent 70%), radial-gradient(130px 46px at 48% 18%,rgba(255,255,255,.08),transparent 70%), radial-gradient(120px 42px at 80% 34%,rgba(255,255,255,.07),transparent 70%); } html[data-theme="dark"] #guestHome .kh-brand-mark{background:linear-gradient(145deg,#2f4ea8,#3d3f9e);box-shadow:0 12px 24px rgba(0,0,0,.4);} html[data-theme="dark"] #guestHome .kh-brand-title{text-shadow:0 2px 10px rgba(0,0,0,.4);} html[data-theme="dark"] #guestHome .kh-iconbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);} html[data-theme="dark"] #guestHome .kh-iconbtn:hover{background:rgba(255,255,255,.12);} html[data-theme="dark"] #guestHome .kh-search-btn{background:linear-gradient(145deg,#3a5fc8,#4a3fb8);box-shadow:0 10px 22px rgba(0,0,0,.4);} html[data-theme="dark"] #guestHome .kh-hero-art{opacity:1;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)) brightness(1.08);} html[data-theme="dark"] #guestHome .kh-hero-vine{opacity:.95;} html[data-theme="dark"] #guestHome .kh-search-vine{opacity:1;} html[data-theme="dark"] #guestHome .kh-hero-butterfly, html[data-theme="dark"] #guestHome .kh-hero-birds{opacity:1;filter:brightness(1.1);} html[data-theme="dark"] #guestHome .kh-banner{ background:linear-gradient(120deg,#1c2a56,#1a3560 55%,#213f66); box-shadow:0 18px 34px rgba(0,0,0,.45); color:#e7edff; } html[data-theme="dark"] #guestHome .kh-banner:hover{box-shadow:0 24px 42px rgba(0,0,0,.55);} html[data-theme="dark"] #guestHome .kh-banner-icon{background:linear-gradient(145deg,#a4568a,#5f4bb0);box-shadow:0 10px 24px rgba(0,0,0,.4);} html[data-theme="dark"] #guestHome .kh-banner-sub{color:rgba(220,229,255,.72);} html[data-theme="dark"] #guestHome .kh-banner-btn{background:#141a2c;color:#8fb4ff;box-shadow:0 7px 18px rgba(0,0,0,.35);} html[data-theme="dark"] #guestHome .kh-banner:before{background:rgba(255,255,255,.05);} html[data-theme="dark"] #guestHome .kh-albums-deco{color:#8894ac;} html[data-theme="dark"] #guestHome .kh-deco-text{color:#a6b2cc;}