/* DoMist — Võng mèo thủ công */

/* ===== Reset (Tailwind preflight) ===== */
@layer base{
  *,:after,:before{
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::backdrop{
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button{
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,:host{
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr{
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]){
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,h2,h3,h4,h5,h6{
    font-size:inherit;
    font-weight:inherit
  }
  a{
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,strong{
    font-weight:bolder
  }
  code,kbd,samp,pre{
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small{
    font-size:80%
  }
  sub,sup{
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub{
    bottom:-.25em
  }
  sup{
    top:-.5em
  }
  table{
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring{
    outline:auto
  }
  progress{
    vertical-align:baseline
  }
  summary{
    display:list-item
  }
  ol,ul,menu{
    list-style:none
  }
  img,svg,video,canvas,audio,iframe,embed,object{
    vertical-align:middle;
    display:block
  }
  img,video{
    max-width:100%;
    height:auto
  }
  button,input,select,optgroup,textarea{
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button{
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup{
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option{
    padding-inline-start:20px
  }
  ::file-selector-button{
    margin-inline-end:4px
  }
  ::placeholder{
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){
    ::placeholder{
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)){
      ::placeholder{
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea{
    resize:vertical
  }
  ::-webkit-search-decoration{
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value{
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit{
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper{
    padding:0
  }
  ::-webkit-datetime-edit{
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field{
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field{
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator{
    line-height:1
  }
  :-moz-ui-invalid{
    box-shadow:none
  }
  button,input:where([type=button],[type=reset],[type=submit]){
    -webkit-appearance:button;
    appearance:button
  }
  ::file-selector-button{
    -webkit-appearance:button;
    appearance:button
  }
  ::-webkit-inner-spin-button{
    height:auto
  }
  ::-webkit-outer-spin-button{
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])){
    display:none!important
  }
}

/* ===== Giao diện ===== */
:root{
  --background:#fffaf3;
  --foreground:#2f211b;
  --primary:#ad462c;
  --primary-foreground:white;
  --popover:#fff;
  --popover-foreground:#2f211b;
  --border:#dfd6cc;
  --input:#dfd6cc;
  --ring:#ad462c;
  --radius:.6rem;
  --font-serif:"Gelasio",Georgia,"Times New Roman",serif;
  --font-sans:"Arimo",Arial,"Helvetica Neue",sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body{
  background:var(--background);
  color:var(--foreground);
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6
}
a{
  color:inherit;
  text-decoration:none
}
button,input{
  font:inherit
}
button,a,input{
  touch-action:manipulation
}
button,a{
  -webkit-tap-highlight-color:transparent
}
:is(a:focus-visible,button:focus-visible,input:focus-visible){
  outline-offset:4px;
  outline:3px solid #ad462c
}
button{
  cursor:pointer
}
button:disabled{
  cursor:default;
  opacity:.6
}
header{
  justify-content:space-between;
  align-items:center;
  max-width:1360px;
  margin:auto;
  padding:24px 5%;
  display:flex
}
.brand{
  letter-spacing:-1px;
  font-family:var(--font-serif);
  font-size:32px;
  font-weight:700;
  line-height:1.1
}
.brand span{
  letter-spacing:2px;
  margin-top:8px;
  font-family:var(--font-sans);
  font-size:10px;
  font-weight:400;
  display:block
}
nav{
  align-items:center;
  gap:32px;
  font-size:14px;
  display:flex
}
.navcta{
  color:#943b25;
  border:1px solid #ad462c;
  border-radius:5px;
  padding:10px 20px
}
.hero{
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  max-width:1360px;
  margin:auto;
  padding:18px 5% 48px;
  display:grid
}
.eyebrow{
  letter-spacing:1.8px;
  color:#93452e;
  margin:0 0 20px;
  font-size:12px;
  font-weight:700
}
h1,h2,h3{
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  line-height:1.15
}
h1{
  letter-spacing:-1.8px;
  font-size:clamp(38px,4.6vw,65px)
}
h1 em{
  color:#ad462c;
  font-weight:400
}
.lead{
  color:#66564b;
  max-width:460px;
  margin:25px 0 28px;
  line-height:1.75
}
.button{
  color:#fff;
  background:#ad462c;
  border:0;
  border-radius:5px;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:14px 26px;
  font-size:16px;
  font-weight:700;
  transition:background .2s;
  display:inline-flex
}
.button:hover{
  background:#8c3320
}
.hero-trust{
  color:#655449;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-size:14px;
  display:flex
}
.hero-image{
  border-radius:180px 180px 8px 8px;
  height:620px;
  position:relative;
  overflow:hidden
}
.hero-image img{
  object-fit:cover;
  object-position:center 62%;
  width:100%;
  height:100%
}
.image-caption{
  color:#fff;
  text-shadow:0 1px 8px #000;
  font-family:var(--font-serif);
  font-size:23px;
  position:absolute;
  bottom:40px;
  left:25px;
  right:25px
}
.image-note{
  color:#fff;
  text-shadow:0 1px 5px #000;
  font-size:12px;
  position:absolute;
  bottom:16px;
  left:25px
}
.benefits{
  border-top:1px solid #e1d8cb;
  border-bottom:1px solid #e1d8cb;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  max-width:1360px;
  margin:auto;
  padding:25px 5%;
  display:grid
}
.benefits>div{
  align-items:center;
  gap:14px;
  display:flex
}
.benefits svg{
  color:#ad462c;
  flex-shrink:0
}
.benefits strong{
  font-size:15px;
  display:block
}
.benefits small{
  color:#73655a;
  font-size:14px
}
.collection{
  max-width:1360px;
  margin:auto;
  padding:65px 5% 48px
}
.section-top{
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:30px;
  display:flex
}
h2{
  letter-spacing:-.7px;
  font-size:clamp(30px,3.2vw,44px)
}
.section-top>p{
  color:#75665b;
  font-size:15px
}
.models{
  grid-template-columns:repeat(4,1fr);
  gap:17px;
  display:grid
}
.model{
  background:#f5eee4;
  border:1px solid #ddd2c4;
  border-radius:8px;
  padding:25px 21px
}
.model.selected{
  background:#fae9dd;
  border-color:#ad462c
}
.model-top{
  color:#995d43;
  letter-spacing:2px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
  font-size:11px;
  display:flex
}
.model h3{
  font-size:28px
}
.model p{
  color:#716255;
  min-height:50px;
  margin-top:13px;
  font-size:15px
}
.model-meta{
  color:#6d5b4e;
  margin:28px 0 15px;
  font-size:12px
}
.model button{
  color:#703c29;
  background:0 0;
  border:1px solid #bd9e86;
  border-radius:4px;
  justify-content:center;
  align-items:center;
  gap:7px;
  width:100%;
  padding:10px;
  display:flex
}
.model.selected button{
  color:#fff;
  background:#ad462c;
  border-color:#ad462c
}
.collection-note{
  color:#76665a;
  text-align:center;
  margin:20px 0 0;
  font-size:14px
}
.story{
  grid-template-columns:.8fr 1fr;
  align-items:center;
  gap:60px;
  max-width:1224px;
  margin:0 auto 60px;
  padding:0 3%;
  display:grid
}
.story>img{
  object-fit:cover;
  object-position:center 70%;
  border-radius:8px;
  width:100%;
  height:360px
}
.story p:not(.eyebrow){
  color:#716053;
  max-width:510px
}
.signature{
  color:#ad462c;
  align-items:center;
  gap:10px;
  font-family:var(--font-serif);
  font-size:24px;
  font-style:italic;
  display:flex
}
.order{
  background:#ede0cf;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:70px;
  padding:65px max(5%,50vw - 612px);
  display:grid
}
.order-copy>p:not(.eyebrow){
  color:#6d5a4b;
  max-width:440px
}
.promise{
  color:#6e3b29;
  border-top:1px solid #cbbba6;
  gap:15px;
  margin:28px 0;
  padding-top:24px;
  display:flex
}
.promise svg{
  flex-shrink:0
}
.promise p{
  margin:7px 0;
  font-size:14px
}
.order-copy>small{
  color:#716050;
  max-width:430px;
  font-size:13px;
  display:block
}
form{
  background:#fffaf4;
  border-radius:10px;
  padding:30px;
  box-shadow:0 8px 35px #5239180d
}
form h3{
  margin-bottom:24px;
  font-size:26px
}
label{
  margin-bottom:16px;
  font-size:14px;
  font-weight:700;
  display:block
}
label>span{
  color:#716255;
  font-size:12px;
  font-weight:400
}
input{
  background:#fff;
  border:1px solid #d8cbbb;
  border-radius:5px;
  width:100%;
  min-width:0;
  margin-top:7px;
  padding:12px;
  font-size:16px;
  display:block
}
.fields{
  grid-template-columns:1fr 1fr;
  gap:15px;
  display:grid
}
.quantity{
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  font-size:14px;
  font-weight:700;
  display:flex
}
.quantity>div{
  background:#fff;
  border:1px solid #d8cbbb;
  border-radius:4px;
  align-items:center;
  display:flex
}
.quantity button{
  background:0 0;
  border:0;
  padding:12px;
  display:flex
}
.quantity output{
  text-align:center;
  width:35px
}
.submit{
  width:100%
}
.privacy{
  color:#796c60;
  text-align:center;
  margin:10px 0 0;
  font-size:12px
}
.form-message{
  color:#a62e21;
  margin:12px 0 0;
  font-size:14px
}
.form-message:empty{
  display:none
}
.form-message.success{
  color:#36513a
}
footer{
  justify-content:space-between;
  align-items:center;
  gap:20px;
  max-width:1360px;
  margin:auto;
  padding:30px 5%;
  display:flex
}
footer p{
  color:#746253;
  font-size:14px
}
footer>span{
  letter-spacing:2px;
  color:#8d6e57;
  font-size:11px
}
.mobile-cta{
  display:none
}
@media (max-width:900px){
  .hero{
    gap:30px
  }
  .hero-image{
    height:520px
  }
  .models{
    grid-template-columns:repeat(2,1fr)
  }
  .order{
    gap:35px
  }
  .benefits{
    gap:20px
  }
  .benefits>div{
    align-items:start
  }
  .story{
    gap:30px
  }
  nav{
    gap:20px
  }
  nav>a:nth-child(2){
    display:none
  }
}
@media (max-width:600px){
  header{
    padding:20px 6%
  }
  .brand{
    font-size:28px
  }
  nav>a:first-child{
    display:none
  }
  .navcta{
    padding:9px 14px
  }
  .hero{
    grid-template-columns:1fr;
    gap:26px;
    padding:15px 6% 30px
  }
  .hero-copy{
    padding-top:10px
  }
  h1{
    letter-spacing:-1px;
    font-size:43px
  }
  .lead{
    margin:20px 0;
    font-size:16px
  }
  .hero-image{
    border-radius:130px 130px 6px 6px;
    height:440px
  }
  .hero .button{
    width:100%
  }
  .eyebrow{
    letter-spacing:1.3px;
    font-size:11px
  }
  .benefits{
    grid-template-columns:1fr;
    gap:22px;
    padding:25px 6%
  }
  .section-top{
    display:block
  }
  .section-top>p{
    margin-top:17px
  }
  .collection{
    padding:40px 6%
  }
  .models{
    gap:12px
  }
  .model{
    padding:18px 14px
  }
  .model-top{
    letter-spacing:1px;
    margin-bottom:25px;
    font-size:10px
  }
  .model h3{
    font-size:24px
  }
  .model p{
    min-height:70px;
    font-size:14px
  }
  .model-meta{
    margin:20px 0 12px;
    font-size:12px
  }
  .model button{
    font-size:14px
  }
  .story{
    grid-template-columns:1fr;
    gap:26px;
    margin-bottom:40px;
    padding:0 6%
  }
  .story>img{
    height:280px
  }
  .order{
    grid-template-columns:1fr;
    gap:25px;
    padding:40px 6%
  }
  form{
    padding:23px 18px
  }
  .fields{
    grid-template-columns:1fr;
    gap:0
  }
  footer{
    flex-wrap:wrap;
    padding:25px 6% 90px
  }
  footer p{
    width:100%;
    margin:0
  }
  .mobile-cta{
    color:#fff;
    text-align:center;
    z-index:30;
    background:#ad462c;
    border-radius:6px;
    padding:14px;
    font-weight:700;
    display:block;
    position:fixed;
    bottom:12px;
    left:6%;
    right:6%;
    box-shadow:0 4px 20px #0003
  }
}
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important
  }
}
.product-price{
  color:#943b25;
  margin:17px 0;
  font-size:21px;
  font-weight:700
}
.product-details{
  color:#6d5a4b;
  margin:0 0 20px;
  padding-left:20px;
  font-size:15px
}
.product-details li{
  margin:8px 0
}
.hotline{
  color:#943b25;
  margin-bottom:22px;
  font-weight:700;
  display:inline-block
}
.order-total{
  border-top:1px solid #d8cbbb;
  border-bottom:1px solid #d8cbbb;
  grid-template-columns:1fr auto;
  gap:9px;
  margin-bottom:16px;
  padding:16px 0;
  font-size:14px;
  display:grid
}
.order-total strong{
  text-align:right
}
.order-total span:nth-last-child(2),.order-total strong:last-child{
  color:#943b25;
  font-size:16px
}
.company-info{
  max-width:540px;
  font-size:14px
}
.company-info p{
  margin:7px 0
}
.company-info a{
  color:#943b25;
  font-weight:700
}
@media (max-width:600px){
  .product-price{
    font-size:18px
  }
  .order-total{
    font-size:13px
  }
  .company-info{
    width:100%
  }
  footer .company-info p{
    margin:7px 0
  }
  footer{
    align-items:flex-start
  }
}
.model-top{
  margin-bottom:16px
}
.product-image{
  aspect-ratio:1;
  object-fit:contain;
  background:#ede0cf;
  border-radius:5px;
  width:100%;
  height:auto;
  margin:0 0 20px;
  display:block
}
.model{
  flex-direction:column;
  display:flex
}
.model button{
  margin-top:auto
}
.model h3{
  overflow-wrap:break-word
}
.model p{
  min-height:72px
}
@media (max-width:600px){
  .model{
    padding:12px
  }
  .product-image{
    margin-bottom:14px
  }
  .model h3{
    font-size:23px
  }
  .model p{
    min-height:90px;
    font-size:14px
  }
}
.hero-image img{
  clip-path:inset(0 0 9%);
  object-position:center 58%;
  height:110%
}
.story>img{
  object-position:center center
}
@media (max-width:600px){
  .models{
    grid-template-columns:1fr;
    gap:24px
  }
  .model{
    padding:18px
  }
  .product-image{
    width:100%;
    margin-bottom:18px
  }
  .model h3{
    font-size:30px
  }
  .model p{
    min-height:0;
    margin:12px 0
  }
  .model-meta{
    margin:16px 0
  }
  .model button{
    min-height:48px;
    font-size:16px
  }
  .product-price{
    font-size:24px
  }
  .story>img{
    aspect-ratio:4/3;
    object-fit:cover;
    height:auto
  }
  .hero-image img{
    height:110%
  }
}

/* ===== Sửa lỗi font tiếng Việt =====
   Georgia/Arial thiếu hoặc hiển thị lệch dấu tiếng Việt (ấ, ở, ữ, ỷ...) trên nhiều máy.
   Thay bằng Gelasio (tương thích kích thước Georgia) và Arimo (tương thích Arial),
   cả hai có bộ ký tự tiếng Việt đầy đủ, nên bố cục giữ nguyên. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea,output{font-family:var(--font-sans)}
h1,h2,h3{line-height:1.25}
h1 em{font-style:italic}
.image-caption,.signature{line-height:1.3}
.eyebrow{line-height:1.6}

/* ===== Ô chọn mẫu (select thuần, thay cho Radix Select) ===== */
select{font:inherit;color:inherit}
.model-select{display:block;width:100%;height:48px;margin-top:7px;padding:0 40px 0 12px;font-size:16px;font-weight:400;color:#2f211b;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a6a5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid #d8cbbb;border-radius:5px;-webkit-appearance:none;appearance:none;cursor:pointer}
.model-select:focus-visible{outline-offset:4px;outline:3px solid #ad462c}
input:user-invalid{border-color:#a62e21}

/* Ô bẫy spam (ẩn với người dùng) */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}