/* Sachi Garden — bảng màu vườn: kem, sage, ô liu, terracotta */
:root{
  --bg:#faf6ef;
  --bg-2:#f2ece1;
  --paper:#fffdf9;
  --line:#e6dccb;
  --ink:#2f3a2f;
  --ink-soft:#6d7a68;
  --sage:#7f9b76;
  --sage-dark:#2f5d43;
  --sage-soft:#e8efe4;
  --olive:#1b412c;
  --brand-deep:#1b412c;
  --terra:#c97b5a;
  --terra-soft:#f8ece5;
  --gold:#d9a441;
  --ok:#5f9e6a;
  --warn:#d19a3c;
  --bad:#c26a5c;
  --radius:20px;
  --shadow:0 6px 24px rgba(27,65,44,.09);
  --shadow-lg:0 14px 40px rgba(27,65,44,.14);
  --serif:"Playfair Display",Iowan Old Style,Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 100% -10%, #eaf1e4 0%, transparent 60%),
    radial-gradient(700px 420px at -10% 100%, #f7ece2 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--olive); text-decoration:none}

.wrap{max-width:1080px; margin:0 auto; padding:20px 16px 48px}
.wrap-sm{max-width:470px; margin:0 auto; padding:20px 16px 48px}

/* ---------- Header ---------- */
header.top{
  background:rgba(255,253,249,.82); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
  padding:12px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
header.top .brand{
  font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px;
}
header.top .brand .leaf{display:inline-block; animation:sway 4s ease-in-out infinite; transform-origin:bottom center}
header.top nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
header.top nav a{
  padding:7px 13px; border-radius:99px; color:var(--ink-soft); font-size:14px; font-weight:600;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
header.top nav a:hover{transform:translateY(-1px)}
header.top nav a.active,header.top nav a:hover{background:var(--sage-soft); color:var(--olive)}

/* ---------- Thẻ ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:18px; box-shadow:var(--shadow);
  animation:riseIn .55s cubic-bezier(.22,.9,.3,1) both;
}
.card:nth-child(2){animation-delay:.07s}
.card:nth-child(3){animation-delay:.14s}
.card:nth-child(4){animation-delay:.21s}
.card h2{margin:0 0 16px; font-size:20px; font-family:var(--serif); font-weight:700}
.card h3{margin:22px 0 10px; font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1.2px; font-weight:700}

/* ---------- Form ---------- */
label{display:block; font-size:13px; color:var(--ink-soft); margin:14px 0 6px; font-weight:600}
input,select,textarea{
  width:100%; padding:12px 14px; background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:14px; font-size:16px; font-family:inherit;
  transition:border-color .22s ease, box-shadow .22s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 4px rgba(127,155,118,.16);
}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row>*{flex:1; min-width:150px}

/* ---------- Nút ---------- */
.btn{
  display:inline-block; padding:12px 20px; border-radius:99px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--sage),var(--sage-dark)); color:#fff;
  font-size:15px; font-weight:700; font-family:inherit; text-align:center;
  box-shadow:0 5px 16px rgba(95,122,88,.28);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(95,122,88,.32)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.42; cursor:not-allowed; transform:none; box-shadow:none}
.btn-lg{width:100%; padding:17px; font-size:17px; margin-top:14px}
.btn-ghost{background:#fff; color:var(--olive); border:1.5px solid var(--line); box-shadow:none}
.btn-ghost:hover{background:var(--sage-soft); box-shadow:0 6px 16px rgba(95,122,88,.14)}
.btn-terra{background:linear-gradient(135deg,#dc9375,var(--terra)); box-shadow:0 5px 16px rgba(201,123,90,.3)}
.btn-danger{background:linear-gradient(135deg,#d98577,var(--bad)); box-shadow:0 5px 16px rgba(194,106,92,.28)}
.btn-sm{padding:7px 14px; font-size:13px}

/* ---------- Bảng ---------- */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:12px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{color:var(--ink-soft); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.9px}
tbody tr{transition:background .2s ease}
tbody tr:hover{background:var(--sage-soft)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Nhãn ---------- */
.tag{display:inline-block; padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700}
.tag-ok{background:var(--sage-soft); color:var(--olive)}
.tag-late{background:#fbf0da; color:#a97717}
.tag-bad{background:var(--terra-soft); color:#a95740}
.tag-off{background:var(--bg-2); color:var(--ink-soft)}

/* ---------- Thông báo ---------- */
.alert{
  padding:13px 16px; border-radius:14px; margin-bottom:14px; font-size:14.5px; font-weight:500;
  animation:riseIn .4s cubic-bezier(.22,.9,.3,1) both;
}
.alert-ok{background:var(--sage-soft); color:var(--olive); border:1px solid #cddcc6}
.alert-bad{background:var(--terra-soft); color:#a95740; border:1px solid #efd4c6}
.alert-info{background:#f3f0e6; color:#7a6a45; border:1px solid #e6dcc3}

/* ---------- Thống kê ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px}
.stat{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow); animation:riseIn .5s cubic-bezier(.22,.9,.3,1) both;
  transition:transform .25s ease, box-shadow .25s ease;
}
.stat:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.stat:nth-child(2){animation-delay:.06s} .stat:nth-child(3){animation-delay:.12s}
.stat:nth-child(4){animation-delay:.18s} .stat:nth-child(5){animation-delay:.24s}
.stat .k{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.9px; font-weight:700}
.stat .v{font-size:25px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums; font-family:var(--serif)}

/* ---------- Đồng hồ ---------- */
.clock{text-align:center; padding:10px 0 4px; position:relative}
.clock .greet{font-family:var(--serif); font-size:19px; color:var(--olive); margin-bottom:6px}
.clock .time{
  font-size:52px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:1px;
  font-family:var(--serif); line-height:1.1;
  background:linear-gradient(135deg,var(--olive),var(--sage)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.clock .date{color:var(--ink-soft); font-size:14px; margin-top:4px}

/* Vòng tròn nhịp thở quanh nút chấm công */
.pulse-wrap{position:relative}
.pulse-wrap.locating::after{
  content:''; position:absolute; inset:-6px; border-radius:99px;
  border:2px solid var(--sage); animation:pulse 1.4s ease-out infinite; pointer-events:none;
}

.muted{color:var(--ink-soft); font-size:13.5px}
.right{text-align:right}
.mt{margin-top:16px}
.split{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.divider{border-top:1px solid var(--line); margin:16px 0}

.pay-line{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--line); font-size:15px}
.pay-line span:last-child{font-variant-numeric:tabular-nums; font-weight:600}
.pay-line.total{
  border:0; font-size:21px; font-weight:700; padding-top:16px; color:var(--olive); font-family:var(--serif);
}

/* Lá rơi trang trí */
.petals{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.petal{position:absolute; top:-24px; font-size:16px; opacity:.5; animation:fall linear infinite}

/* ---------- Chuyển động ---------- */
@keyframes riseIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes sway{0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)}}
@keyframes pulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.16); opacity:0}}
@keyframes fall{
  0%{transform:translateY(-10vh) rotate(0deg)}
  100%{transform:translateY(110vh) rotate(320deg)}
}
@keyframes pop{0%{transform:scale(.86); opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1); opacity:1}}
.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1) both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .petals{display:none}
}
@media print{
  body{background:#fff}
  header.top,.no-print,.petals{display:none}
  .card{border:1px solid #ddd; box-shadow:none; animation:none}
}

/* Ẩn bớt cột phụ trên màn hình hẹp để cột quan trọng luôn thấy được */
@media (max-width: 900px){
  .opt{display:none}
}

/* ---------- Thẻ thu nhập ---------- */
.money-card{
  background:linear-gradient(160deg,#fffdf9 0%,#f4f7f0 100%);
  border-color:#dfe8d8;
}
.money-big{
  font-family:var(--serif); font-size:40px; font-weight:700; letter-spacing:.5px;
  margin:10px 0 4px; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--olive),var(--sage)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.money-bars{
  display:flex; align-items:flex-end; gap:7px; height:86px; margin-top:18px;
  padding-top:8px; border-top:1px dashed var(--line);
}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px}
.bar-col span{font-size:10.5px; color:var(--ink-soft)}
.bar{
  width:100%; max-width:26px; border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--sage),var(--sage-dark));
  height:var(--h); animation:growBar .7s cubic-bezier(.2,.9,.3,1) both;
  transform-origin:bottom;
}
@keyframes growBar{from{transform:scaleY(0); opacity:.3} to{transform:scaleY(1); opacity:1}}


/* ---------- Nhận diện thương hiệu ---------- */
.hero{
  border-radius:var(--radius); overflow:hidden; margin-bottom:18px;
  box-shadow:var(--shadow); background:var(--brand-deep);
  animation:riseIn .55s cubic-bezier(.22,.9,.3,1) both;
}
.hero img{
  display:block; width:100%; height:auto;
  aspect-ratio:5/2; object-fit:cover; object-position:center;
  animation:heroZoom 8s ease-out both;
}
@keyframes heroZoom{from{transform:scale(1.06)} to{transform:scale(1)}}

.brand-logo{
  width:30px; height:30px; border-radius:9px; object-fit:cover;
  box-shadow:0 2px 8px rgba(27,65,44,.22); flex:none;
}
header.top .brand{gap:10px}

@media (max-width:420px){
  .hero img{aspect-ratio:2/1}
}
@media (prefers-reduced-motion: reduce){
  .hero img{animation:none}
}