
:root{--navy:#03142f;--royal:#0b3f91;--blue:#1265d8;--gold:#e9bd55;--white:#fff;--muted:#aab9d0;--panel:#071d3d}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#020d20,#031832 55%,#020b18);color:white}a{color:inherit;text-decoration:none}header{position:sticky;top:0;z-index:10;background:rgba(2,13,32,.96);border-bottom:1px solid #214a82;backdrop-filter:blur(12px)}.top{max-width:1250px;margin:auto;display:flex;align-items:center;gap:28px;padding:10px 22px}.logo{width:115px;height:72px;object-fit:contain}.search{flex:1;position:relative}.search input{width:100%;padding:14px 18px;border-radius:30px;border:1px solid #3167a8;background:#071a37;color:white;font-size:15px}.nav{display:flex;gap:18px;font-weight:700;font-size:14px}.hero{max-width:1250px;margin:22px auto;padding:0 22px}.heroBox{min-height:310px;border-radius:24px;overflow:hidden;position:relative;background:radial-gradient(circle at 75% 30%,#1768cf 0,#082a5a 32%,#03142f 70%);border:1px solid #1b4c8c;display:grid;grid-template-columns:1.05fr 1fr}.heroText{padding:48px}.eyebrow{color:var(--gold);font-weight:900;letter-spacing:3px}.hero h1{font-size:54px;line-height:.95;margin:12px 0}.hero h1 span{color:var(--gold)}.hero p{color:#c4d2e6;max-width:500px}.btn{display:inline-block;background:linear-gradient(135deg,#f4d278,#c99127);color:#07152c;padding:13px 20px;border-radius:10px;font-weight:900;border:0;cursor:pointer}.heroImgs{display:flex;align-items:center;justify-content:center;gap:-20px;padding:20px}.heroImgs img{width:31%;max-height:270px;object-fit:contain;filter:drop-shadow(0 18px 20px #0009)}.wrap{max-width:1250px;margin:auto;padding:10px 22px 50px}.sectionHead{display:flex;align-items:end;justify-content:space-between;margin:30px 0 15px}.sectionHead h2{font-size:30px;margin:0}.gold{color:var(--gold)}.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:11px 16px;border:1px solid #23518a;background:#071d3d;border-radius:12px;cursor:pointer;font-weight:700}.chip.active,.chip:hover{border-color:var(--gold);color:var(--gold)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;color:#07152c;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #0005;cursor:pointer;transition:.2s}.card:hover{transform:translateY(-4px)}.cardImg{height:270px;background:#f3f6fa;display:flex;align-items:center;justify-content:center}.cardImg img{width:100%;height:100%;object-fit:contain}.cardBody{padding:15px}.tag{font-size:12px;color:#53709a;font-weight:800;text-transform:uppercase}.card h3{font-size:16px;margin:6px 0 4px}.card small{color:#58708f}.empty{text-align:center;color:#aab9d0;padding:50px}.modal{display:none;position:fixed;inset:0;background:#000b;z-index:50;padding:24px;overflow:auto}.modal.open{display:block}.modalBox{max-width:1050px;margin:30px auto;background:#061a37;border:1px solid #2a5b98;border-radius:22px;padding:22px;position:relative}.close{position:absolute;right:18px;top:14px;font-size:30px;cursor:pointer}.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}.mainImg{background:white;border-radius:15px;height:520px;width:100%;object-fit:contain}.thumbs{display:flex;gap:8px;margin-top:10px;overflow:auto}.thumbs img{width:72px;height:72px;object-fit:contain;background:white;border-radius:9px;cursor:pointer;border:2px solid transparent}.thumbs img:hover{border-color:var(--gold)}.detail h2{font-size:32px;margin:10px 0}.option{margin:20px 0}.option label{display:block;font-weight:800;margin-bottom:8px;color:#d9e5f5}.select,.textin{width:100%;padding:13px;border-radius:9px;border:1px solid #315a8b;background:#0a2449;color:white}.checks{display:flex;gap:10px;flex-wrap:wrap}.check{padding:10px 12px;background:#0a2449;border:1px solid #315a8b;border-radius:9px}.notice{background:#0b2a55;padding:13px;border-radius:10px;color:#bcd0e9;font-size:13px}.footer{text-align:center;padding:28px;color:#7890ae;border-top:1px solid #173b69}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.nav{display:none}.heroBox{grid-template-columns:1fr}.heroImgs{display:none}.hero h1{font-size:43px}.detail{grid-template-columns:1fr}.mainImg{height:400px}}@media(max-width:520px){.top{padding:8px 12px}.logo{width:78px;height:58px}.hero,.wrap{padding-left:12px;padding-right:12px}.heroText{padding:30px 22px}.hero h1{font-size:37px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cardImg{height:190px}.cardBody{padding:11px}.card h3{font-size:14px}.sectionHead h2{font-size:25px}.mainImg{height:330px}.modal{padding:8px}.modalBox{margin:10px auto;padding:15px}.detail h2{font-size:25px}}
