/* Khung chung trang Đăng nhập 789club - Blue Gold */
.page-login{box-sizing:border-box;width:100%;max-width:100%;overflow-x:hidden;background:#08162B;color:#F3F8FF;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.65}
.page-login *,.page-login *::before,.page-login *::after{box-sizing:border-box}
.page-login a{text-decoration:none}
.page-login h1,.page-login h2,.page-login h3{color:#F3F8FF;margin:0 0 12px;line-height:1.3;letter-spacing:.2px}
.page-login p{margin:0 0 14px}

/* HERO: ảnh trên, chữ dưới */
.page-login__hero-section{width:100%;max-width:1200px;margin:0 auto;padding:10px 16px 28px;display:flex;flex-direction:column;gap:20px}
.page-login__hero-image-wrap{width:100%;border-radius:18px;overflow:hidden;border:1px solid #244D84;background:#10233F;box-shadow:0 12px 32px rgba(79,168,255,.18)}
.page-login__hero-image{display:block;width:100%;height:auto;object-fit:cover}
.page-login__hero-content{width:100%;max-width:900px;margin:0 auto;text-align:center}
.page-login__main-title{font-weight:800;font-size:clamp(1.35rem,2.2vw,2rem);color:#F3F8FF;margin-bottom:14px}
.page-login__hero-desc{color:#AFC4E8;font-size:1rem;max-width:820px;margin:0 auto 20px}
.page-login__hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;max-width:100%;overflow:hidden}

/* Nút */
.page-login__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:700;font-size:.98rem;line-height:1.35;border:1px solid transparent;cursor:pointer;text-align:center;max-width:100%;white-space:normal;word-wrap:break-word;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.page-login__btn--primary{background:linear-gradient(180deg,#2B73F6 0%,#1144A6 100%);color:#F3F8FF;border-color:#4FA8FF;box-shadow:0 6px 18px rgba(43,115,246,.35)}
.page-login__btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(79,168,255,.45)}
.page-login__btn--ghost{background:#10233F;color:#F3F8FF;border-color:#244D84}
.page-login__btn--ghost:hover{border-color:#4FA8FF;background:#132B4D}
.page-login__btn--gold{background:#F2C14E;color:#08162B;border-color:#F2C14E}
.page-login__btn--gold:hover{background:#ffd473}
.page-login__btn--full{width:100%}

/* FORM đăng nhập */
.page-login__form-section{width:100%;max-width:1200px;margin:0 auto;padding:10px 16px 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.page-login__form-wrap{background:#10233F;border:1px solid #244D84;border-radius:18px;padding:26px 22px;box-shadow:0 10px 28px rgba(8,22,43,.55)}
.page-login__form-title{font-size:1.35rem;margin-bottom:10px;color:#F3F8FF}
.page-login__form-note{color:#AFC4E8;font-size:.92rem;margin-bottom:18px}
.page-login__form{display:flex;flex-direction:column;gap:10px}
.page-login__label{color:#F3F8FF;font-weight:600;font-size:.92rem;margin-top:4px}
.page-login__input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #244D84;background:#08162B;color:#F3F8FF;font-size:1rem;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.page-login__input::placeholder{color:#7f97bd}
.page-login__input:focus{border-color:#4FA8FF;box-shadow:0 0 0 3px rgba(79,168,255,.22)}
.page-login__strength{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.page-login__strength-label{color:#AFC4E8;font-size:.85rem}
.page-login__strength-bar{flex:1 1 100px;height:8px;border-radius:6px;background:#1B3357;overflow:hidden;min-width:100px}
.page-login__strength-fill{display:block;height:100%;width:0;background:#F2C14E;transition:width .25s ease,background .25s ease}
.page-login__strength-text{color:#AFC4E8;font-size:.85rem;min-width:70px}
.page-login__hint{color:#F2C14E;font-size:.85rem;line-height:1.5;padding:10px 12px;border-left:3px solid #F2C14E;background:rgba(242,193,78,.08);border-radius:8px}
.page-login__form-links{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.page-login__text-link{color:#4FA8FF;font-weight:600;font-size:.92rem}
.page-login__text-link:hover{color:#F2C14E;text-decoration:underline}

/* Aside */
.page-login__form-aside{background:#10233F;border:1px solid #244D84;border-radius:18px;padding:26px 22px;box-shadow:0 10px 28px rgba(8,22,43,.55)}
.page-login__aside-title{font-size:1.2rem;margin-bottom:10px}
.page-login__aside-text{color:#AFC4E8;font-size:.95rem}
.page-login__aside-list{margin:0 0 18px;padding-left:20px;color:#F3F8FF}
.page-login__aside-list li{margin-bottom:8px;font-size:.93rem;line-height:1.55}
.page-login__aside-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:100%}

/* Section chung */
.page-login__guide-section,.page-login__security-section,.page-login__products-section,.page-login__troubleshoot-section,.page-login__download-section,.page-login__blog-section,.page-login__closing-section{width:100%;max-width:1100px;margin:0 auto;padding:26px 16px}
.page-login__section-title{font-size:clamp(1.2rem,1.9vw,1.6rem);margin-bottom:14px;color:#F3F8FF}
.page-login__subtitle{font-size:1.05rem;color:#4FA8FF;margin:18px 0 8px}
.page-login__p{color:#AFC4E8;font-size:.97rem;line-height:1.7}

/* Bảo mật */
.page-login__security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.page-login__security-card{background:#10233F;border:1px solid #244D84;border-radius:14px;padding:18px}
.page-login__card-title{font-size:1.02rem;color:#F2C14E;margin-bottom:8px}
.page-login__card-text{color:#AFC4E8;font-size:.92rem;margin:0}

/* Sản phẩm */
.page-login__products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.page-login__product-card{display:flex;flex-direction:column;background:#10233F;border:1px solid #244D84;border-radius:14px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.page-login__product-card:hover{transform:translateY(-3px);border-color:#4FA8FF;box-shadow:0 10px 24px rgba(79,168,255,.2)}
.page-login__product-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.page-login__product-name{padding:12px 12px 4px;color:#F3F8FF;font-weight:700;font-size:.98rem}
.page-login__product-desc{padding:0 12px 14px;color:#AFC4E8;font-size:.86rem;line-height:1.5}

/* Tải ứng dụng */
.page-login__download-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;width:100%;max-width:100%;overflow:hidden}

/* Blog */
.page-login__blog-track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.page-login__blog-card{flex:0 0 calc(25% - 12px);background:#10233F;border:1px solid #244D84;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.page-login__blog-link{display:block;color:inherit}
.page-login__blog-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.page-login__blog-title{padding:12px 12px 4px;font-size:.97rem;color:#F3F8FF;margin:0}
.page-login__blog-desc{padding:0 12px 14px;color:#AFC4E8;font-size:.85rem;line-height:1.5;margin:0}
.page-login__blog-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.page-login__blog-prev,.page-login__blog-next{width:46px;height:46px;border-radius:50%;border:1px solid #244D84;background:#10233F;color:#F3F8FF;font-size:1.3rem;line-height:1;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.page-login__blog-prev:hover,.page-login__blog-next:hover{background:#132B4D;border-color:#4FA8FF}

/* Kết */
.page-login__closing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;width:100%;max-width:100%;overflow:hidden}

/* Responsive tablet */
@media (max-width:1024px){
.page-login__form-section{grid-template-columns:minmax(0,1fr);gap:18px}
.page-login__products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-login__blog-card{flex-basis:calc(33.333% - 11px)}
}

/* Responsive mobile 768px */
@media (max-width:768px){
.page-login{max-width:100%;overflow-x:hidden}
.page-login img{max-width:100%!important;height:auto!important}
.page-login__hero-section{padding:10px 12px 22px;gap:16px}
.page-login__hero-content{text-align:left}
.page-login__main-title{font-size:1.28rem;line-height:1.35}
.page-login__hero-desc{font-size:.94rem;margin-left:0;margin-right:0}
.page-login__hero-actions,.page-login__download-actions,.page-login__closing-actions{flex-direction:column;align-items:stretch;width:100%;max-width:100%;overflow:hidden}
.page-login__btn{width:100%;max-width:100%;white-space:normal;word-wrap:break-word}
.page-login__form-section{grid-template-columns:minmax(0,1fr);padding:8px 12px 26px;gap:16px}
.page-login__form-wrap,.page-login__form-aside{padding:20px 16px}
.page-login__guide-section,.page-login__security-section,.page-login__products-section,.page-login__troubleshoot-section,.page-login__download-section,.page-login__blog-section,.page-login__closing-section{padding:22px 12px}
.page-login__security-grid{grid-template-columns:minmax(0,1fr)}
.page-login__products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.page-login__blog-track{overflow-x:auto}
.page-login__blog-card{flex:0 0 86%}
.page-login__blog-prev,.page-login__blog-next{width:44px;height:44px}
.page-login__strength-bar{min-width:88px}
}