/* =========================
   RESET
========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  background:#f5f3eb;
  font-family:'Cormorant Garamond', serif;
  color:#373c38;
}

/* =========================
   FRAME
========================= */
.frame{
  width:960px;                 /* hẹp lại chút cho đỡ loãng */
  margin:60px auto;
  background:#fffef3;
  border:3px solid #373c38;
  padding:16px;
}

/* =========================
   TITLE
========================= */
.site-title{
  font-size:2.6rem;
  font-weight:700;
  color:#e16b8c;
}
.site-title span{
  font-weight:400;
  color:#373c38;
}
.subtitle{
  margin-top:6px;
  font-size:0.95rem;
  letter-spacing:0.12em;
  color:#787878;
}

/* =========================
   GRID SYSTEM
   chỉ grid có viền, cell không có border riêng
========================= */
.grid{
  display:grid;
  margin-top:20px;
  border-left:2.5px solid #373c38;
  border-top:2.5px solid #373c38;
}

.grid.two{
  grid-template-columns:1.4fr 1fr;
}

.grid.three{
  grid-template-columns:1fr 1fr 1fr;
}

.grid > .cell{
  border-right:2.5px solid #373c38;
  border-bottom:2.5px solid #373c38;
}

/* =========================
   CELL
========================= */
.cell{
  position:relative;
  padding:22px;
  background:#fffef3;
  min-height:120px;
}

/* =========================
   TEXT
========================= */
.cell.text{
  font-size:1.2rem;
  line-height:1.9;
}

.cell.text h3{
  font-size:1.7rem;
  margin-bottom:8px;
}

/* =========================
   BACKGROUND COLOR BLOCKS
========================= */
.bg-blue{ background:#51a8dd; }
.bg-pink{ background:#e16b8c; }
.bg-purple{ background:#8b81c3; }
.bg-green{ background:#86c166; }
.bg-yellow{ background:#f9bf45; }

/* tất cả ô nền màu (trừ vàng) chữ trắng */
.bg-blue,
.bg-pink,
.bg-purple,
.bg-green{
  color:#fff !important;
}
.bg-blue h3,
.bg-pink h3,
.bg-purple h3,
.bg-green h3{
  color:#fff !important;
}

/* vàng giữ chữ tối cho dễ đọc */
.bg-yellow{
  color:#373c38;
}

/* =========================
   IMAGE SLOT
========================= */
.image-slot{
  font-style:italic;
  color:#9a9a9a;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0.05em;
}

/* =========================
   STRIP (chuyển cảnh)
========================= */
.strip{
  margin-top:0;
  border:2.5px solid #373c38;
  border-top:none;
  padding:14px;
  font-size:0.9rem;
  color:#9a9a9a;
  text-align:center;
  letter-spacing:0.06em;
  background:#fffef3;
}

/* =========================
   ICON
   icon phẳng, to như hình minh họa
========================= */
.icon-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffef3;
}

.icon-slot svg{
  width:100px;
  height:100px;
  fill:#373c38;
}

/* =========================
   PATTERN SLOT
========================= */
.pattern-slot{
  position:relative;
  overflow:visible;
  background:#fffef3;
}

/* =========================
   STICKER BASE (miếng giấy dán)
========================= */
.sticker{
  position:absolute;
  border:2.5px solid #373c38;
  box-shadow:2px 2px 0 rgba(0,0,0,0.08);
}

/* =========================
   SHAPES
========================= */
.round{ border-radius:50%; }
.soft{ border-radius:14px; }
.rect{ border-radius:6px; }

/* miếng giấy chữ nhật dài */
.long{
  width:160px;
  height:80px;
  border-radius:10px;
}

/* nghiêng nhẹ cho cảm giác dán tay */
.tilt{ transform:rotate(-8deg); }
.tilt2{ transform:rotate(6deg); }

/* =========================
   SIZES
========================= */
.big{ width:140px; height:140px; }
.mid{ width:100px; height:100px; }
.small{ width:70px; height:70px; }

/* =========================
   COLORS
========================= */
.pink{ background:#e16b8c; }
.blue{ background:#51a8dd; }
.green{ background:#86c166; }
.yellow{ background:#f9bf45; }
.purple{ background:#8b81c3; }

/* =========================
   PATTERN TYPES (MẢNG MÀU, KHÔNG DÙNG NÉT MẢNH)
========================= */

/* chấm bi */
.dots{
  background-image:
    radial-gradient(#fff 30%, transparent 31%);
  background-size:22px 22px;
}

/* sọc chéo */
.stripes{
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.95) 0px,
      rgba(255,255,255,0.95) 10px,
      transparent 10px,
      transparent 22px
    );
}

/* sóng nước Nhật (Seigaiha) */
.waves{
  background-image:
    radial-gradient(circle at 50% 100%, #fff 30%, transparent 31%),
    radial-gradient(circle at 0% 100%, #fff 30%, transparent 31%),
    radial-gradient(circle at 100% 100%, #fff 30%, transparent 31%);
  background-size:48px 48px;
  background-position:0 0, 24px 0, 24px 0;
}

/* sóng ngang kiểu washi */
.wave-lines{
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.9) 0px,
      rgba(255,255,255,0.9) 6px,
      transparent 6px,
      transparent 16px
    );
}

/* hoa sakura đơn giản */
.sakura{
  background-image:
    radial-gradient(circle at 50% 50%, #fff 16%, transparent 17%),
    radial-gradient(circle at 50% 25%, #fff 16%, transparent 17%),
    radial-gradient(circle at 25% 50%, #fff 16%, transparent 17%),
    radial-gradient(circle at 75% 50%, #fff 16%, transparent 17%),
    radial-gradient(circle at 50% 75%, #fff 16%, transparent 17%);
  background-size:36px 36px;
}

/* caro mềm kiểu Nhật */
.check{
  background-image:
    linear-gradient(#fff 2px, transparent 2px),
    linear-gradient(90deg, #fff 2px, transparent 2px);
  background-size:22px 22px;
}

/* nửa trăng */
.halfmoon{
  background-image:
    radial-gradient(circle at 30% 50%, #fff 40%, transparent 41%);
  background-size:40px 40px;
}

/* mảng trơn */
.solid{
  background-image:none;
}

/* =========================
   POSITIONS (để đè nhau như washi tape)
========================= */
.pos-a{ top:8px; left:10px; z-index:1; }
.pos-b{ top:36px; left:56px; z-index:2; }
.pos-c{ bottom:12px; right:18px; z-index:2; }
.pos-d{ top:12px; right:12px; z-index:1; }
.pos-e{ bottom:28px; left:36px; z-index:3; }
.pos-f{ top:50px; right:60px; z-index:4; }