/* Nắp & tem ly — warm, small and legible, mobile-first as the rest of the hub. */
.packaging-page { max-width: 1070px; margin: 0 auto 30px; color: #63452e; }
.packaging-intro { padding: 18px 20px 14px; background: #fff2d9; border: 1px solid #e4bc8c; border-radius: 18px; margin-bottom: 14px; box-shadow: inset 0 1px #fffdf0; }
.packaging-intro > span { font-size: 12px; letter-spacing: .15em; font-weight: 900; color: #775638; }
.packaging-intro h3 { margin: 6px 0 8px; font-size: clamp(21px,3vw,30px); color: #603a27; }
.packaging-intro p { margin: 0; line-height: 1.5; color: #725844; }
.packaging-layout { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(300px,1.15fr); gap: 18px; align-items: start; }
.packaging-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 18px 19px; border: 2px solid #ddba8d; border-radius: 24px; background: linear-gradient(#fff4de,#f3dfc2); box-shadow: inset 0 2px #fffdf0,0 4px 9px #5a352015; position:sticky; top:12px; }
.packaging-preview canvas { width: min(100%,310px); height: auto; display: block; }
.packaging-preview strong { font-size: 20px; color: #684128; margin-top: 3px; }
.packaging-preview span { text-align: center; line-height: 1.45; font-size: 13px; color: #6e5841; margin-top: 7px; }
.packaging-editor { display: grid; gap: 15px; }
.packaging-group, .packaging-name { display: block; padding: 14px; border: 1px solid #e8cba7; border-radius: 19px; background: #fffaf0; }
.packaging-group h4 { margin: 0 0 11px; font-size: 18px; }
.packaging-group h4 small { font:700 12px Nunito,Arial,sans-serif; color:#70563c; margin-left:6px; }
.packaging-help { font-size:12px; margin:-4px 0 12px; line-height:1.4; color:#70573f; }
.packaging-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.packaging-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 12px; min-height: 65px; border: 1.5px solid #dec49d; border-radius: 14px; background: #fff4df; color: #704a31; cursor: pointer; text-align: left; transition: background .12s,transform .12s,border-color .12s; }
.packaging-choice b { font-size: 15px; }
.packaging-choice small { font-size: 12px; line-height: 1.25; color: #70573f; }
.packaging-choice.selected { border-color: #82916c; background: #edf2d9; box-shadow: inset 0 0 0 1px #c8d6b0; }
.packaging-choice.selected::after { content: '✓ Đang dùng'; font-size: 12px; font-weight: 800; color: #577448; }
.packaging-choice:hover, .packaging-choice:focus-visible { background: #f8e9cf; border-color: #b78759; }
.packaging-choice.selected:hover { background: #e4edcd; }
.packaging-choice.locked { opacity:.73; background:#f6eee1; border-style:dashed; cursor:not-allowed; }
.packaging-choice.locked:hover { filter:none; border-color:#dec49d; }
.packaging-lock { font-size:12px; margin-left:2px; }
.packaging-label-options .packaging-choice { align-items:center; text-align:center; min-height:151px; padding:8px 8px 12px; gap:3px; }
.packaging-label-options .packaging-choice b { font-size:14px; }
.packaging-label-options .packaging-choice small { font-size:12px; }
.packaging-swatch { display:block; width:min(100%,170px); height:auto; max-height:106px; object-fit:contain; }
.packaging-font-options .packaging-choice { min-height:92px; align-items:center; text-align:center; padding:10px 6px; }
.packaging-font-sample { display:block; max-width:100%; color:#6b4834; font-size:19px; line-height:1.25; }
.packaging-font-sample.sample-classic { font-family:Arial,Tahoma,sans-serif; font-weight:700; }
.packaging-font-sample.sample-hand { font-family:Patrick,Nunito,sans-serif; font-size:22px; }
.packaging-font-sample.sample-round { font-family:Nunito,Arial,sans-serif; font-weight:800; }
.packaging-font-sample.sample-vintage { font-family:Georgia,serif; font-weight:bold; }
.packaging-font-sample.sample-elegant { font-family:Georgia,serif; font-weight:bold; font-style:italic; }
.packaging-font-sample.sample-type { font-family:'Courier New',monospace; font-weight:bold; font-size:16px; }
.packaging-font-sample.sample-friendly { font-family:'Trebuchet MS',Nunito,sans-serif; font-weight:bold; }
.packaging-printer { display:flex; align-items:center; gap:14px; padding:13px 17px; margin:0 0 15px; border:2px solid #bc946b; border-radius:19px; background:linear-gradient(110deg,#f2e3c7,#fff7e7); box-shadow:0 3px 0 #aa794f20; }
.packaging-printer.owned { border-color:#91a47a; background:linear-gradient(110deg,#e9edd5,#f8f6e4); }
.packaging-printer-art { position:relative; flex:none; width:67px; height:66px; display:grid; place-items:center; border:3px solid #9b6843; border-radius:13px 13px 17px 17px; box-shadow:inset 0 -6px #ad7a5170,0 3px 0 #9b69484d; background:#d2a37b; }
.packaging-printer-art span { color:#fff7da; font:700 42px Arial,sans-serif; }
.packaging-printer-art i { position:absolute; bottom:-12px; left:19px; width:28px; height:26px; border:1px solid #bc9571; border-radius:3px; background:#fff0d5; text-align:center; font-style:normal; line-height:24px; color:#75544e; }
.packaging-printer-copy { display:flex; flex-direction:column; flex:1; gap:4px; min-width:0; }
.packaging-printer-copy small { letter-spacing:.06em; font-size:12px; color:#76563a; font-weight:800; }
.packaging-printer-copy strong { font-size:21px; line-height:1.2; color:#70482e; }
.packaging-printer-copy span { font-size:13px; line-height:1.4; color:#73553e; }
.packaging-printer-copy em { font-style:normal; font-size:12px; color:#7d5333; font-weight:700; }
.packaging-buy-printer { flex:none; padding:13px 16px; min-height:46px; border:2px solid #745a32; border-radius:13px; background:#556f36; color:#fff8e6; font-weight:800; box-shadow:0 3px 0 #58472e55; cursor:pointer; }
.packaging-buy-printer:hover { background:#6e8750; }
.packaging-buy-printer:focus-visible { outline:3px solid #a2b98e; outline-offset:3px; }
.packaging-printer-owned { flex:none; font-size:12px; font-weight:900; color:#627748; }
.packaging-name b { display: block; margin-bottom: 8px; font-size: 17px; }
.packaging-name input { box-sizing: border-box; width: 100%; max-width: 100%; padding: 12px; border: 1.5px solid #d5ae7f; border-radius: 12px; color: #6e4931; background: #fffdf7; font: inherit; }
.packaging-name input:focus-visible { outline: 2px solid #92ad85; outline-offset: 2px; }
.packaging-name small { display: block; margin-top: 8px; color: #6f5741; line-height: 1.45; }
@media(max-width:730px) {
  .packaging-intro { padding: 13px 14px 15px; }
  .packaging-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .packaging-preview canvas { width: min(100%,240px); }
  .packaging-preview { position:static; padding: 8px 10px 16px; }
  .packaging-preview strong { font-size: 18px; }
  .packaging-group, .packaging-name { padding: 12px; }
  .packaging-printer { flex-wrap:wrap; padding:12px; gap:12px; }
  .packaging-printer-copy { flex-basis:calc(100% - 86px); }
  .packaging-buy-printer { width:100%; }
  .packaging-label-options .packaging-choice { min-height:138px; padding:7px 5px 10px; }
  .packaging-swatch { max-height:88px; }
}

/* Brand album: passive rewards for beautifully packed drinks, no new tasks. */
.brand-album { max-width:1070px; margin:20px auto 34px; padding:18px; border:2px solid #d9bd95; border-radius:22px; background:#fff7e7; color:#6b492f; box-shadow:0 3px 0 #90684513; }
.brand-album-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-album-title small { font-size:12px; font-weight:900; letter-spacing:.12em; color:#77543c; }
.brand-album-title h3 { margin:5px 0; font-size:clamp(20px,3vw,26px); color:#65432c; }
.brand-album-title p { margin:0; color:#745740; font-size:13px; line-height:1.45; }
.brand-album-flower { font-size:38px; color:#c58f87; padding:5px 10px; }
.brand-album-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.brand-album-stats > div { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:79px; gap:5px; padding:9px; border:1px solid #e8cba7; border-radius:14px; background:#f9ead1; text-align:center; }
.brand-album-stats strong { font-size:clamp(15px,2.5vw,23px); line-height:1.18; }
.brand-album-stats small { color:#725640; font-size:12px; line-height:1.25; }
.brand-album-marks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:13px; }
.brand-milestone { display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; min-height:88px; border:1px dashed #d5b997; background:#fcf2e2; border-radius:14px; opacity:.75; text-align:center; }
.brand-milestone.earned { background:#eff1da; border:1.5px solid #91a87e; opacity:1; }
.brand-milestone > span { font-size:20px; color:#bc9182; }
.brand-milestone.earned > span { color:#648251; }
.brand-milestone strong { font-size:15px; }
.brand-milestone small { font-size:12px; line-height:1.4; color:#715843; padding:0 4px; }
.brand-album-next { margin:9px 0 16px; font-size:12px; text-align:center; color:#70583e; }
.brand-album-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.brand-album-grid > div { min-width:0; padding:13px; border:1px solid #e7caa4; border-radius:16px; background:#fffbf3; }
.brand-album-grid h4 { margin:0 0 9px; font-size:16px; }
.brand-album-grid p { margin:6px 0; line-height:1.45; font-size:13px; }
.brand-album-grid small { font-size:12px; color:#6e5745; line-height:1.45; }
.brand-album-reactions { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.brand-album-reactions li { padding:9px 0; border-bottom:1px dashed #e7cba6; }
.brand-album-reactions li:last-child { border:0; }
.brand-album-reactions li > span { font-size:12px; font-weight:800; color:#8b9877; }
.brand-album-reactions li p { margin:4px 0; }
.brand-album-reactions li.empty { color:#6e5945; font-size:13px; line-height:1.45; }
@media(max-width:730px) {
  .brand-album { padding:12px; margin-top:15px; }
  .brand-album-flower { font-size:28px; }
  .brand-album-stats,.brand-album-marks { gap:6px; }
  .brand-album-stats > div { min-height:73px; padding:7px 4px; }
  .brand-album-stats small,.brand-milestone small { font-size:11px; }
  .brand-milestone { min-height:80px; }
  .brand-album-grid { grid-template-columns:1fr; }
}