/* ============ ROYART BRAND SYSTEM ============ */
:root{
  --purple:#141414;        /* accent chính -> đen mực (neutral) */
  --purple-dark:#000000;
  --purple-deep:#141414;
  --lime:#F2F1EC;          /* accent trên nền tối -> ngà */
  --accent-dot:#1E5B3F;    /* chấm xanh rêu cho mục menu đang chọn */
  --black:#141414;
  --cream:#F2F1EC;         /* nền ngà */
  --panel:#E9E8E1;
  --gray:#DDDCD4;
  --gray-dark:#8A8A84;
  --white:#ffffff;
  --radius:18px;
  --ease:cubic-bezier(.22,.9,.32,1);
  --font-body:'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading:'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--black);
  background:var(--cream);
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;}

/* accessibility: visible focus + reduced motion */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

.wrap{max-width:1400px; margin:0 auto; padding:0 40px;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--black); color:var(--white);
  padding:14px 26px; border-radius:40px;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border:none; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px); background:var(--lime); color:var(--black);}
.btn .arrow{
  width:26px;height:26px;border-radius:50%;
  background:var(--lime); color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:14px; transition:.25s;
}
.btn:hover .arrow{background:var(--black); color:var(--lime);}
.btn.ghost{
  background:transparent; color:var(--black);
  border:2px solid var(--black);
}
.btn.ghost:hover{background:var(--black); color:var(--lime); border-color:var(--black);}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *{opacity:1; transform:translateY(0) scale(1);}
.reveal-stagger > *{opacity:0; transform:translateY(24px) scale(.98); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal-stagger > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger > *:nth-child(4){transition-delay:.35s;}
.reveal-stagger > *:nth-child(5){transition-delay:.45s;}
.reveal-stagger > *:nth-child(6){transition-delay:.55s;}
.reveal-stagger > *:nth-child(7){transition-delay:.65s;}

/* ===== HEADER (unified: logo + nav in one bar) ===== */
.siteheader{
  background:var(--purple);
  transform:translateY(-100%);
  animation:slideDown .6s var(--ease) .05s forwards;
}
@keyframes slideDown{ to{ transform:translateY(0); } }
.siteheader-inner{
  max-width:1400px; margin:0 auto; padding:18px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:44px; width:auto;}
.sitenav{
  display:flex; align-items:center; gap:30px;
  font-size:14px; font-weight:600; color:var(--cream);
}
.sitenav a{opacity:.8; transition:.2s; padding:6px 2px;}
.sitenav a:hover, .sitenav a.current{opacity:1; color:var(--lime);}
.siteheader .btn{background:var(--black); color:var(--cream);}
.siteheader .btn:hover{background:var(--lime); color:var(--black);}

@keyframes fadeIn{ to{ opacity:1; } }

/* ===== FOOTER ===== */
.footer{padding:60px 0 0; background:var(--cream); position:relative; overflow:hidden;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  max-width:1400px; margin:0 auto; padding:0 40px 40px;
  flex-wrap:wrap; gap:30px; position:relative; z-index:2;
}
.follow{
  background:var(--purple); border-radius:40px;
  display:flex; align-items:center; gap:16px; padding:12px 24px;
}
.social{display:flex; gap:10px;}
.social a{
  width:34px;height:34px;border-radius:50%;background:var(--black);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
  transition:.25s;
}
.social a svg{width:16px; height:16px; fill:currentColor;}
.social a:hover{background:var(--lime); color:var(--black);}
.follow strong{font-size:13px; letter-spacing:.08em; color:var(--cream);}
.contact-col strong{
  display:block; color:var(--purple); font-size:11px; letter-spacing:.12em; margin-bottom:8px;
}
.contact-col p{font-size:13px; line-height:1.7;}
.contact-col a:hover{color:var(--purple); text-decoration:underline;}
.contact-cols{display:flex; gap:70px; flex-wrap:wrap;}
.rights{
  font-size:11px; color:#8a84a8; padding:0 40px 20px; max-width:1400px; margin:0 auto;
  position:relative; z-index:2;
}
.wordmark-img{
  position:relative; z-index:1;
  display:flex; justify-content:center; padding:0 40px 30px;
}
.wordmark-img img{
  width:min(680px, 80vw); opacity:.9;
  filter:none;
}

/* purple footer band to hold cream logo */
.footer-band{
  background:var(--purple);
  padding:44px 0 34px;
}

@media(max-width:900px){
  .siteheader-inner{flex-wrap:wrap; justify-content:center;}
  .sitenav{flex-wrap:wrap; justify-content:center;}
}

/* ============ HORIZONTAL SHOWCASE v4 — full-bleed columns + auto loop ============ */
.hs-page{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream);
}

/* ---- header: mảnh, nổi trên nền sáng ---- */
.hs-header{
  flex:0 0 auto; background:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 38px; gap:20px; z-index:20;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.hs-header .brand img{height:34px; filter:brightness(0);}
.hs-menu{display:flex; gap:28px; align-items:center; font-size:12px; font-weight:600; color:var(--black); text-transform:uppercase; letter-spacing:.08em;}
.hs-menu a{opacity:.55; transition:.2s; display:inline-flex; align-items:center; gap:7px;}
.hs-menu a::before{
  content:''; width:7px; height:7px; border-radius:50%;
  border:1.5px solid currentColor; background:transparent; transition:.2s;
}
.hs-menu a:hover{opacity:1;}
.hs-menu a.current{opacity:1;}
.hs-menu a.current::before{background:var(--accent-dot); border-color:var(--accent-dot);}
.hs-menu a.hs-menu-about{padding-left:20px; border-left:1px solid rgba(0,0,0,.15);}
.hs-menu a.hs-menu-about::before{display:none;}
.hs-menu .count{font-size:10px; vertical-align:super; opacity:.65; margin-left:1px;}
.hs-book-btn{
  background:var(--black); color:var(--cream); border:none; cursor:pointer;
  border-radius:30px; padding:10px 20px; font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; transition:.25s;
}
.hs-book-btn:hover{background:var(--purple); color:#fff;}

/* ---- track: cột tràn viền, không khe hở ---- */
.hs-main{flex:1 1 auto; position:relative; overflow:hidden;}
.hs-track{
  height:100%; display:flex; align-items:stretch;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.hs-track::-webkit-scrollbar{display:none;}

.hs-panel{
  flex:0 0 auto; height:100%;
  display:flex; flex-direction:column;
}

/* ---- cột dự án: tiêu đề trên, ảnh full-bleed dưới ---- */
.hs-card{
  width:min(46vw, 720px);
  cursor:pointer; text-decoration:none; color:var(--black);
  background:var(--cream);
}
.hs-card .proj-head{
  flex:0 0 auto;
  padding:7vh 44px 30px;
  display:flex; flex-direction:column;
}
.hs-card .proj-head h3{
  font-family:var(--font-heading);
  font-size:clamp(24px,2.6vw,42px); font-weight:500; line-height:1.18;
  letter-spacing:-.015em;
  transition:opacity .25s;
}
.hs-card:hover .proj-head h3{opacity:.55;}
.hs-card .proj-head .client{margin-top:16px; font-size:14px; font-weight:600;}
.hs-card .proj-head .cat{margin-top:3px; font-size:13px; color:#8a84a8;}
.hs-card .proj-img{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
}
.hs-card .proj-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
  transform:scale(var(--img-zoom, 1));
}
.hs-card:hover .proj-img img{transform:scale(calc(var(--img-zoom, 1) * 1.03));}
.hs-card .proj-img .vid-badge{
  position:absolute; top:18px; right:18px;
  width:40px; height:40px; border-radius:50%;
  background:var(--lime); color:var(--black);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}

/* ---- điều khiển ---- */
.hs-nav{
  position:absolute; right:24px; bottom:20px; z-index:10;
  display:flex; align-items:center; gap:10px;
}
.hs-arrow, .hs-play{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.82); color:var(--cream); font-size:17px;
  display:flex; align-items:center; justify-content:center; transition:.25s;
  backdrop-filter:blur(4px);
}
.hs-arrow:hover, .hs-play:hover{background:var(--purple);}
.hs-progress{
  position:absolute; left:38px; bottom:30px; z-index:10;
  font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--black);
  background:rgba(242,241,236,.85); padding:4px 10px; border-radius:20px;
}
.hs-progress-bar{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:10;
  background:rgba(0,0,0,.08);
}
.hs-progress-bar i{display:block; height:100%; width:0%; background:var(--purple);}

/* ---- footer mảnh ---- */
.hs-footer{
  flex:0 0 auto; background:var(--black); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:12px 38px; font-size:12px; z-index:20; flex-wrap:wrap;
}
.hs-footer a{font-weight:700; transition:.2s;}
.hs-footer a:hover{color:var(--lime);}
.hs-footer .foot-about{opacity:.8;}
.hs-footer .foot-social{display:flex; gap:16px;}
.hs-footer .copy{opacity:.55; font-size:11px;}

@media(max-width:720px){
  .hs-header{padding:12px 18px;}
  .hs-menu{gap:14px; font-size:12px;}
  .hs-intro, .hs-card{width:88vw;}
  .hs-intro{padding:5vh 22px 0;}
  .hs-card .proj-head{padding:5vh 22px 20px;}
  .hs-footer{justify-content:center; text-align:center;}
}

/* ============ PROJECT DETAIL (portfolio book) ============ */
.pd-hero{
  position:relative; height:72vh; min-height:420px; overflow:hidden; background:var(--purple-deep);
}
.pd-hero img, .pd-hero video{width:100%; height:100%; object-fit:cover; opacity:.92; transform:scale(var(--img-zoom, 1));}
.pd-hero .pd-hero-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px; background:linear-gradient(180deg, transparent, rgba(15,8,35,.82));
  color:var(--cream);
}
.pd-hero .pd-hero-cap .cat{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime);}
.pd-hero .pd-hero-cap h1{font-family:var(--font-heading); font-size:clamp(32px,5vw,64px); font-weight:800; margin-top:6px;}

.pd-backlink{
  max-width:1200px; margin:0 auto; padding:22px 34px 0;
}
.pd-backlink a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-dark); transition:.2s;
}
.pd-backlink a:hover{color:var(--black);}

.pd-body{max-width:920px; margin:0 auto; padding:30px 34px 30px;}
.pd-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding-bottom:36px; border-bottom:1px solid rgba(20,20,20,.12);
}
.pd-meta div b{display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-dark); margin-bottom:6px;}
.pd-meta div span{font-size:14px; font-weight:600;}
.pd-desc{padding:36px 0 10px; font-size:17px; line-height:1.9; color:#333; max-width:720px;}

/* ---- Gallery kiểu "cuốn portfolio" — bố cục JUSTIFIED, giữ nguyên tỉ lệ gốc của ảnh ----
   Ảnh KHÔNG bị cắt: mỗi ảnh giữ đúng khung hình gốc mà nhiếp ảnh gia đã bố cục.
   Với hàng 2 ảnh, chiều rộng chia theo tỉ lệ gốc (flex-grow = tỉ lệ w/h do JS gán sau khi ảnh tải),
   nên 2 ảnh luôn cùng chiều cao và vừa khít chiều rộng hàng — nguyên lý giống Flickr / Google Photos. */
.pd-gallery{max-width:1240px; margin:0 auto; padding:20px 34px 70px; display:flex; flex-direction:column; gap:6vh;}
.pd-row{display:flex; gap:20px; align-items:flex-start;}
.pd-row .pd-item{flex:1 1 0; min-width:0; display:block;}
.pd-row img, .pd-row video{
  width:100%; height:auto; display:block; border-radius:4px;
  background:var(--panel);
}
/* 1 ảnh chiếm trọn chiều rộng */
.pd-row.full{justify-content:center;}
/* 1 ảnh đặt giữa, hẹp hơn — tạo nhịp "thở" giữa các trang như sách in */
.pd-row.tall{justify-content:center;}
.pd-row.tall .pd-item{flex:0 1 auto; max-width:min(64%, 620px);}
.pd-row video{cursor:pointer;}
.pd-row img{transition:transform .6s var(--ease);}
.pd-row a.pd-img-link{overflow:hidden; border-radius:4px;}
.pd-row a.pd-img-link:hover img{transform:scale(1.015);}

.pd-next{
  background:var(--black); color:var(--cream);
  padding:56px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  flex-wrap:wrap;
  text-decoration:none; transition:.3s;
}
.pd-next:hover{background:#000;}
.pd-next .pd-next-text .lbl{font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dark);}
.pd-next .pd-next-text h2{font-family:var(--font-heading); font-size:clamp(24px,3.4vw,42px); font-weight:600; margin-top:8px;}
.pd-next .pd-next-thumb{
  width:120px; height:80px; border-radius:6px; overflow:hidden; flex:0 0 auto;
}
.pd-next .pd-next-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---- booking modal (shared) ---- */
.bk-modal-backdrop{
  position:fixed; inset:0; z-index:300; background:rgba(15,8,35,.7);
  display:flex; align-items:center; justify-content:center; padding:26px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.bk-modal-backdrop.open{opacity:1; pointer-events:auto;}
.bk-modal{
  position:relative; background:var(--white); border-radius:20px; padding:34px 30px;
  width:min(420px, 94vw);
  transform:scale(.9); transition:transform .35s var(--ease);
}
.bk-modal-backdrop.open .bk-modal{transform:scale(1);}
.bk-modal h3{font-family:var(--font-heading); font-size:20px; font-weight:800; margin-bottom:16px;}
.bk-modal form{display:flex; flex-direction:column; gap:12px;}
.bk-modal label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6a628f;}
.bk-modal input, .bk-modal select{
  width:100%; padding:12px 14px; margin-top:5px;
  border:2px solid var(--gray); border-radius:10px; font-family:inherit; font-size:14px; background:var(--cream);
}
.bk-modal input:focus, .bk-modal select:focus{outline:none; border-color:var(--purple);}
.bk-modal .btn{justify-content:center; margin-top:6px;}
.bk-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--panel); cursor:pointer; font-size:15px;
}

@media(max-width:720px){
  .hs-header{padding:12px 18px;}
  .hs-menu{gap:14px; font-size:12px;}
  .hs-panel{padding:24px 18px;}
  .hs-card .frame{height:52vh;}
  .pd-meta{grid-template-columns:repeat(2,1fr);}
  .pd-row{flex-direction:column;}
  .pd-row.tall .pd-item{max-width:100%;}
  .pd-next{flex-direction:column; align-items:flex-start; text-align:left;}
  .hs-footer{justify-content:center; text-align:center;}
}

/* ---- thanh bộ lọc con (trang category): tab chữ mảnh, gạch chân khi active ---- */
.hs-filters{
  flex:0 0 auto; background:var(--cream);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:12px 38px 14px;
}
.hs-filters-row{
  display:flex; gap:22px; align-items:baseline; flex-wrap:wrap;
  justify-content:center;
  overflow-x:auto; scrollbar-width:none;
}
.hs-filters-row::-webkit-scrollbar{display:none;}
.hs-filter{
  border:none; background:transparent; color:var(--black);
  padding:0 0 5px; cursor:pointer;
  font-family:var(--font-body); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; opacity:.55;
  border-bottom:2px solid transparent;
  transition:opacity .2s, border-color .2s;
}
.hs-filter:hover{opacity:.85;}
.hs-filter.active{opacity:1; font-weight:700; border-bottom-color:var(--black);}
.hs-filter.is-empty{opacity:.32;}
.hs-filter.is-empty:hover{opacity:.5;}
.hs-filter .count{font-weight:400; opacity:.7; margin-left:2px;}
.hs-filter-desc{
  margin-top:10px; font-size:12px; color:var(--gray-dark); min-height:16px;
  text-align:center;
}

/* ---- panel khi bộ lọc không có dự án ---- */
.hs-empty{
  width:100%; justify-content:center; align-items:center;
}
.hs-empty p{font-size:14px; color:var(--gray-dark);}

/* ============ ADMIN: LAYOUT BUILDER (bố cục gallery theo dự án) ============ */
.layout-builder{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.layout-empty{
  font-size:12px; color:var(--gray-dark); font-weight:400;
  padding:16px; text-align:center; border:1.5px dashed var(--gray); border-radius:10px;
}
.layout-row{
  border:1.5px solid var(--gray); border-radius:12px; padding:12px; background:var(--cream);
}
.layout-row-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.layout-type-badge{
  font-size:11px; font-weight:700; color:var(--purple);
  background:var(--panel); padding:4px 10px; border-radius:20px;
}
.layout-row-actions{display:flex; gap:6px;}
.layout-row-actions button{
  width:26px; height:26px; border-radius:7px; border:none; cursor:pointer;
  background:var(--panel); font-size:12px; transition:.2s;
}
.layout-row-actions button:hover{background:var(--lime);}
.layout-row-slots{display:grid; gap:8px;}
.layout-row-slots-1{grid-template-columns:1fr;}
.layout-row-slots-2{grid-template-columns:1fr 1fr;}
.layout-slot{
  position:relative; border:1.5px dashed var(--gray); border-radius:8px;
  padding:8px; text-align:center; background:var(--white);
}
.layout-slot .upload-preview{max-width:100%; max-height:90px; border-radius:6px; margin-bottom:6px; object-fit:cover;}
.layout-slot-empty{display:block; font-size:11px; color:var(--gray-dark); padding:14px 0;}
.layout-slot input[type="file"]{font-size:10px; width:100%;}
.layout-add-row{display:flex; gap:8px; align-items:center; margin-top:4px;}
.layout-add-row select{
  font-family:inherit; font-size:12px; padding:9px 12px; border:2px solid var(--gray);
  border-radius:8px; background:var(--white); flex:1;
}
.layout-add-row .btn-add-row{
  background:var(--black); color:var(--cream); border:none; cursor:pointer;
  padding:9px 16px; border-radius:8px; font-size:12px; font-weight:700; white-space:nowrap;
  transition:.2s;
}
.layout-add-row .btn-add-row:hover{background:var(--purple); color:#fff;}

/* ============ CALENDAR WIDGET (dùng chung Booking + Admin) ============ */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.cal-title{font-size:13px; font-weight:700; color:var(--black);}
.cal-nav{
  width:28px; height:28px; border-radius:50%; border:none; cursor:pointer;
  background:var(--panel); font-size:14px; transition:.2s;
}
.cal-nav:hover{background:var(--lime);}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px;}
.cal-dow span{text-align:center; font-size:10px; font-weight:700; color:var(--gray-dark); text-transform:uppercase;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-cell{aspect-ratio:1; display:flex; align-items:center; justify-content:center;}
.cal-cell-empty{visibility:hidden;}
.cal-day{
  border:1.5px solid transparent; border-radius:8px; background:var(--white);
  font-family:inherit; font-size:12px; font-weight:600; color:var(--black);
  cursor:pointer; transition:.15s;
}
.cal-day:hover:not(.cal-disabled){border-color:var(--black);}
.cal-day.cal-past{color:var(--gray-dark); opacity:.35; cursor:default;}
.cal-day.cal-booked{background:#f3d9d9; color:#8a2f2f;}
.cal-day.cal-blocked{background:#e7e5df; color:var(--gray-dark);}
.cal-day.cal-holiday{background:#f6e9c9; color:#7a5c12;}
.cal-day.cal-disabled{cursor:not-allowed;}
.cal-day.cal-selected{background:var(--black); color:var(--cream); border-color:var(--black);}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:10px; color:var(--gray-dark);}
.cal-legend span{display:inline-flex; align-items:center; gap:5px;}
.cal-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.cal-dot-free{background:var(--white); border:1.5px solid var(--gray-dark);}
.cal-dot-booked{background:#e3a9a9;}
.cal-dot-blocked{background:#c9c7bd;}

/* ---- popover đánh dấu ngày (Admin) ---- */
.cal-day-editor{
  margin-top:14px; padding:14px; border:1.5px solid var(--gray); border-radius:10px; background:var(--cream);
}
.cal-day-editor .cde-date{font-size:12px; font-weight:700; margin-bottom:10px;}
.cal-day-editor select, .cal-day-editor textarea{
  width:100%; font-family:inherit; font-size:12px; padding:9px 10px;
  border:2px solid var(--gray); border-radius:8px; background:var(--white); margin-bottom:8px;
}
.cal-day-editor .cde-actions{display:flex; gap:8px;}
.cal-day-editor .cde-actions button{
  flex:1; border:none; border-radius:8px; padding:9px; font-size:11px; font-weight:700; cursor:pointer; transition:.2s;
}
.cde-save{background:var(--black); color:var(--cream);}
.cde-save:hover{background:var(--purple); color:#fff;}
.cde-clear{background:var(--panel); color:var(--black);}
.cde-clear:hover{background:#f3d9d9;}

/* ============ BOOKING WIZARD (4 bước) ============ */
.bk-wizard{padding-top:26px;}
.bk-progress{height:3px; background:var(--panel); border-radius:2px; margin-bottom:22px; overflow:hidden;}
.bk-progress i{display:block; height:100%; background:var(--black); transition:width .35s var(--ease);}
.bk-step h3{font-family:var(--font-heading); font-size:18px; font-weight:700; margin-bottom:14px;}
.bk-hint{font-size:12px; color:var(--gray-dark); margin:-8px 0 14px;}

.bk-cat-grid{display:flex; flex-direction:column; gap:10px;}
.bk-cat-card{
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--gray); border-radius:12px; padding:14px 16px; background:var(--white);
  cursor:pointer; text-align:left; font-family:inherit; transition:.22s;
}
.bk-cat-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  background:var(--panel); color:var(--black);
  display:flex; align-items:center; justify-content:center; transition:.22s;
}
.bk-cat-icon svg{width:22px; height:22px;}
.bk-cat-text{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0;}
.bk-cat-name{font-size:14px; font-weight:700; color:var(--black);}
.bk-cat-desc{font-size:11px; color:var(--gray-dark); line-height:1.45;}
.bk-cat-arrow{
  flex:0 0 auto; font-size:15px; color:var(--gray-dark);
  opacity:0; transform:translateX(-4px); transition:.22s;
}
.bk-cat-card:hover{border-color:var(--black); transform:translateY(-1px);}
.bk-cat-card:hover .bk-cat-icon{background:var(--black); color:var(--cream);}
.bk-cat-card:hover .bk-cat-arrow{opacity:1; transform:translateX(0);}
.bk-cat-card.active{border-color:var(--black); background:var(--panel);}
.bk-cat-card.active .bk-cat-icon{background:var(--black); color:var(--cream);}

.bk-chip-grid{display:flex; flex-direction:column; gap:8px;}
.bk-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1.5px solid var(--gray); border-radius:10px; padding:13px 15px;
  background:var(--white); font-family:inherit; font-size:13px; font-weight:600;
  text-align:left; cursor:pointer; transition:.22s;
}
.bk-chip::after{content:'→'; font-size:14px; color:var(--gray-dark); opacity:0; transition:.22s;}
.bk-chip:hover{border-color:var(--black);}
.bk-chip:hover::after{opacity:1;}
.bk-chip.active{border-color:var(--black); background:var(--panel);}
.bk-chip-skip{color:var(--gray-dark); font-weight:500;}

.bk-success{text-align:center; padding:10px 0 4px;}
.bk-success-icon{
  width:52px; height:52px; border-radius:50%; background:var(--accent-dot,#1E5B3F);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
  animation:bkPop .4s var(--ease) both;
}
.bk-success-icon svg{width:26px; height:26px;}
@keyframes bkPop{ from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;} }
.bk-success p{font-size:13px; color:var(--gray-dark); line-height:1.7; margin-bottom:20px;}

.bk-wizard-nav{margin-top:16px;}
.bk-back-btn{
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:700;
  color:var(--gray-dark); padding:0; transition:.2s;
}
.bk-back-btn:hover{color:var(--black);}

/* ============ ADMIN: LỊCH SẢN XUẤT ============ */
.admin-schedule-layout{display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start;}
.admin-schedule-cal{background:var(--white); border-radius:16px; padding:20px; max-width:340px;}
.admin-hint{margin-top:16px; font-size:12px; color:var(--gray-dark); max-width:560px; line-height:1.6;}
@media(max-width:760px){ .admin-schedule-layout{grid-template-columns:1fr;} }

/* ============ ABOUT PAGE ============ */
.about-page{background:var(--cream); min-height:100vh; display:flex; flex-direction:column;}
.ab-main{flex:1 1 auto; max-width:920px; margin:0 auto; padding:70px 34px 40px; width:100%;}
.ab-intro .eyebrow{font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dark);}
.ab-intro h1{font-family:var(--font-heading); font-size:clamp(34px,4.6vw,58px); font-weight:700; line-height:1.08; margin-top:14px; letter-spacing:-.01em;}
.ab-intro p{margin-top:20px; font-size:16px; line-height:1.9; color:#3a3a36; max-width:640px;}

.ab-testimonials{margin-top:80px;}
.ab-testimonials h2{font-family:var(--font-heading); font-size:22px; font-weight:700; margin-bottom:24px;}
.ab-t-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.ab-t-card{background:var(--white); border-radius:16px; padding:26px;}
.ab-t-avatar{width:40px; height:40px; border-radius:50%; object-fit:cover; margin-bottom:14px;}
.ab-t-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--black); font-weight:700; font-size:15px;
}
.ab-t-quote{font-size:14px; line-height:1.8; color:#3a3a36; margin-bottom:14px;}
.ab-t-name{font-size:12px; font-weight:700; color:var(--gray-dark);}

.ab-cta{
  margin-top:80px; background:var(--black); color:var(--cream);
  border-radius:20px; padding:56px 34px; text-align:center;
}
.ab-cta h2{font-family:var(--font-heading); font-size:clamp(24px,3vw,36px); font-weight:700; margin-bottom:20px;}
.ab-cta .btn{background:var(--cream); color:var(--black); display:inline-flex;}
.ab-cta .btn:hover{background:var(--lime);}

@media(max-width:720px){
  .ab-main{padding:50px 20px 30px;}
  .ab-t-grid{grid-template-columns:1fr;}
}

/* ============ ADMIN: STATUS BADGE (Booking) + READONLY FIELD ============ */
.status-badge{
  display:inline-block; padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.status-badge.status-new{background:#e3e8f6; color:#2f4a8a;}
.status-badge.status-contacted{background:#f6ecc9; color:#7a5c12;}
.status-badge.status-confirmed{background:#d9ecdd; color:#1e5b3f;}
.status-badge.status-done{background:#e2e2dc; color:#4a4a44;}
.status-badge.status-cancelled{background:#f3d9d9; color:#8a2f2f;}
.readonly-value{
  background:var(--panel); border-radius:8px; padding:10px 12px;
  font-size:13px; color:var(--gray-dark); margin-top:4px; min-height:20px;
}

/* ============ BOOKING: HONEYPOT (chống spam bot, ẩn khỏi người dùng thật) ============ */
.bk-honeypot{position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}

/* ============ ABOUT: PRICING (Báo giá dịch vụ) ============ */
.ab-pricing{margin-top:80px;}
.ab-pricing h2{font-family:var(--font-heading); font-size:22px; font-weight:700; margin-bottom:6px;}
.ab-pricing-note{font-size:13px; color:var(--gray-dark); margin-bottom:28px;}
.ab-price-group{margin-bottom:44px;}
.ab-price-group h3{
  font-family:var(--font-heading); font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gray-dark);
  padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid rgba(20,20,20,.12);
}
.ab-price-tag-group{margin-bottom:28px;}
.ab-price-tag-group h4{
  font-family:var(--font-heading); font-size:17px; font-weight:700; color:var(--black);
  margin-bottom:14px;
}
.ab-price-card-row{display:flex; flex-wrap:wrap; gap:16px;}
.ab-price-card{
  flex:1 1 260px; min-width:240px; max-width:340px;
  background:var(--white); border-radius:16px; padding:22px;
  border:1.5px solid transparent;
}
.ab-price-card.highlight{border-color:var(--black);}
.ab-price-card-head{margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(20,20,20,.1);}
.ab-price-pkg-name{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-dark);}
.ab-price-pkg-value{display:block; margin-top:6px; font-family:var(--font-heading); font-size:26px; font-weight:800; color:var(--black);}
.ab-price-pkg-value .unit{font-size:13px; font-weight:500; color:var(--gray-dark); margin-left:2px;}
.ab-price-features{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.ab-price-features li{display:flex; flex-direction:column;}
.ab-price-feature-text{font-size:13px; font-weight:600; color:var(--black); display:flex; align-items:flex-start; gap:7px;}
.ab-price-feature-text::before{content:'✓'; color:var(--accent-dot); font-weight:700; flex:0 0 auto;}
.ab-price-feature-note{margin-top:3px; margin-left:19px; font-size:12px; color:var(--gray-dark); line-height:1.5;}
.ab-price-addons{margin-top:18px; padding-top:14px; border-top:1px dashed rgba(20,20,20,.15);}
.ab-price-addons-label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-dark); margin-bottom:8px;}
.ab-price-addons ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;}
.ab-price-addons li{font-size:12px; color:var(--gray-dark);}

@media(max-width:720px){
  .ab-price-card{flex:1 1 100%; max-width:none;}
}

/* ============ ADMIN: ITEMLIST BUILDER (tính năng gói giá / dịch vụ bổ sung) ============ */
.itemlist-builder{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.itemlist-row{border:1.5px solid var(--gray); border-radius:10px; padding:10px; background:var(--cream);}
.itemlist-row-main{display:flex; gap:8px; align-items:center;}
.itemlist-row-main .il-text{
  flex:1; font-family:inherit; font-size:13px; padding:8px 10px;
  border:1.5px solid var(--gray); border-radius:7px; background:var(--white);
}
.itemlist-row .il-remove{
  width:28px; height:28px; border-radius:7px; border:none; cursor:pointer;
  background:var(--panel); font-size:12px; flex:0 0 auto; transition:.2s;
}
.itemlist-row .il-remove:hover{background:#f3d9d9;}
.itemlist-row .il-note{
  width:100%; margin-top:6px; font-family:inherit; font-size:12px; padding:7px 10px;
  border:1.5px solid var(--gray); border-radius:7px; background:var(--white); resize:vertical;
  color:var(--gray-dark);
}
.btn-add-item{
  margin-top:6px; background:var(--black); color:var(--cream); border:none; cursor:pointer;
  padding:9px 16px; border-radius:8px; font-size:12px; font-weight:700; transition:.2s;
}
.btn-add-item:hover{background:var(--purple); color:#fff;}

/* ============ PRICING PAGE (báo giá dịch vụ — trang riêng) ============ */
.pricing-page{background:var(--cream); min-height:100vh; display:flex; flex-direction:column;}
.pr-main{flex:1 1 auto; max-width:960px; margin:0 auto; padding:70px 34px 80px; width:100%;}
.pr-intro .eyebrow{font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dark);}
.pr-intro h1{font-family:var(--font-heading); font-size:clamp(34px,4.6vw,52px); font-weight:700; line-height:1.08; margin-top:14px; letter-spacing:-.01em;}
.pr-intro p{margin-top:18px; font-size:15px; line-height:1.8; color:#3a3a36; max-width:600px;}
.pr-empty{margin-top:40px; font-size:14px; color:var(--gray-dark);}

.pr-block{margin-top:64px;}
.pr-block h2{
  font-family:var(--font-heading); font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gray-dark);
  padding-bottom:12px; margin-bottom:18px; border-bottom:1px solid rgba(20,20,20,.12);
}
.pr-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
.pr-tab{
  border:1.5px solid var(--gray); background:var(--white); color:var(--black);
  border-radius:30px; padding:10px 18px; cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:600;
  transition:.2s;
}
.pr-tab:hover{border-color:var(--black);}
.pr-tab.active{background:var(--black); color:var(--cream); border-color:var(--black);}
.pr-panel{min-height:60px;}
.pr-panel .ab-price-card-row{display:flex; flex-wrap:wrap; gap:16px;}

@media(max-width:720px){
  .pr-main{padding:50px 20px 50px;}
  .pr-block{margin-top:48px;}
}

/* ============ HEADER MOBILE: nav cuộn ngang, logo + Booking luôn cố định ============ */
@media(max-width:720px){
  .hs-header{gap:10px;}
  .hs-menu{
    flex:1 1 auto; min-width:0;
    overflow-x:auto; flex-wrap:nowrap; white-space:nowrap;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
  }
  .hs-menu::-webkit-scrollbar{display:none;}
  .hs-menu a{flex:0 0 auto;}
  .hs-book-btn{flex:0 0 auto; white-space:nowrap; padding:9px 14px;}
  .hs-header .brand{flex:0 0 auto;}
  .hs-header .brand img{height:28px;}
}

/* ============ PRICING PAGE: FAQ ACCORDION ============ */
.pr-faq{margin-top:80px;}
.pr-faq h2{
  font-family:var(--font-heading); font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gray-dark);
  padding-bottom:12px; margin-bottom:18px; border-bottom:1px solid rgba(20,20,20,.12);
}
.pr-faq-item{border-bottom:1px solid rgba(20,20,20,.08);}
.pr-faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:18px 0; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--black);
}
.pr-faq-icon{font-size:18px; font-weight:400; color:var(--gray-dark); flex:0 0 auto; transition:transform .25s var(--ease);}
.pr-faq-item.open .pr-faq-icon{transform:rotate(45deg);}
.pr-faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.pr-faq-item.open .pr-faq-a{max-height:220px;}
.pr-faq-a p{padding:0 0 18px; font-size:13px; line-height:1.8; color:var(--gray-dark); max-width:680px;}

.pr-cta{margin-top:70px;}

/* ============ ADMIN: TRÌNH CHỈNH ẢNH (kéo để dịch chuyển + trượt để zoom) ============ */
.img-cropper{max-width:320px;}
.cropper-frame{
  position:relative; width:100%; aspect-ratio:4/3;
  overflow:hidden; border-radius:8px; background:var(--panel);
  cursor:move; touch-action:none;
}
.cropper-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; user-select:none; pointer-events:none;
  will-change:transform;
}
.cropper-zoom-row{
  display:flex; align-items:center; gap:8px; margin-top:8px;
}
.cropper-zoom-icon{font-size:12px; flex:0 0 auto;}
.cropper-zoom{flex:1 1 auto; accent-color:var(--black,#141414);}
.cropper-reset{
  flex:0 0 auto; background:var(--panel); border:none; cursor:pointer;
  border-radius:7px; padding:6px 10px; font-size:11px; font-weight:600; transition:.2s;
}
.cropper-reset:hover{background:var(--lime,#eee);}
.focal-hint{font-size:11px; color:var(--gray-dark); margin-top:6px;}

.layout-slot .img-cropper{max-width:100%;}

/* ============ ADMIN: MÀN HÌNH XEM TRƯỚC & CHỈNH ẢNH (WYSIWYG) ============ */
.btn-back-list{
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:700;
  color:var(--gray-dark); padding:0; margin-bottom:14px; transition:.2s;
}
.btn-back-list:hover{color:var(--black);}
.ie-hint{font-size:12px; color:var(--gray-dark); margin-bottom:28px; max-width:640px; line-height:1.6;}
.ie-section{margin-bottom:40px;}
.ie-section h3{font-family:var(--font-heading); font-size:16px; font-weight:700; margin-bottom:16px;}
.ie-sub-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-dark); margin-bottom:8px;}
.ie-cover-row{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.ie-row{margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid rgba(20,20,20,.08);}
.ie-row-label{font-size:12px; font-weight:700; color:var(--gray-dark); margin-bottom:12px;}
.ie-row-slots{display:grid; gap:16px;}
.ie-row-slots-1{grid-template-columns:1fr; max-width:560px;}
.ie-row-slots-2{grid-template-columns:1fr 1fr;}
.ie-empty{font-size:12px; color:var(--gray-dark);}
.ie-video-note{
  display:flex; align-items:center; justify-content:center; height:120px;
  background:var(--panel); border-radius:8px; font-size:12px; color:var(--gray-dark);
}
.ie-save-bar{
  position:sticky; bottom:0; background:var(--cream); padding:16px 0;
  display:flex; align-items:center; gap:16px; border-top:1px solid rgba(20,20,20,.1);
}
.ie-save-bar #ieStatus{font-size:12px; font-weight:600; color:var(--gray-dark);}

@media(max-width:720px){
  .ie-cover-row{grid-template-columns:1fr;}
  .ie-row-slots-2{grid-template-columns:1fr;}
}

/* ============ ADMIN: TỐI ƯU ẢNH ============ */
.opt-log{
  margin-top:20px; max-height:420px; overflow-y:auto;
  background:var(--white); border-radius:10px; padding:14px;
  font-size:12px; line-height:1.7; font-family:ui-monospace, monospace;
}
.opt-line{padding:2px 0; color:var(--gray-dark);}
.opt-line.opt-ok{color:#1E5B3F;}
.opt-line.opt-err{color:#8a2f2f;}

/* ============ ADMIN: XEM TRƯỚC GALLERY (justified, đúng tỉ lệ gốc) ============ */
.ie-sub-note{font-size:12px; color:var(--gray-dark); margin-bottom:16px; max-width:640px; line-height:1.6;}
.ie-preview-row{display:flex; gap:10px; align-items:flex-start; max-width:560px;}
.ie-preview-row.ie-tall{justify-content:center;}
.ie-preview-row.ie-tall .ie-preview-item{max-width:64%;}
.ie-preview-item{flex:1 1 0; min-width:0;}
.ie-preview-item img{width:100%; height:auto; display:block; border-radius:6px; background:var(--panel);}

/* ============ BOOKING: CHỌN CA (Sáng / Chiều / Tối) ============ */
.bk-shift-block{margin-top:18px; padding-top:16px; border-top:1px solid rgba(20,20,20,.1);}
.bk-shift-title{font-size:12px; font-weight:700; color:var(--black); margin-bottom:10px;}
.bk-shift-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.bk-shift{
  display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  border:1.5px solid var(--gray); border-radius:10px; padding:11px;
  background:var(--white); font-family:inherit; cursor:pointer; text-align:left; transition:.22s;
}
.bk-shift-icon{color:var(--gray-dark); display:flex; margin-bottom:3px; transition:.22s;}
.bk-shift-icon svg{width:19px; height:19px;}
.bk-shift:hover:not(.is-busy){border-color:var(--black); transform:translateY(-1px);}
.bk-shift:hover:not(.is-busy) .bk-shift-icon{color:var(--black);}
.bk-shift.active{border-color:var(--black); background:var(--panel);}
.bk-shift.active .bk-shift-icon{color:var(--black);}
.bk-shift-name{font-size:13px; font-weight:700; color:var(--black);}
.bk-shift-time{font-size:10px; color:var(--gray-dark);}
.bk-shift-state{font-size:10px; font-weight:700; color:var(--accent-dot,#1E5B3F); margin-top:2px;}
.bk-shift.is-busy{background:#f6eeee; border-color:#e6d5d5; cursor:not-allowed; opacity:.75;}
.bk-shift.is-busy .bk-shift-state{color:#8a2f2f;}
.bk-shift.is-busy .bk-shift-name,
.bk-shift.is-busy .bk-shift-icon{color:var(--gray-dark);}

@media(max-width:520px){
  .bk-shift-grid{grid-template-columns:1fr;}
  .bk-shift{flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap;}
  .bk-shift-icon{margin-bottom:0;}
  .bk-shift-state{margin-top:0; margin-left:auto;}
}

/* ---- Lịch: trạng thái "còn ca trống" (kín một phần) ---- */
.cal-day.cal-partial{background:#f6eddb; color:#7a5c12;}
.cal-dot-partial{background:#e8cd94;}

/* ---- Admin: chặn theo ca trong trình sửa ngày ---- */
.cde-shift-group{
  margin-bottom:12px; padding:10px 12px;
  background:var(--white); border-radius:8px; border:1px solid var(--gray);
}
.cde-shift-label{
  display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray-dark); margin-bottom:8px;
}
.cde-shift-check{
  display:flex; align-items:center; gap:8px; font-size:12px;
  padding:4px 0; cursor:pointer;
}
.cde-shift-check input{width:auto; margin:0;}
.cde-shift-hint{font-size:10px; color:var(--gray-dark); margin-top:6px; line-height:1.5;}

/* ============ ADMIN: DANH SÁCH DỰ ÁN (thẻ, kéo-thả) ============ */
.proj-list{display:flex; flex-direction:column; gap:8px;}
.proj-card{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1.5px solid transparent; border-radius:12px;
  padding:10px 14px; transition:border-color .18s, opacity .18s, transform .12s;
}
.proj-card:hover{border-color:rgba(20,20,20,.14);}
.proj-card.dragging{opacity:.45; transform:scale(.99);}
.proj-card.drag-over{border-color:var(--black);}
.proj-card.is-hidden{opacity:.5; background:#f1f0ea;}
.proj-card.is-hidden .pc-cover img{filter:grayscale(1);}

.pc-handle{
  flex:0 0 auto; cursor:grab; color:var(--gray-dark); font-size:15px;
  user-select:none; padding:0 2px; letter-spacing:-2px;
}
.pc-handle:active{cursor:grabbing;}
.pc-order{
  flex:0 0 auto; width:22px; text-align:center;
  font-size:11px; font-weight:700; color:var(--gray-dark);
}
.pc-cover{
  flex:0 0 auto; width:64px; height:64px; border-radius:8px; overflow:hidden;
  background:var(--panel); display:flex; align-items:center; justify-content:center;
}
.pc-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.pc-nocover{font-size:9px; color:var(--gray-dark); text-align:center; padding:4px;}

.pc-info{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.pc-name{font-size:14px; font-weight:700; color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pc-meta{font-size:11px; color:var(--gray-dark);}
.pc-client{font-size:11px; color:var(--gray-dark); opacity:.75;}

.pc-switches{flex:0 0 auto; display:flex; gap:14px; align-items:center;}
.pc-switch{display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;}
.pc-switch input{position:absolute; opacity:0; width:0; height:0;}
.pc-switch-ui{
  width:32px; height:18px; border-radius:20px; background:var(--gray);
  position:relative; transition:.2s; flex:0 0 auto;
}
.pc-switch-ui::after{
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--white); transition:.2s;
}
.pc-switch input:checked + .pc-switch-ui{background:var(--accent-dot,#1E5B3F);}
.pc-switch input:checked + .pc-switch-ui::after{transform:translateX(14px);}
.pc-switch-label{font-size:10px; font-weight:700; color:var(--gray-dark); white-space:nowrap;}
.pc-switch input:checked ~ .pc-switch-label{color:var(--black);}

.pc-actions{flex:0 0 auto; display:flex; gap:5px;}
.pc-actions button{
  width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
  background:var(--panel); font-size:12px; transition:.18s;
}
.pc-actions button:hover{background:var(--lime);}
.pc-actions .pc-delete:hover{background:#f3d9d9;}

@media(max-width:900px){
  .proj-card{flex-wrap:wrap; gap:10px;}
  .pc-info{flex:1 1 100%; order:5;}
  .pc-switches{order:6;}
  .pc-actions{order:7; margin-left:auto;}
}