/* Frame catalog hero only. Catalog controls and product cards keep their existing styles. */
.catalog-page--frames .frame-catalog-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(300px,22vw,310px);background:linear-gradient(90deg,#0a2855 0%,#16477f 50%,#dcecff 86%)}
.catalog-page--frames .frame-catalog-hero__inner{position:relative;display:grid;align-content:start;min-height:inherit;padding-top:30px;padding-bottom:70px}
.catalog-page--frames .frame-catalog-hero__inner::before{position:absolute;z-index:1;inset:0;content:'';pointer-events:none;background:linear-gradient(90deg,#0a2855 0%,#103568 34%,#16477fe8 47%,#16477f70 61%,transparent 78%)}
.frame-catalog-hero__copy{position:relative;z-index:2;width:min(60%,790px)}
.frame-catalog-hero__eyebrow{display:flex;align-items:center;gap:15px;width:min(335px,100%);margin:0 0 9px;color:#a8ccff;font-size:12px;font-weight:800;letter-spacing:.19em}
.frame-catalog-hero__eyebrow:after{content:'';flex:1;height:1px;background:#8fb9ee}
.frame-catalog-hero__copy h1{margin:0 0 9px;color:#fff;font-family:'Times New Roman',Georgia,serif;font-size:clamp(38px,3vw,50px);font-weight:700;letter-spacing:-.026em;line-height:1.05}
.frame-catalog-hero__copy h1 span{display:block;white-space:nowrap}
.frame-catalog-hero__copy h1 span+span{color:#a8ccff}
.frame-catalog-hero__description{max-width:450px;margin:0;color:#e3efff;font-size:clamp(16px,1.2vw,18px);line-height:1.5}
.frame-catalog-hero__visual{position:absolute;z-index:0;inset:0 0 0 auto;width:88%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
.frame-catalog-hero__visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 53%}
.frame-catalog-hero__visual img{object-position:var(--ddm-frame-desktop-x,55%) var(--ddm-frame-desktop-y,53%);scale:var(--ddm-frame-desktop-zoom,1)}
.frame-catalog-hero__brands{position:absolute;z-index:3;top:18px;right:0;width:min(35%,430px)}
.frame-catalog-hero__brands>p{display:flex;align-items:center;gap:12px;margin:0 0 5px;color:#123365;font-size:10px;font-weight:800;letter-spacing:.17em;white-space:nowrap}
.frame-catalog-hero__brands>p:after{content:'';flex:1;height:1px;background:#90b4dc}
.frame-catalog-hero__logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:8px}
.frame-catalog-hero__logos a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:42px;color:#213c64;text-align:center;text-decoration:none}
.frame-catalog-hero__logos img{display:block;width:auto;max-width:100%;height:auto;max-height:35px;object-fit:contain}
.frame-catalog-hero__logos [data-logo-slot="rayban_logo"] img{max-height:39px}
.frame-catalog-hero__logos [data-logo-slot="oakley_logo"] img{max-height:33px}
.frame-catalog-hero__logo-placeholder{display:block;width:47px;height:28px;border:1px dashed #a4bfda;border-radius:6px;background:#ffffff94}
.frame-catalog-hero__logos small{font-size:10px;font-weight:700;line-height:1.2}
.frame-catalog-hero__brands-more{display:inline-flex;align-items:center;gap:6px;margin-top:3px;color:#48668c;font-size:11px;text-decoration:none}
.frame-catalog-hero__shortcuts{position:absolute;z-index:3;bottom:16px;left:0;display:grid;grid-template-columns:2fr 1fr 1fr 1.25fr;align-items:center;width:min(670px,76%);min-height:56px;padding:4px 7px;border:1px solid #edf4fb;border-radius:100px;background:#fff;box-shadow:0 12px 28px #1f559522}
.frame-catalog-hero__shortcuts a{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0;min-height:44px;padding:0 9px;border-right:1px solid #e3edf8;color:#102b58;font-size:13px;font-weight:760;text-decoration:none;white-space:nowrap}
.frame-catalog-hero__shortcuts a:last-child{border-right:0}
.frame-catalog-hero__shortcuts a:hover{color:#1763f5}
.frame-catalog-hero__shortcuts svg{flex:0 0 26px;width:26px;height:26px;fill:none;stroke:#133c80;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frame-catalog-hero__shortcuts a:first-child svg{flex-basis:33px;width:33px}
.frame-catalog-hero__shortcuts a:first-child>span:last-child{color:#1763f5;font-size:23px;font-weight:400}
.catalog-page--frames .catalog-section--frames{padding-top:18px}
.catalog-page--frames .frame-catalog-hero--term-title{min-height:330px}
.catalog-page--frames .frame-catalog-hero--term-title .frame-catalog-hero__inner{padding-bottom:78px}
.frame-catalog-hero--term-title .frame-catalog-hero__copy h1{max-width:760px;font-size:clamp(32px,2.55vw,38px);line-height:1.14;overflow-wrap:normal}
@media(max-width:1199px){
  .catalog-page--frames .frame-catalog-hero{min-height:330px}
  .frame-catalog-hero__copy{width:63%}
  .frame-catalog-hero__copy h1{font-size:clamp(36px,4vw,49px)}
  .frame-catalog-hero__brands{width:39%}
  .frame-catalog-hero__shortcuts{width:min(670px,88%)}
}
@media(min-width:768px) and (max-width:999px){
  .catalog-page--frames .frame-catalog-hero{min-height:340px}
  .catalog-page--frames .frame-catalog-hero__inner{padding-top:40px;padding-bottom:78px}
  .frame-catalog-hero__copy{width:66%}
  .frame-catalog-hero__copy h1{font-size:clamp(32px,4.25vw,40px)}
  .frame-catalog-hero__brands{top:16px;width:38%}
  .frame-catalog-hero__visual{width:78%}
  .frame-catalog-hero__brands>p{font-size:9px}
  .frame-catalog-hero__logos{gap:5px}
  .frame-catalog-hero__shortcuts{bottom:14px;width:min(620px,91%);min-height:56px}
  .frame-catalog-hero__shortcuts a{gap:5px;padding:0 6px;font-size:11px}
}
@media(max-width:767px){
  .catalog-page--frames .frame-catalog-hero{min-height:0;background:#f0f7ff}
  .catalog-page--frames .frame-catalog-hero__inner::before{display:none}
  .catalog-page--frames .frame-catalog-hero--term-title{min-height:0}
  .catalog-page--frames .frame-catalog-hero--term-title .frame-catalog-hero__inner{padding-bottom:15px}
  .frame-catalog-hero--term-title .frame-catalog-hero__copy h1{font-size:clamp(29px,7vw,36px)}
  .catalog-page--frames .frame-catalog-hero__inner{display:flex;flex-direction:column;min-height:0;padding-top:16px;padding-bottom:15px}
  .frame-catalog-hero__copy{order:0;width:100%;padding:16px;border-radius:16px;background:linear-gradient(125deg,#0a2855,#16477f)}
  .frame-catalog-hero__eyebrow{width:100%;margin-bottom:8px;font-size:10px}
  .frame-catalog-hero__copy h1{margin-bottom:7px;font-size:clamp(31px,8.3vw,39px);line-height:1.08}
  .frame-catalog-hero__copy h1 span{white-space:normal}
  .frame-catalog-hero__description{font-size:13px;line-height:1.45}
  .frame-catalog-hero__description br{display:none}
  .frame-catalog-hero__visual{position:relative;order:1;inset:auto;width:100%;height:140px;margin:8px 0 5px;border-radius:0}
  .frame-catalog-hero__visual{-webkit-mask-image:none;mask-image:none}
  .frame-catalog-hero__visual img{width:128%;max-width:none;height:100%;object-fit:cover;object-position:center;transform:translateX(-20%)}
  .frame-catalog-hero__brands{position:relative;order:2;top:auto;right:auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 5px;width:100%;margin-bottom:5px}
  .frame-catalog-hero__brands>p{grid-column:1;margin-bottom:0;font-size:9px}
  .frame-catalog-hero__logos{grid-column:1/-1;grid-row:2;gap:5px}
  .frame-catalog-hero__logos a{min-height:30px}
  .frame-catalog-hero__logos img,.frame-catalog-hero__logos [data-logo-slot="rayban_logo"] img,.frame-catalog-hero__logos [data-logo-slot="oakley_logo"] img{max-height:27px}
  .frame-catalog-hero__brands-more{grid-column:2;grid-row:1;margin-top:0;font-size:10px;white-space:nowrap}
  .frame-catalog-hero__shortcuts{position:relative;order:3;bottom:auto;left:auto;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;min-height:0;padding:3px 1px;border-radius:15px;box-shadow:0 8px 22px #1f559518}
  .frame-catalog-hero__shortcuts a{display:grid;justify-items:center;align-content:center;gap:4px;min-height:52px;padding:4px 2px;font-size:10px;line-height:1.12;text-align:center;white-space:normal}
  .frame-catalog-hero__shortcuts svg,.frame-catalog-hero__shortcuts a:first-child svg{flex-basis:auto;width:27px;height:27px}
  .frame-catalog-hero__shortcuts a:first-child>span:last-child{display:none}
}
@media(max-width:767px){.frame-catalog-hero__visual img{object-position:var(--ddm-frame-mobile-x,50%) var(--ddm-frame-mobile-y,50%);scale:var(--ddm-frame-mobile-zoom,1)}}
@media(max-width:767px){
  .catalog-page--frames[data-catalog-root="gong-kinh"] .frame-catalog-hero{display:none}
}